先上效果图
grid 下拉列表 1.png
grid 下拉列表 2.png
下拉列表 3.png
1.html 放置容器
- <tr>
- <td class="control-label label-left">
- <span style="color:red;">*</span>
- <span > 设备信息:</span>
- </td>
- <td>
- <span style="display: inline-block;">
- <div id="add_equip_table" style="margin-bottom: 0; text-align:center;" class="table table-striped table-bordered table-hover table-fixed"></div>
- </span>
- </td>
- </tr>
2.js 设置模板和配置
- vm.addPersonData = [{id: 0,DEV_RACK_CODE: "请选择机柜编号",DEV_TYPE:"请选择设备类型", DEV_COMPANY: "", DEV_MODEL_NUMBER:"", DEV_SERIAL_NUMBER:""}];
- vm.addPersonGridTableOption = {
- gridId: 'add_equip_table',
- gridOption:{
- editable: true,
- toolbar : [
- { name:"create",
- template:"<button style='float:left;'id='addPerson'class='k-button k-button-icontext'><i class='k-icon k-i-add'></i > 新增设备信息 </button>"
- }
- ]
- }
- };
- var edit_DEV_COMPANY = function (item) {
- var pId = item.id;
- var pCompany = item.DEV_COMPANY;
- if(!pCompany.trim()){
- vm.addPersonData[pId].DEV_COMPANY = "";
- return "<div style='text-align: center;color:#a9a9a9;'><span > 请填写厂商, 例如 DELL</span></div>";
- }else{
- if(pCompany.length> 100){
- vm.addPersonData[pId].DEV_COMPANY = "";
- return "<div style='text-align: center;color:red;'><span > 最大限制 100 字 </span></div>";
- }else{
- vm.addPersonData[pId].DEV_COMPANY = pCompany;
- return "<div style='text-align: center;'><span>"+pCompany+"</span></div>";
- }
- }
- }
- var edit_DEV_MODEL_NUMBER = function (item) {
- var pId = item.id;
- var pModel = item.DEV_MODEL_NUMBER;
- if(!pModel.trim()){
- vm.addPersonData[pId].DEV_MODEL_NUMBER = "";
- return "<div style='text-align: center;color:#a9a9a9;'><span > 请填写设备型号 </span></div>";
- }else{
- if(pModel.length> 100){
- vm.addPersonData[pId].DEV_MODEL_NUMBER = "";
- return "<div style='text-align: center;color:red;'><span > 最大限制 100 字 </span></div>";
- }else{
- vm.addPersonData[pId].DEV_MODEL_NUMBER = pModel;
- return "<div style='text-align: center;'><span>"+pModel+"</span></div>";
- }
- }
- }
- var edit_DEV_SERIAL_NUMBER = function (item) {
- var pId = item.id;
- var pSerial = item.DEV_SERIAL_NUMBER;
- if(!pSerial.trim()){
- vm.addPersonData[pId].DEV_SERIAL_NUMBER = "";
- return "<div style='text-align: center;color:#a9a9a9;'><span > 请填写设备序列号 </span></div>";
- }else{
- if(pSerial.length> 200){
- vm.addPersonData[pId].DEV_SERIAL_NUMBER = "";
- return "<div style='text-align: center;color:red;'><span > 最大限制 200 字 </span></div>";
- }else{
- vm.addPersonData[pId].DEV_SERIAL_NUMBER = pSerial;
- return "<div style='text-align: center;'><span>"+pSerial+"</span></div>";
- }
- }
- }
- vm.addPersonGridTableColumns = [
- {
- field: "DEV_RACK_CODE",
- title: "机柜编号",
- width:100,
- editor:function (container, options) {
- var id = options.model.id;
- var input = $('<input id="listNo"name="' + options.field+ '"placeholder=" 请选择 "/>');
- input.appendTo(container);
- input.kendoDropDownList({
- //dataTextField:title,// 在下拉框中现实的字母
- //dataValueField:name,// 当下拉框中的元素被点击是真正取到的值
- dataSource:["请选择机柜编号","BS10342234232","DF5236545555","GF52555633","FD324522"],// 包括数据的 json 对象 比如 var aaaa=[{"name":"aaaa","title":"AAAAA"}];
- change:function(data){
- console.log("data--->",data);
- var i = data.sender._old;
- console.log(input);
- vm.addPersonData[id].DEV_RACK_CODE = i;
- console.log(i);
- }
- }).data("kendoDropDownList");
- input.select(0);
- }
- },
- {
- field: "DEV_TYPE",
- title: "设备类型",
- width:100,
- editor:function (container, options) {
- var id = options.model.id;
- var input2 = $('<input id="listType"name="' + options.field+ '"placeholder=" 请选择 "/>');
- input2.appendTo(container);
- input2.kendoDropDownList({
- //dataTextField:title,// 在下拉框中现实的字母
- //dataValueField:name,// 当下拉框中的元素被点击是真正取到的值
- dataSource:["请选择设备类型","服务器","存储阵列", "交换机","其他"],// 包括数据的 json 对象 比如 var aaaa=[{"name":"aaaa","title":"AAAAA"}];
- change:function(data){
- console.log("data232424--->",data);
- var i = data.sender._old;
- console.log(input2);
- vm.addPersonData[id].DEV_TYPE = i;
- console.log(i);
- }
- }).data("kendoDropDownList");
- input2.select(0);
- }
- },
- {
- field: "DEV_COMPANY",
- title: "厂商",
- width: 100,
- template: edit_DEV_COMPANY
- },
- {
- field: "DEV_MODEL_NUMBER",
- title: "型号",
- width: 100,
- template: edit_DEV_MODEL_NUMBER
- },
- {
- field: "DEV_SERIAL_NUMBER",
- title: "序列号",
- width: 100,
- template: edit_DEV_SERIAL_NUMBER
- },
- {
- title: "操作",
- width: "8%",
- template: "<div style='text-align: center'><button class='k-button k-button-icontext'id='deleteTest'><span class='k-icon k-i-delete'></span > 删除 </button></div>"
- }
- ];
- vm.enterPersonGrid = gridService.createGridByLocalData(vm.addPersonGridTableColumns,vm.addPersonData,vm.addPersonGridTableOption).grid;
- vm.updateTestGrid = function(){
- vm.enterPersonGrid = gridService.createGridByLocalData(vm.addPersonGridTableColumns,vm.addPersonData,vm.addPersonGridTableOption).grid;
- }
- vm.enterPersonGrid.table.on("click", "#deleteTest", deleteTest);
- function deleteTest(){
- var row = $(this).closest("tr");
- var dataItem = vm.enterPersonGrid.dataItem(row);
- var pId = dataItem.id;
- vm.addPersonData.splice(pId,1);
- for(var i = 0; i < vm.addPersonData.length; i++){
- vm.addPersonData[i].id = i;
- }
- vm.updateTestGrid();
- }
- $("#addPerson").click(function() {
- var ifAdd = true;
- for(var i = 0; i < vm.addPersonData.length; i++){
- if(!vm.addPersonData[i].DEV_TYPE.trim() || !vm.addPersonData[i].DEV_COMPANY.trim() || !vm.addPersonData[i].DEV_MODEL_NUMBER.trim() || !vm.addPersonData[i].DEV_SERIAL_NUMBER.trim()){
- ifAdd = false;
- break;
- }
- }
- if(ifAdd){
- for(var i = 0; i < vm.addPersonData.length; i++){
- vm.addPersonData[i].id = i;
- }
- var j = vm.addPersonData.length;
- var obj = {id: j, DEV_RACK_CODE: "请选择机柜编号",DEV_TYPE:"请选择设备类型", DEV_COMPANY: "", DEV_MODEL_NUMBER:"", DEV_SERIAL_NUMBER:""};
- vm.addPersonData.push(obj);
- vm.updateTestGrid();
- }else{
- toaster.error({title: "提示" , body: "列表中含有项填写不符合规则, 请填写正确后添加新纪录."} );
- }
- console.log(vm.addPersonData);
- });
来源: http://www.jianshu.com/p/eb0faa83ad6c