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; 
        }
    });

 

到此，目標基本達成，效果如下圖所示。

聰明的你，是否發現，這里其實還有一個問題的，就是當對某一行單擊三次及三次以上，選中和非選中的切換是有問題的。

不過，我並不打算在這里解決了，有興趣可以自己試試，必竟自己解決問題的那種喜悅和成就感是其他事情無法替代的。