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.首先记录下统计功能的实现
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
- easyui中checkbox全选全不选的时不处理最后一行的实现
- 一行代码实现 所有的Checkbox全选和反选
- javascript+php 实现全选/全不选 以及对checkbox的处理
- CheckBox全选的实现
- 关于checkbox的全选/全不选的处理
- GridView中如何实现CheckBox的全选?
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- Repeater控件中实现checkbox的全选
- Repeater控件中实现checkbox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- checkbox的全选和不全选
- checkbox中全选和全不选的JS代码实现
- checkbox中全选和全不选及单选的实现
- Oracle(1)安装及账户解锁
- Lambda表达式
- Repo的理解及用法小结(1)
- kafka-topics.sh --describe 说端口被占用了。
- AWS踩坑指南
- easyui中checkbox全选全不选的时不处理最后一行的实现
- 杭电 1087 Super Jumping! Jumping! Jumping!
- Android捕获 ListView 每一个item的点击事件
- 1027. 打印沙漏(20)
- iOS防重复点击的几种方法
- mysql 阿里开源Mysql分布式中间件:Cobar
- Jenkins创建项目
- EditText的方法及使用
- 每天一个 linux 命令(14):head 命令---学习笔记