easyUI常用控件使用笔记一

 

 

 

如上图Datagrid 列表中行前的checkbox一但勾选中便无法取消勾选（选中）状态

 

实现方法：

利用多选的checkbox实现单选的功能，并隐藏全选checkbox勾选框来达成目的

 

原因嘛单选的chekcbox单击事件不好处理，能不能通过通过单选checkbox来实现，本人没有尝试过，也不太确定！

 

实现步骤：

1、给Datagrid添加如下属性：  

singleSelect: false,

selectOnCheck: true,

checkOnSelect: true,

2、添加事件onLoadSuccess，onSelect，onClickRow，其中onSelect与onClickRow事件内容相同

         onLoadSuccess: function () {

                $(".datagrid-header-check").html("");//隐藏全选checkbox勾选框

 

                $.each(data.rows, function (index, item) {

                    if ($('#hidContractCode').val().indexOf(item.STRCONTRACTCODE) >= 0) {

                        $('#GvMateList').datagrid('selectRow', index);

                    }

                });

            } 

onSelect: function (data) { 

                var DangerRow = $("#GvMateList").datagrid("getSelections");

                if (DangerRow.length > 1) {

                    $('#GvMateList').datagrid('clearChecked');

                }

                else {

                    return;

                }

                $('#GvMateList').datagrid('selectRow', data);               

            }

完成代码

$('#GvMateList').datagrid({
            url: 'test',
            queryParams: { "txtMateCode": $("#txtMateCode").val().trim(), "txtMateName": $("#txtMateName").val().trim() },
            method: 'post',
            fit: true,
            border: false,
            fitColumns: true,
            rownumbers: true,
            singleSelect: false,
            selectOnCheck: true,
            checkOnSelect: true,
            pagination: true,
            pageSize: 13, //页容量，必须和pageList对应起来，否则会报错
            pageNumber: 1, //默认显示第几页
            pageList: [13, 20, 30, 40],//分页中下拉选项的数值
            columns: [[
                { field: '1', width: 50, checkbox: true },
                { field: 'STRCONTRACTCODE', title: '合同编号', width: 100, formatter: function (value) { return alertTitle(value); } },
                { field: 'STRCONTRACTNAME', title: '合同名称', width: 130, formatter: function (value) { return alertTitle(value); } },
                { field: 'STRSAFEAGREECODE', title: '安全协议', width: 130, formatter: function (value) { return alertTitle(value); } },
                { field: 'STRUSERNAME', title: '创建人', width: 130, formatter: function (value) { return alertTitle(value); } },
                { field: 'STRCREATETIME', title: '创建时间', width: 100, formatter: function (value) { return timeHM(value); } }
            ]],
            
            onLoadSuccess: function (data) {
                $(".datagrid-header-check").html("");
                $.each(data.rows, function (index, item) {
                    if ($('#hidContractCode').val().indexOf(item.STRCONTRACTCODE) >= 0) {
                        $('#GvMateList').datagrid('selectRow', index);
                    }
                });
            },
            onSelect: function (data) {

                var DangerRow = $("#GvMateList").datagrid("getSelections");
                if (DangerRow.length > 1) {
                    $('#GvMateList').datagrid('clearChecked');
                }
                else {
                    return;
                }
                $('#GvMateList').datagrid('selectRow', data);
                
            },
            onClickRow: function (data) {
                var DangerRow = $("#GvMateList").datagrid("getSelections");
                if (DangerRow.length > 1) {
                    $('#GvMateList').datagrid('clearChecked');
                }
                else {
                    return;
                }
                $('#GvMateList').datagrid('selectRow', data);
            }
            
        });