先上效果图
下拉列表3.png
1.html 放置容器
<tr> <td class="control-label label-left"> <span >*</span> <span>设备信息：</span> </td> <td> <span > <div id="add_equip_table" 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);
});
作者：_信仰zmh
链接：https://www.jianshu.com/p/eb0faa83ad6c