easyui 分页 保存checkbox的 选中状态，操作选中记录。

2014-2-4阅读470 评论0

1、首先设置datagrid属性的idField主键，这里假如为id。

2、建立一个全局的javascript数组var checkedItems = []，用来存放选中checkbox的值。

3、核心方法，addcheckItem()、removeAllItem(rows)、removeSingleItem(rowIndex, rowData)当选中或者取消checkbox时触发

　   用来将checkbox的主键值保存在checkedItems数组，或者从数组中删除对应的id值，findCheckedItem(ID)这个函数用来查找数组中

　　是否存在checkbox的值，存在则返回id值，不存在则返回-1.

4、什么时候调用这些方法呢？分别在datagrid的 onCheckAll: addcheckItem,onCheck: addcheckItem,onUncheckAll: removeAllItem,onUncheck: removeSingleItem 这四个事件中

　　调用对应的方法。

5、翻页后如何给checkbox赋值呢？关键就在这里，datagrid重写了$.fn.datagrid.defaults.view的onAfterRender事件，

　　因此在datagrid的view事件里绑定这个函数就OK了。onAfterRender事件是当easyui的元素渲染完毕后执行的事件，在这里会调用手写的ischeckItem函数来实现对checkbox的赋值！

$("#maingrid").datagrid({ 
    idField: 'id', 
    view: fileview 
 });

var fileview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { ischeckItem(); } });

var checkedItems = [];
 function ischeckItem() {
        for (var i = 0; i < checkedItems.length; i++) {
            $('#maingrid').datagrid('selectRecord', checkedItems[i]); //根据id选中行 
        }
    }

 function findCheckedItem(ID) {
        for (var i = 0; i < checkedItems.length; i++) {
            if (checkedItems[i] == ID) return i;
        }
        return -1;
    }

 function addcheckItem() {
        var row = $('#maingrid').datagrid('getChecked');
        for (var i = 0; i < row.length; i++) {
            if (findCheckedItem(row[i].id) == -1) {
                checkedItems.push(row[i].id);
            }
        }
    }
    function removeAllItem(rows) {

        for (var i = 0; i < rows.length; i++) {
            var k = findCheckedItem(rows[i].id);
            if (k != -1) {
                checkedItems.splice(i, 1);
            }
        }
    }
    function removeSingleItem(rowIndex, rowData) {
        var k = findCheckedItem(rowData.id);
        if (k != -1) {
            checkedItems.splice(k, 1);
        }
    }



一下工作操作时，调用上面的方法。



    opts.onSelect = function(rowIndex, rowData){
       <span style="color:#FF0000;"><strong> addcheckItem();</strong></span>
        var blId = rowData.ssemExpBlId;
        var key = getKey(rowIndex);
        blnos[key] = blId;
        printLog("onselect " + rowData.ssemBlNo);
    };
    
    opts.onUnselect = function(rowIndex, rowData){
        removeSingleItem(rowIndex, rowData);
        var blId = rowData.ssemExpBlId;
        var key = getKey(rowIndex);
        blnos[key] = false;
        printLog("onunselect " + rowData.ssemBlNo);
    };
    
    
    //选中全部
    opts.onSelectAll = function(rows){
        addcheckItem();
        $.each(rows,function(i,e){
            var key = getKey(i);
            if(!blnos[key]) blnos[key] = e.ssemExpBlId;
        });
        //loadcnt();
    };
    
    //取消全部
    opts.onUnselectAll = function(rows){
        removeAllItem(rows);
        $.each(rows,function(i,e){
            var key = getKey(i);
            if(blnos[key]) blnos[key] = false;
        });
        //loadcnt();
    };