ligerUI---ligerGrid默认选中checkbox

写在前面:

  ligerGrid中是可以带有checkbox(前面有可以选择打勾勾的框框)的,对于checkbox默认选中 这次项目中也要做,因为一个系统的增删改查,在修改一条数据的时候,是需要对原来的数据进行呈现的,这样用户在修改的时候 ,才知道修改前的数据是怎样的(感觉描述的好变态。。自己想想那个修改的场景。。)

  直接上前台代码啦

 方法1:

   functionGrid = $("#functionGrid").ligerGrid({
                    checkbox: true,
                    columns: [
                        {display: '功能编号', name: 'functionId', } ,
                        {display: '功能名', name: 'functionName',  120 } ,
                        { display: '功能描述', name: 'functionDes', minWidth: 60 },

                    ],
                    url: '${baseURL}/getFunctionBySysId.action?systemId='+newvalue,
                    //pageSize: 20,
                    usePager: false,
                     '100%',
                    height: '99%',
                    //初始化选择行
                    isChecked: f_isChecked,
                    //选择事件(复选框)
                    onCheckRow: f_onCheckRow,
                    //选择事件(复选框 全选/全不选)
                    onCheckAllRow: f_onCheckAllRow
                });

  涉及到的一些js函数:这些有的也还不是很懂 这些是在官网的demo中看的

//获取functionGrid选中行的数据函数====开始
        function f_onCheckAllRow(checked)
        {
            for (var rowid in this.records)
            {
                if(checked)
                    addCheckedFunction(this.records[rowid]['functionId']);
                else
                    removeCheckedFunction(this.records[rowid]['functionId']);
            }
        }

        /*
        该例子实现 表单分页多选
        即利用onCheckRow将选中的行记忆下来,并利用isChecked将记忆下来的行初始化选中
        */

     var checkedFunction = []; function findCheckedFunction(functionId) { for(var i =0;i<checkedFunction.length;i++) { if(checkedFunction[i] == functionId) return i; } return -1; } function addCheckedFunction(functionId) { if(findCheckedFunction(functionId) == -1) checkedFunction.push(functionId); } function removeCheckedFunction(functionId) { var i = findCheckedFunction(functionId); if(i==-1) return; checkedFunction.splice(i,1); } function f_isChecked(rowdata) { if (findCheckedFunction(rowdata.functionId) == -1) return false; return true; //遍历所有的grid 让其可以被默认选中 /*var str = functionIdArr.join(","); //alert(str.indexOf(rowdata.functionId)) if (str.indexOf(rowdata.functionId)!=-1) return true; return false;*/ } function f_onCheckRow(checked, data) { if (checked) addCheckedFunction(data.functionId); else removeCheckedFunction(data.functionId); } /*function f_getChecked() { alert(checkedFunction.join(',')); }*/ //获取functionGrid选中行的数据函数========结束

  

  上面的代码已经完成了初始化不选中,但是可以获取你所勾选的数据  并把数据装在checkedFunction这个数组里面,到时候要拿到这些数据只需要对

checkedFunction这个数组进行操作就可以啦(当然啦,这里我是将functionId这个字段作为主键来存放的,可以根据自己的项目进行处理)。

 然后重点来了。。。。如果想要默认选中 。只需要对checkedFunction这个数组进行初始化就可以啦。啊哈哈哈。也就是把你想要初始化选中的数据的主键

放在这个数组里面。。比如我现在要选中functionId为1,2,4的 那么我只需要checkedFunction=[1,2,4]
大功告成。。。。。


方法2:

方法1是看官方demo中的例子来,当时也不是很明白上面各种函数的作用,也没有下去深究,下面可以用方法2,比方法1简单,所用的函数也不多,不过两者的原理都

是差不多的,都是将要默认选中的数据保存在一个集合或者数组里面,然后通过
isChecked: f_isChecked,参数来调用一个函数,这个f_isChecked函数的作用就是

将数组或集合里面的数据拿出来与ligerGrid中的每一行数据进行比较,如果相等,就返回true表示勾选

前台页面代码:
funcGrid = $("#funcGrid").ligerGrid({
                columns : [
                        {display: '功能编号', name: 'functionId',hide:'true'} ,
                        {id:'functionName',display: '功能名', name: 'functionName',  200 } ,
                        { display: '功能描述', name: 'functionDes', minWidth: 60 },
                        {display : '功能fId', name : 'fId', type : "text", hide:'true'}
                           ],
                //sortName : 'functionId',
                onSelectRow : function(rowdata, rowindex, rowobj) {
                },
                width : '100%',
                height : '100%',
                checkbox : true,
                usePager : false,
                frozenRownumbers : false,
                frozenCheckbox : false,
                //rowHeight : 23,
                alternatingRow : false, 
                isChecked: f_isChecked,
                tree : {
                    columnId : 'functionName',
                    idField : 'functionId',  //id字段
                    parentIDField : 'fId', //parent  id 字段
                    isExpand : false
                }
        });

重点就在代码中标红的,然后调用的函数如下:这里的funcData是一个数组


var funcData = [];//这里存放你从后台拿到的要默认勾选的数据,现在这里是空的,需要你自己去获取数据

function
f_isChecked(rowdata) { if(funcData.length > 0){ for(var i =0;i<funcData.length;i++) { if(funcData[i].functionId == rowdata.functionId) return true; } } return false; }

这样就完成了修改数据  默认勾选了,当点击添加按钮,想要添加数据的时候,如何拿到ligerGrid中checkbox的值??只需要funcGrid.getSelecteds()获取所有的选中行集合就可以了

这种方法真的是很简单。。。。

在项目中不一定完全按照上面的方法,懂了代码的逻辑,学会举一反三。。啦啦啦啦~~~~







原文地址:https://www.cnblogs.com/eleven258/p/7728476.html