如上图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);
}
});