昨天在使用easyui的过程中出现一个问题,就是当我需要使用复选框批量处理数据时,要求只有复选框选中的数据才可以处理,结果发现当单击数据时,数据也会被选中,后来百度发现有人说SelectOnCheck属性与CheckOnSelect属性,使用后发现不行,这两个属性只是决定单击与复选框的关系,并不能实现单击数据不选中的功能。后在另一篇文章发现一种方法:
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
}
经使用后,达到了单击不选中的效果,但有一个问题,当我复选框选中时,数据被选中,这时如果单击数据就会取消选中,后来想法是,是不是$(this).datagrid('unselectRow', rowIndex);的原因导致,于是加了个判断:
var checkedRows = $("#dg").datagrid("getChecked");
var isNotCheckedFlag = true;
if(row){
for(var i=0;i<checkedRows.length;i++){
if(row.uid == checkedRows[i].uid ){
isNotCheckedFlag = false;
break;
}
}
}
if(isNotCheckedFlag){
$(this).datagrid('unselectRow', index);
}
如上述代码,首先获取复选框选中的数据数组,然后比较当前单击的数据某一绝对存在的属性,若数组中含有该数据则不执行上述语句,结果发现还是不行,经测试发现,easyui有一个判断机制,当当前单击的数据已被选中时就会取消选中该数据,最后没办法,只好重新选中该数据,代码如下:
<table id="dg" style="width: 100%;"
data-options="rownumbers:true,
onClickRow:clickRow">
</table>
//取消单击选选中的功能
function clickRow(index, row) {
var checkedRows = $("#dg").datagrid("getChecked");
var isNotCheckedFlag = true;
if(row){
for(var i=0;i<checkedRows.length;i++){
if(row.uid == checkedRows[i].uid ){
isNotCheckedFlag = false;
break;
}
}
}
if(isNotCheckedFlag){
$(this).datagrid('unselectRow', index);
} else {
$(this).datagrid('selectRow', index);
}
}
上述方法可以实现单击不选中,只有复选框选中才选中数据的效果,顺带一提,本人所写的代码全部是在不修改easyui原生js文件的基础上实现的,为了不污染easyui原生代码,所以效率上可能没有直接修改原始文件的效率好,但已修改。