EasyUi datagrid 单选框选中事件

时间:2024-10-07 13:33:20

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

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

EasyUi datagrid 单选框选中事件

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

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