标签：singleSelect itemid 不能取消 datagrid 单选 attr1 true unitcost productid
解决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 复选框去掉选中状态，解决方法
标签：singleSelect,itemid,不能取消,datagrid,单选,attr1,true,unitcost,productid 来源： https://blog.csdn.net/Code__rookie/article/details/114309906
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。