EasyUI常用技能整理

1.combobox是否允许编辑:

$('#Id').combobox('enable');   //可用
$('#Id').combobox('disable');   //不可用

2.EasyUI datagrid实现翻页客户端保存checkbox状态

1、首先设置datagrid属性的idField主键,这里假如为id,若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);
        }
    }
复制代码

 

下面是批量删除的代码

复制代码
 function destroyItems(items) {
        var row = null;
        if (items == "list") {
            items = checkedItems.join(',');
            row = $('#maingrid').datagrid('getSelections');
        }
        else {
            row = items;
        }
        if (row != null) {
            $.messager.confirm('Confirm', '您确定要删除此记录?', function (r) {
                if (r) {
                    $.post(location.href, { id: items, action: "deletelist" }, function (result) {

                        if (result == "1") {
                            $('#maingrid').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: 'Error',
                                msg: result
                            });
                        }
                    });
                }
            });
        }
        else { $.messager.alert('-警告-', '请选择至少一条记录才能进行删除', 'info'); }

    }


你可能感兴趣的:(EasyUI常用技能整理)