先上效果图
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);
});
网友评论