layui表格监听全选_给Layui表格全选按钮添加点击事件并获取数据进行回填计算...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Layui表格的全选按钮只是改了下其他表格li的样式而已，所以你想通过获取选中行进行回填数据并计算时，你就会发现表头这个全选按钮是获取不到选中行的，所以它就不会再进行计算，所以我就帮它重新写了一个点击事件，让它全选时获取当前页面的全部数据，不全选时获取到选择行的数据进行判断。

tabTitles = layuiTable.render({

elem: '#tabTitles',

url: '/DayWorkManagement/FormerSell/selectTitlesInfor',

where: {CommID: "", Discount: 0, VipID: 0 },

cols: [[

{ type:,title: '表头', rowspan: 2,unresize: true, width: 50},

]],

//数据渲染完的回调

done: function (res) {

var SPhaschecked；

SPcache =res.data;//获取到商品表页面的所有数据

//我在这个按钮外层的div加了点击事件在表格的回调里，这样可以让它点击后获取的表格页面上的全部数据。

$("[lay-id='tabTitles']").find("[data-field='1']")

.find("div").eq(0).click(function (data){

//它加个条件判断这个全选按钮是否勾上，勾上就获取全部的数据，不勾就获取到表格勾上的选中行，看到这里你肯定很想吐槽了，之前不是说过这个全选按钮获取不到选中行吗，是这样的，它的确获取不了，但是全选按钮没勾上表格行有勾上是有一个前提的，你起码要把某一行勾上或者去掉才会出现这个情况吧，当你去勾或勾上时不就可以获取到选中行了吗，所以懂我意思了吧(๑•̀ㅂ•́)و✧

SPhaschecked = $("[lay-id='tabTitles']").find("[data-field='1']")

.eq(0).find("div").eq(1).hasClass("layui-form-checked");//选中的条件

var checkStatus =layuiTable.checkStatus("tabTitles");//获取选中行

var IsAll =checkStatus.isAll;//全选

var shoujia = 0; //进入循环前让它的数据都为0

var yuanjia = 0;

var shuliang = 0;

//这个点击事件是i标签外层的div(其实是给不了i的点击事件)，所以点击i标签的外层就会有个bug，bug的原因是点击这个全选按钮有三种情况：第一种是全选按钮勾上时，第二种时全选按钮没勾上但表格有勾选的数据时，第三种时全选按钮没勾上且表格没有勾选的数据时,所以我加了下面三个判断给它：

//全选按钮勾上

if(SPhaschecked == true) {

//console.log(SPhaschecked);

for (var i = 0;i < SPcache.length; i++) {

shuliang += parseInt(SPcache[i].buynumber);

yuanjia += SPcache[i].MarMenyer * SPcache[i].buynumber;

shoujia += SPcache[i].MarketMeny * SPcache[i].buynumber;

$("#shoujia").val("售价：" +shoujia);

$("#yuanjiashuliang").val("数量：" +shuliang + " / " + "原价：" +yuanjia);

}

}

//全选按钮没勾上且表格没有选中行

if(SPhaschecked == false && IsAll == true) {

$("#shoujia").val("售价：" +shoujia);

$("#yuanjiashuliang").val("数量：" +shuliang + " / " + "原价：" +yuanjia);

}

//全选按钮没勾上但表格有选中行

if(SPhaschecked == false && IsAll == false) {

for (var i = 0;i < checkStatus.data.length; i++) {

shuliang += parseInt(checkStatus.data[i].buynumber);

yuanjia += checkStatus.data[i].MarMenyer *checkStatus.data[i].buynumber;

shoujia += checkStatus.data[i].MarketMeny *checkStatus.data[i].buynumber;

$("#shoujia").val("售价：" +shoujia);

$("#yuanjiashuliang").val("数量：" +shuliang + " / " + "原价：" +yuanjia);

}

}

})

},

});