正文
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;
}
});
到此，目标基本达成，效果如下图所示。
聪明的你，是否发现，这里其实还有一个问题的，就是当对某一行单击三次及三次以上，选中和非选中的切换是有问题的。
不过，我并不打算在这里解决了，有兴趣可以自己试试，必竟自己解决问题的那种喜悦和成就感是其他事情无法替代的。
