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