解决EasyUI的datagrid设置了singleSelect=true(单选)，复选框不能取消勾选问题
问题场景：
EasyUi中默认的DataGrid表格的复选框在设置单选后，选中数据后是不能取消勾选。
场景需求：
针对单选，要求选中当前数据后，再次点击能够取消勾选状态。
实现效果：
代码实现：
前置的个别文件引入问题这里就不进行赘述了。如果遇到导入jquery后，开发工具仍不能识别 $ 问题，可以跳转该文章查看：
示例代码：
<!DOCTY html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="../lib/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../lib/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/easyui.css">
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, JavaScript code needed.</p>
<div data-options="region:'center'">
<table id="approachCorrelationTest"></table>
</div>
</body>
<script>
$("#approachCorrelationTest").datagrid({
url:'../grid_data.json',
method:'get',
striped:true,
fitColumns:false,
singleSelect:true, //关闭单选
checkOnSelect:true, //设置为 true，当用户点击某一行时，则会选中/取消选中复选框
selectOnCheck:true, //设置为 true，点击复选框将会选中该行
columns:[[
{ field: 'checkbox',
checkbox: true ,
align:'center'
},
{
field : 'itemid',
title : '商品编号',
width : 100,
align : 'center'
},
{
field : 'productid',
title : '产品',
width : 100,
align : 'center'
},
{
field : 'listprice',
title : '价格',
width : 100,
align : 'center'
},
{
field : 'unitcost',
title : '成本',
width : 100,
align : 'center'
},
{
field : 'attr1',
title : '属性',
width : 100,
align : 'center'
},
{
field : 'status',
title : '状态',
width : 100,
align : 'center'
},
]],
onBeforeSelect:function(index, row){
var _this = $('#approachCorrelationTest');
var data = _this.datagrid('getSelected'); //选择的数据
var rowindex = _this.datagrid('getRowIndex',data); //选择的数据的序列值
if(data && index == rowindex){ //再次点击取消勾选
setTimeout(function(){
$('#approachCorrelationTest').datagrid('unselectRow',index);
},0)
}
},
onl oadSuccess: function(data){
if (data){
var _this = $('#approachCorrelationTest');
$(".datagrid-header-check").html("选择"); //去掉 全选checkbox
_this.datagrid('clearSelections'); //清除所有的选择。
_this.datagrid("unselectAll"); //取消选中当前页所有的行
_this.datagrid("clearChecked"); //清除所有勾选的行
}
},
});
</script>
</html>
grid_data.json
{
"total": 28,
"rows": [
{
"productid": "FI-SW-01",
"productname": "Koi",
"unitcost": "10.00",
"status": "P",
"listprice": "36.50",
"attr1": "Large",
"itemid": "EST-1"
},
{
"productid": "K9-DL-01",
"productname": "Dalmation",
"unitcost": "12.00",
"status": "P",
"listprice": "18.50",
"attr1": "Spotted Adult Female",
"itemid": "EST-10"
},
{
"productid": "RP-SN-01",
"productname": "Rattlesnake",
"unitcost": "12.00",
"status": "P",
"listprice": "38.50",
"attr1": "Venomless",
"itemid": "EST-11"
},
{
"productid": "RP-SN-01",
"productname": "Rattlesnake",
"unitcost": "12.00",
"status": "P",
"listprice": "26.50",
"attr1": "Rattleless",
"itemid": "EST-12"
},
{
"productid": "RP-LI-02",
"productname": "Iguana",
"unitcost": "12.00",
"status": "P",
"listprice": "35.50",
"attr1": "Green Adult",
"itemid": "EST-13"
},
{
"productid": "FL-DSH-01",
"productname": "Manx",
"unitcost": "12.00",
"status": "P",
"listprice": "158.50",
"attr1": "Tailless",
"itemid": "EST-14"
},
{
"productid": "FL-DSH-01",
"productname": "Manx",
"unitcost": "12.00",
"status": "P",
"listprice": "83.50",
"attr1": "With tail",
"itemid": "EST-15"
},
{
"productid": "FL-DLH-02",
"productname": "Persian",
"unitcost": "12.00",
"status": "P",
"listprice": "23.50",
"attr1": "Adult Female",
"itemid": "EST-16"
},
{
"productid": "FL-DLH-02",
"productname": "Persian",
"unitcost": "12.00",
"status": "P",
"listprice": "89.50",
"attr1": "Adult Male",
"itemid": "EST-17"
},
{
"productid": "AV-CB-01",
"productname": "Amazon Parrot",
"unitcost": "92.00",
"status": "P",
"listprice": "63.50",
"attr1": "Adult Male",
"itemid": "EST-18"
}
]
}
解决方式二：
利用一个全局变量和行索引来控制复选框的勾选状态
var indexFlag = -1; //用于单选时判断是否取消勾选
$('#dg).datagrid({
url:url,
singleSelect:true, //true单选
idField:'id',
queryParams : {},
columns:’’
onCheck:function(index,row){
if(indexFlag==index){
$('#dg').datagrid('uncheckRow',index); //去除勾选
indexFlag=-1;
}else{
indexFlag=index;
}
},
});
或者：
var flag = true； //定义一个开关变量控制
$("#table").datagrid({
pagination: true,//允许分页
rownumbers: true,//行号
singleSelect: false,//只选择一行
pageSize: 20,//每一页数据数量
width:"100%",
checkOnSelect: false, //此属性必须设置为 false10
pageList: [10,20,30,50],
....
onClickRow: function (rowIndex, rowData) {
console.log("进入行点击事件");
$("#table").datagrid("clearChecked");
$("#table").datagrid(‘selectRow‘,rowIndex);
flag = false;
$("#table").datagrid("checkRow",rowIndex);
flag = true;
},
如果还是不能解决问题，可以参考以下文章：
1、easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决
2、easyUI datagrid 复选框去掉选中状态，解决方法