ligerUI---ligerGrid默認選中checkbox

寫在前面：

　　ligerGrid中是可以帶有checkbox（前面有可以選擇打勾勾的框框）的，對於checkbox默認選中 這次項目中也要做，因為一個系統的增刪改查，在修改一條數據的時候，是需要對原來的數據進行呈現的，這樣用戶在修改的時候 ，才知道修改前的數據是怎樣的（感覺描述的好變態。。自己想想那個修改的場景。。）

 

　　直接上前台代碼啦：

 方法1：

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

                    ],
                    url: '${baseURL}/getFunctionBySysId.action?systemId='+newvalue,
                    //pageSize: 20,
                    usePager: false,
                    width: '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', width: 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()獲取所有的選中行集合就可以了

這種方法真的是很簡單。。。。

 

在項目中不一定完全按照上面的方法，懂了代碼的邏輯，學會舉一反三。。啦啦啦啦~~~~