原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://itmyhome.blog.csdn.net/article/details/88120656

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

在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

展开阅读全文

没有更多推荐了,返回首页