解决EasyUI的datagrid设置了singleSelect=true(单选),复选框不能取消勾选问题

解决EasyUI的datagrid设置了singleSelect=true(单选),复选框不能取消勾选问题

问题场景:

EasyUi中默认的DataGrid表格的复选框在设置单选后,选中数据后是不能取消勾选。

解决EasyUI的datagrid设置了singleSelect=true(单选),复选框不能取消勾选问题

场景需求:

针对单选,要求选中当前数据后,再次点击能够取消勾选状态。

实现效果:

解决EasyUI的datagrid设置了singleSelect=true(单选),复选框不能取消勾选问题
代码实现:

前置的个别文件引入问题这里就不进行赘述了。如果遇到导入jquery后,开发工具仍不能识别 $ 问题,可以跳转该文章查看:

解决IDEA使用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 复选框去掉选中状态,解决方法

上一篇:datagrid checkbox事件


下一篇:easyui中datagrid组件的formatter属性无效的解决办法