EasyUI DataGrid实现单选且选择后可取消选择

绝地灬酷狼 2022-03-14 12:20 914阅读 0赞

要实现的效果为只允许单选，**且选择后再选择该行则是取消选择**

在DataGrid中控制复选框的三个属性为：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>singleSelect</td> 
   <td>设置为true将只允许选择一行。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>checkOnSelect</td> 
   <td>如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>selectOnCheck</td> 
   <td>如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

以上三个参数无论如何组合都实现不了该效果，可使用如下方法：

**1、对DataGrid进行扩展**

/** * easyui的扩展 * 只允许选择一行，且选择后可取消选择 */
    $.extend($.fn.datagrid.methods, { 
        selectStyle : function(jq, fields) { 
    		var grid = fields;
    		$("input[name=ck]").click(function () { 
    	        var ischecked = $(this).is(":checked");
    	        $("input:checkbox[name=ck]:checked").attr("checked", false);
    	        $('#'+grid+'').datagrid('clearSelections');
    	        $('#'+grid+'').datagrid("unselectAll");
    	        if (ischecked) { 
    	            $(this).attr("checked", true);
    	        } else { 
    	            $(this).attr("checked", false);
    	        }
    	    });
        }
    });
    
    $.extend($.fn.datagrid.methods, { 
        onClickStyle : function(jq, fields) { 
    		var grid = fields[0];
    		var rowIndex = fields[1];
    		$('#'+grid+'').datagrid("unselectAll");//取消选中当前所有行
    		$('#'+grid+'').datagrid("selectRow", rowIndex);//选中当前点击的行
        }
    });

**2、参数设置**

singleSelect:false,
    checkOnSelect:true,
    selectOnCheck:true,

**3、DataGrid加载完成后调用函数**

onClickRow: function (rowIndex, rowData) { 
    	$(this).datagrid("onClickStyle", ["grid",rowIndex]);
    },
    onLoadSuccess: function (data) { 
    	$(this).datagrid("selectStyle", "grid");
    }

作者：[itmyhome][]

[itmyhome]: https://blog.csdn.net/itmyhome1990