EasyUi datagrid 单选框选中事件

 

Easyui datagrid中的单选框默认是这样定义的

columns: [[
{ field: 'CK', title: '', checkbox: true, width: 30 }]]。

平常使用没什么问题，但今天下等我要获取单框选中事件时，出了点问题。

因为这个checkbox是独立于行的，所以单击这个checkbox时，不会触发Easyui datagrid的onClickRow事件。

用户在单选框上打了勾，最后却被告知没有行选中，这不是Bug吗？

这是我们码农绝对不能忍受的，于是乎，对EasyUi datagrid的改造开始了。

首先，我重新定义checkbox，代码如下：

columns: [[
{ field: 'checked', title: 'Choice', width: 30,
formatter: function(value, row, index) {
return '<input type="checkbox" name="DataGridCheckbox">';
}}]]

这下子，checkbox与行成为一体了，单击checkbox时，行会选中，但新问题来了，单选行时，checkbox并不会选中。

于是，继续改造。

在onClickRow事件中我定义，行选中，对应的CheckBox也要被选中。

代码如下：

onClickRow: function(index, data) {
var row = $('#UserList').datagrid('getSelected');
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
}

这样，行被选中了，但单击其它行中，原来的行的CheckBox继续保持被选中，并没有被取消，这与期望不符呀。

于是，我继续改造，这次改造的目标，就是单击哪行，哪行及它的CheckBox被选中，其他的不被选中。

代码如下：

onClickRow: function(index, data) {
                //将所有checkbox修改为未选中
                $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox'] ").attr("checked", false);
                //将这次的checkbox标记为选中
                $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
}

到这个时候，还有其它问题，比如说：第一次单击的时候是选中，第二次，我希望能取消选中。

于是代码继续改造。改造完成之后的代码如下：

var selectIndex = "";
function UserListLoad() {
    var customerNo = $('#txtCustomerNo').val();
    var customerName = $('#txtCustomerName').val();
    var country = $('#txtCountry').val();

    $('#UserList').datagrid({
        url: '/ForLog/OrderReport/GetSapUserList',
        queryParams: { customerNo: customerNo, customerName: customerName, country: country },
        pagination: true,
        pageSize: 15,
        singleSelect: true,
        showPageList: false,
        pageList: [5, 15, 15],
        rownumbers: true,
        nowrap: false,
        loadMsg: 'Load……',
        columns: [[
                    { field: 'checked', title: 'Choice', width: 30,
                        formatter: function(value, row, index) {
                            return '<input type="checkbox" name="DataGridCheckbox">';
                        }
                    },
                    { field: 'NO', title: 'Customer Order No.', width: 150 },
                    { field: 'NAME', title: 'Customer', width: 200 },
                    { field: 'COUNTRY', title: 'Country', width: 200 }
                ]],
        onClickRow: function(index, data) {
            var row = $('#UserList').datagrid('getSelected');
            if (index == selectIndex) {
                //第一次单击选中,第二次单击取消选中
                $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", false);          
                $('#UserList').datagrid('clearSelections');
            }

            var isCheck = $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked");

            if (isCheck) {
                //将所有checkbox修改为未选中
                $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox'] ").attr("checked", false);
                //将这次的checkbox标记为选中
                $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
            }
            else {
                if (index == selectIndex) {
                    $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", false);
                }
                else {
                    //将所有checkbox修改为未选中
                    $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox'] ").attr("checked", false);
                    //将这次的checkbox标记为选中
                    $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
                }
            }
            selectIndex = index; 
        }
    });

 

到此，目标基本达成，效果如下图所示。

聪明的你，是否发现，这里其实还有一个问题的，就是当对某一行单击三次及三次以上，选中和非选中的切换是有问题的。

不过，我并不打算在这里解决了，有兴趣可以自己试试，必竟自己解决问题的那种喜悦和成就感是其他事情无法替代的。