easyui中checkbox全选全不选的时不处理最后一行的实现

来源:互联网 发布:白金数据电影网盘 编辑:程序博客网 时间:2024/06/05 00:57
有这样一个需求, easyui加载datagrid后, 最后一行为统计行, 在进行全选全不选的时候会将统计行也一并选择, 这跟业务不相符, 琢磨了半天后终于找到了解决方案
1.首先记录下统计功能的实现
onLoadSuccess:  function(data){
//dataTable是你datagrid表格的id
$('#dataTable').datagrid('appendRow', {
   hyqc_: '<span class="subtotal">合计</span>',//hyqc_为datagrid对应的列名
   sl1_: '<span class="subtotal">' + compute("sl1_") + '</span>',//想统计的列名
   sl2_: '<span class="subtotal">' + compute("sl2_") + '</span>',//想统计的列名
   guapaisl1_: '<span class="subtotal">' + compute("guapaisl1_") + '</span>',//想统计的列名
   guapaisl2_: '<span class="subtotal">' + compute("guapaisl2_") + '</span>'//想统计的列名
});
},
//指定列求和方法
function compute(colName) {
var rows = $('#dataTable').datagrid('getRows');
var total = 0;
for (var i = 0; i < rows.length; i++) {
total += parseFloat(rows[i][colName]);
}
return total;
}


2.蛋疼的事情来了,统计功能是实现了, 但是每次进行全选的时候会把统计的那一行也选择, 这样在执行后面的操作每次都要把最后一行数据过滤掉,
网上也找了很多方法, 但都是只能实现全选, 当你想全不选的时候,那个按钮因为最后一行没有被勾选的原因而无法实现全不选.
现贴出具体的解决办法:
原理:重写easyui的onCheckAll方法,不选择最后一行, 并使用prop将全选按钮设为checked
 onCheckAll:function(rowIndex, rowData){ 
$('#dataTable').datagrid('uncheckRow', rowIndex.length-1); //不选择最后一行
var checkboxHeader = $('div.datagrid-header-check input[type=checkbox]');//取到全选全不选这个元素
checkboxHeader.prop("checked","checked");//将其设置为checked即可
 }, 
 在这里需要注意的是,在设置checked的时候, 用attr是无效的, 必须使用prop设置才能生效


3.删除最后一行统计行的勾选框
var checkbox = $('div.datagrid-cell-check input[type=checkbox]');//先找到这个checkbox对象
$(checkbox[checkbox.length-1]).remove(); //将最后一个元素remove掉.


4.//可以设置datagrip单行选择时候的颜色
$("tr").click(function(){ $("tr").css("background-color",""); $(this).css("background-color","#E6E6E6"); });


网上很多解决方法都不完整, 这是我用了半天时间写出来了, 贴到这里希望能帮助到有需要的人.
1 0