EasyUI DataGrid实现单选且选择后可取消选择详解编程语言

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

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

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

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"); 
}