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

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

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

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

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

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