美文网首页
kendoui grid 添加checkbox 、 radio单

kendoui grid 添加checkbox 、 radio单

作者: _信仰zmh | 来源:发表于2018-04-08 20:30 被阅读187次

我不得不承认kendoUI，的确是一个很不错的框架，封装的很强大。有了它，前端会省很多的力气去重复造轮子。

但我也是很想吐槽，kendoUI，官网加载慢的跟狗一样，最近还打不开，即使打开了，点进去并没有相应的文档示例，之前的文档示例，现在一个都不显示，我心里也是一万个草泥马，看不了示例，搞个毛呀。

示例文档看不了1.png

网上搜的示例把，大部分满足不了项目的需求。

还有就是项目针对grid，进行了一次封装，导致外部的示例，并不会适用。

kendo UI grid 怎么设置某行可编辑？

  • 大部分写的示例如下：在对应的fields中设置editable属性即可。
dataSource = new kendo.data.DataSource({
   ...
   schema: {
       model: {
          id: "ProductID",
          fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { editable: true},
                 ...
          }
       }
   }
});
  • 但我这项目中并不会用new kendo.data.DataSource()， 针对fields中设置的editable并不起作用
项目中kendo 给全部的设置可编辑如下

在gridOption中添加editable属性，这样grid所用的列都可编辑。

vm.addPersonGridTableOption = {
                gridId: 'add_person_table',
                gridOption:{
                    editable: true,
                    toolbar : [
                        {   name:"create",
                            template:"<button id='addPerson'  class='k-button k-button-icontext'><i class='k-icon k-i-add'></i>新增进场人员</button>"
                        }
                    ]
                }
            };

如何取消某一列的可编辑，到现在我也没搞明白。

  • 直接在colums中的某一列，添加editable：false，然而 并没有用。

  • 后来我对比示例，猜测既然他们的editable是针对datasource中的fields，如果我在columns中不使用field，那就不会使用到全局的editable为true， 结果这个 想法可行。

vm.addPersonGridTableColumns = [
                {
                    field: "personName",
                    title: "姓名",
                    width: 100,
                    template: editPersonName
                },
                {
                    title: "性别",
                    width: 50,
                    template: '<div style="text-align: center;" id="personSex">' +
                    "#if(personSex){#" +
                        "#if(personSex == '男'){#" +
                            '<label><input type="radio" name="personSex#:id#" value="男" checked/>男</label> ' +
                            '<label style="margin-left: 4px;"><input type="radio" name="personSex#:id#" value="女" />女</label>' +
                        "#}else if(personSex == '女'){#" +
                            '<label><input type="radio" name="personSex#:id#" value="男" />男</label> ' +
                            '<label style="margin-left: 4px;"><input type="radio" name="personSex#:id#" value="女" checked/>女</label>' +
                        "#}#"+
                    "#}else{#" +
                        '<label><input type="radio" name="personSex#:id#" value="男" />男</label> ' +
                        '<label style="margin-left: 4px;"><input type="radio" name="personSex#:id#" value="女" />女</label>' +
                    "#}#"+
                    '</div>'
                },
                {
                    title: "进场负责人",
                    width: 60,
                    template:'<div style="text-align: center;">' +
                        "#if(personAdmin == '是'){#" +
                            '<input type="checkbox" name="personAdmin" id="personAdmin" checked/>' +
                        "#}else{#" +
                            '<input type="checkbox" name="personAdmin" id="personAdmin"/>' +
                        "#}#"+
                    '</div>'
                },
                //{field: "personSex", title: "性别",width:50,
                //    editor:function (container, options) {
                //        var input = $('<input name="' + options.field + '" placeholder="请选择"/>');
                //        input.appendTo(container);
                //        input.kendoDropDownList({
                //            //dataTextField:title,//在下拉框中现实的字母
                //            //dataValueField:name,//当下拉框中的元素被点击是真正取到的值
                //            dataSource:["男","女"],//包括数据的json对象 比如 var aaaa=[{"name":"aaaa","title":"AAAAA"}];
                //        change:function(data){
                //            console.log("data--->",data);
                //            var item=data.dataItem(this.select());
                //        }
                //    }).data("kendoDropDownList");}
                //},
                {
                    field: "personCardId",
                    title: "身份证号",
                    width: 130,
                    template: editPersonCardId
                },
                {
                    field: "personMobile",
                    title: "联系方式",
                    width: 100,
                    template: editPersonMobile
                },
                {
                    field: "personUnit",
                    title: "人员单位",
                    width: 100,
                    template: editPersonUnit
                },
                {
                    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>"
                }];

完整的示例

1.在html 中，设置一个容器，用来生成grid
                   <tr>
                        <td class="control-label label-left">
                            <span style="color:red;">*</span>
                            <span>进场人员：</span>
                        </td>
                        <td>
                            <span style="display: inline-block;">
                                 // 设置进场人员grid的id容器
                                 <div id="add_person_table" style="margin-bottom: 0;" class="table table-striped table-bordered table-hover table-fixed"></div>
                            </span>
                        </td>
                    </tr>
2. 在controller.js相关的操作
  • 1.注入grid服务，基于门户封装的 gridService。
(function() {
    'use strict';
    angular
        .module('app.ec')
        .controller('CreateApplyForEnter', function ($scope,$location, $uibModal,toaster, gridService,bd01Service,eihttp) {
         ....
        })
})();
  • 使用本地数据，不使用远程数据，默认加载一条数据
 vm.addPersonData = [{id: 0,personName: "",personSex:"", personAdmin: "否", personMobile: "", personUnit: "", personCardId: ""}];
  • 配置grid，设置新增按钮、设置单元格可编辑
vm.addPersonGridTableOption = {
               // gridId 对应html 的容器id
                gridId: 'add_person_table',
                gridOption:{
                  // 设置全局可编辑
                    editable: true,
                  // 添加新增按钮，导航条 
                    toolbar : [
                        {   name:"create",
                            template:"<button id='addPerson'  class='k-button k-button-icontext'><i class='k-icon k-i-add'></i>新增进场人员</button>"
                        }
                    ]
                }
            };
  • 使用template模板，设置可编辑的单元格的格式，比如最大字节、格式校验等等
    校验格式是否合法，如果合法，当退出单元格编辑的时候，将数据保存到本地，并展示到模板上。
    如果不合法就返回相应的错误提示模板信息。
          var editPersonName = function (item) {
               var pId = item.id;
               var pName = item.personName;
               if(!pName.trim()){
                   vm.addPersonData[pId].personName = "";
                   return "<div style='text-align: center;color:#a9a9a9;' ><span>请填写姓名，必填项</span></div>";
               }else{
                   if(pName.length > 10){
                       vm.addPersonData[pId].personName = "";
                       return "<div style='text-align: center;color:red;' ><span>最大限制10个字符</span></div>";
                   }else{
                       vm.addPersonData[pId].personName = pName;
                       return "<div style='text-align: center;'><span>"+pName+"</span></div>";
                   }
               }
           }
            var editPersonCardId = function (item) {
                var pId = item.id;
                var pCard = item.personCardId;
                if(!pCard){
                    vm.addPersonData[pId].personCardId = "";
                    return "<div style='text-align: center;color:#a9a9a9;' ><span>请填写有效证件号，必填项</span></div>";
                }else{
                    var pattCardId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if(pattCardId.test(pCard)){
                        vm.addPersonData[pId].personCardId = pCard;
                        return "<div style='text-align: center;'><span>"+pCard+"</span></div>";
                    }else{
                        vm.addPersonData[pId].personCardId = "";
                        return "<div style='text-align: center;color:red;' ><span>身份证格式非法</span></div>";
                    }
                }
            }
            var editPersonMobile = function (item) {
                var pId = item.id;
                var pMobile = item.personMobile;
                if(!pMobile){
                    vm.addPersonData[pId].personMobile = "";
                    return "<div style='text-align: center;color:#a9a9a9;' ><span>请填写正确手机号码，必填项</span></div>";
                }else{
                    var pattMobile = /^[0-9]{11}$/;
                    if(pattMobile.test(pMobile)){
                        vm.addPersonData[pId].personMobile = pMobile;
                        return "<div style='text-align: center;'><span>"+pMobile+"</span></div>";
                    }else{
                        vm.addPersonData[pId].personMobile = "";
                        return "<div style='text-align: center;color:red;' ><span>手机格式非法</span></div>";
                    }
                }
            }
            var editPersonUnit = function (item) {
                var pId = item.id;
                var pUnit = item.personUnit;
                if(!pUnit.trim()){
                    vm.addPersonData[pId].personUnit = "";
                    return "<div style='text-align: center;color:#a9a9a9;' ><span>请填写单位名称，必填项</span></div>";
                }else{
                    if(pUnit.length > 100){
                        vm.addPersonData[pId].personUnit = "";
                        return "<div style='text-align: center;color:red;' ><span>最大限制100字</span></div>";
                    }else{
                    vm.addPersonData[pId].personUnit = pUnit;
                    return "<div style='text-align: center;'><span>"+pUnit+"</span></div>";
                    }
                }
            }
  • 设置columns
vm.addPersonGridTableColumns = [
                {
                    field: "personName",
                    title: "姓名",
                    width: 100,
                    template: editPersonName
                },
                {
                    title: "性别",
                    width: 50,
                    template: '<div style="text-align: center;" id="personSex">' +
                    "#if(personSex){#" +
                        "#if(personSex == '男'){#" +
                            '<label><input type="radio" name="personSex#:id#" value="男" checked/>男</label> ' +
                            '<label style="margin-left: 4px;"><input type="radio" name="personSex#:id#" value="女" />女</label>' +
                        "#}else if(personSex == '女'){#" +
                            '<label><input type="radio" name="personSex#:id#" value="男" />男</label> ' +
                            '<label style="margin-left: 4px;"><input type="radio" name="personSex#:id#" value="女" checked/>女</label>' +
                        "#}#"+
                    "#}else{#" +
                        '<label><input type="radio" name="personSex#:id#" value="男" />男</label> ' +
                        '<label style="margin-left: 4px;"><input type="radio" name="personSex#:id#" value="女" />女</label>' +
                    "#}#"+
                    '</div>'
                },
                {
                    title: "进场负责人",
                    width: 60,
                    template:'<div style="text-align: center;">' +
                        "#if(personAdmin == '是'){#" +
                            '<input type="checkbox" name="personAdmin" id="personAdmin" checked/>' +
                        "#}else{#" +
                            '<input type="checkbox" name="personAdmin" id="personAdmin"/>' +
                        "#}#"+
                    '</div>'
                },
                //{field: "personSex", title: "性别",width:50,
                //    editor:function (container, options) {
                //        var input = $('<input name="' + options.field + '" placeholder="请选择"/>');
                //        input.appendTo(container);
                //        input.kendoDropDownList({
                //            //dataTextField:title,//在下拉框中现实的字母
                //            //dataValueField:name,//当下拉框中的元素被点击是真正取到的值
                //            dataSource:["男","女"],//包括数据的json对象 比如 var aaaa=[{"name":"aaaa","title":"AAAAA"}];
                //        change:function(data){
                //            console.log("data--->",data);
                //            var item=data.dataItem(this.select());
                //        }
                //    }).data("kendoDropDownList");}
                //},
                {
                    field: "personCardId",
                    title: "身份证号",
                    width: 130,
                    template: editPersonCardId
                },
                {
                    field: "personMobile",
                    title: "联系方式",
                    width: 100,
                    template: editPersonMobile
                },
                {
                    field: "personUnit",
                    title: "人员单位",
                    width: 100,
                    template: editPersonUnit
                },
                {
                    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>"
                }];
  • 使用本地数据，生成grid
 vm.enterPersonGrid = gridService.createGridByLocalData(vm.addPersonGridTableColumns,vm.addPersonData,vm.addPersonGridTableOption).grid;
  • 更新grid
vm.updateTestGrid = function(){
                vm.enterPersonGrid = gridService.createGridByLocalData(vm.addPersonGridTableColumns,vm.addPersonData,vm.addPersonGridTableOption).grid;
            }
  • grid中template中 radio怎么处理、checkbox怎么处理
  // 性别
            vm.enterPersonGrid.table.on("click", "#personSex label", selectSex);
            function selectSex(){
                var row = $(this).closest("tr");
                var sex = $(this).children("input").val();
                var dataItem = vm.enterPersonGrid.dataItem(row);
                var pId = dataItem.id;
                vm.addPersonData[pId].personSex = sex;
            }

            // 是否负责人
            vm.enterPersonGrid.table.on("click", "#personAdmin", ifAdmin);
            function ifAdmin(){
                var row = $(this).closest("tr");
                var ifCheck = $(this).is(':checked');
                var dataItem = vm.enterPersonGrid.dataItem(row);
                var pId = dataItem.id;
                vm.addPersonData[pId].personAdmin = ifCheck?"是":"否";
            }
  • 判断checkbox是否勾选，可以使用ischecked？
$("input[type='checkbox']").is(':checked')
返回结果：选中=true，未选中=false
  • 删除按钮
 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].personName.trim() || !vm.addPersonData[i].personCardId.trim() || !vm.addPersonData[i].personSex.trim() || !vm.addPersonData[i].personMobile.trim() || !vm.addPersonData[i].personUnit.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,personName: "",personSex:"", personAdmin: "否", personMobile: "", personUnit: "", personCardId: ""};
                    vm.addPersonData.push(obj);
                    vm.updateTestGrid();
                }else{
                    toaster.error({title: "提示" , body: "列表中含有项填写不符合规则，请填写正确后添加新纪录。"} );
                }
                console.log(vm.addPersonData);
            });
新增、修改页面的grid，展示radio、checkbox
进场人员表格1.png
详情页面，只展示文字，全部不可编辑
进场人员表格2.png

问题：radio设置，切换的时候，要用同一个name

但是如果有多行数据的话，就不能所有的共用同一个name，我在模板里面写了name="personSex#:id#"，通过添加了id，这样每一行选择的性别互不影响。

<label><input type="radio" name="personSex#:id#" value="男" checked/>男</label>

检验唯一性

 // 校验 进场人员身份证、进场车辆 身份证、车牌号唯一性，不得有重复
            vm.uniquenessCheck = function(objArr,keyName,tableRepeatPrompt){
                for(var i = 0; i < objArr.length; i++){
                    for(var j = 0; j < objArr.length; j++){
                        if(objArr[i][keyName] ==objArr[j][keyName] && i!=j){
                            toaster.error({title: "提示" , body: tableRepeatPrompt+"列不得有重复!"} );
                            if(keyName == 'personCardId'){
                                vm.checkPersonCardIdUnique = false;
                                return;
                            }
                            if(keyName == 'driverCardId'){
                                vm.checkDriverCardIdUnique = false;
                                return;
                            }
                            if(keyName == 'plateNumber'){
                                vm.checkPlateNumberUnique = false;
                                return;
                            }

                        }
                    }

                }
            }

                 vm.checkPersonCardIdUnique = true;
                 vm.checkDriverCardIdUnique = true;
                 vm.checkPlateNumberUnique = true;
 // 校验唯一性 身份证、车牌号
                vm.uniquenessCheck(vm.addPersonData, 'personCardId', "进场人员表格中身份证号");
                vm.uniquenessCheck(vm.driverGridData, 'driverCardId', "进场车辆表格中身份证号");
                vm.uniquenessCheck(vm.driverGridData, 'plateNumber', "进场车辆表格中车牌号");

相关文章

网友评论

      本文标题：kendoui grid 添加checkbox 、 radio单

      本文链接：https://www.haomeiwen.com/subject/jommhftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|kendoui grid 添加checkbox 、 radio单|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！