kendo ui grid 引入下拉列表

下拉列表3.png

                   
                        
                            *
                            设备信息：
                        
                        
                            
                                 
                            
                        
                    

    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:"新增设备信息"
                        }
                    ]
                }
            };            var edit_DEV_COMPANY = function (item) {                var pId = item.id;                var pCompany = item.DEV_COMPANY;                if(!pCompany.trim()){
                    vm.addPersonData[pId].DEV_COMPANY = "";                    return "请填写厂商，例如DELL";
                }else{                    if(pCompany.length > 100){
                        vm.addPersonData[pId].DEV_COMPANY = "";                        return "最大限制100字";
                    }else{
                        vm.addPersonData[pId].DEV_COMPANY = pCompany;                        return ""+pCompany+"";
                    }
                }
            }            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 "请填写设备型号";
                }else{                    if(pModel.length > 100){
                        vm.addPersonData[pId].DEV_MODEL_NUMBER = "";                        return "最大限制100字";
                    }else{
                        vm.addPersonData[pId].DEV_MODEL_NUMBER = pModel;                        return ""+pModel+"";
                    }
                }
            }            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 "请填写设备序列号";
                }else{                    if(pSerial.length > 200){
                        vm.addPersonData[pId].DEV_SERIAL_NUMBER = "";                        return "最大限制200字";
                    }else{
                        vm.addPersonData[pId].DEV_SERIAL_NUMBER = pSerial;                        return ""+pSerial+"";
                    }
                }
            }
            vm.addPersonGridTableColumns = [
                {                    field: "DEV_RACK_CODE",                    title: "机柜编号",                    width:100,                    editor:function (container, options) {                        var id = options.model.id;                        var input = $('');
                        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 = $('');
                        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: "删除"
                }
              ];
            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