layui数据表格实现内容筛选的全选和反选功能
最近完成了一个需求，记录一下，就是实现layui table的内容筛选的全选和反选功能，layui自带的头部工具里面的筛选功能因为没有全选反选这个功能，所以自己写了一个表格筛选的函数，功能如图
筛选框布局代码
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item" pane="">
<label class="layui-form-label">显示字段label>
<div class="layui-input-block" id="FlowcheckBoxAll">
<button type="button"
class="layui-btn layui-btn-primary layui-btn-xs quanxuan">全选button>
<button type="button"
class="layui-btn layui-btn-primary layui-btn-xs fanquan">反选button>
<input lay-filter="selectShow" isNum="1" isClick="true" type="checkbox"
name="pay_amout" lay-skin="primary" title="销售额" checked="">
<input lay-filter="selectShow" isNum="2" isClick="true" type="checkbox"
name="refound_amount" lay-skin="primary" title="退款金额" checked="">
<input lay-filter="selectShow" isNum="3" isClick="true" type="checkbox"
name="rel_amout" lay-skin="primary" title="实际成交额" checked="">
<input lay-filter="selectShow" isNum="4" isClick="true" type="checkbox"
name="zcharge" lay-skin="primary" title="总花费" checked="">
<input lay-filter="selectShow" isNum="5" isClick="true" type="checkbox" name="tkqfl"
lay-skin="primary" title="退款前费率" checked="">
<input lay-filter="selectShow" isNum="6" isClick="true" type="checkbox" name="tkhfl"
lay-skin="primary" title="退款后费率" checked="">
<input lay-filter="selectShow" isNum="7" isClick="true" type="checkbox" name="gxz"
lay-skin="primary" title="店铺占比" checked="">
<input lay-filter="selectShow" isNum="8" isClick="true" type="checkbox" name="click"
lay-skin="primary" title="类目占比" checked="">
<input lay-filter="selectShow" isNum="9" isClick="true" type="checkbox"
name="ztccost" lay-skin="primary" title="点击" checked="">
<input lay-filter="selectShow" isNum="10" isClick="true" type="checkbox"
name="clickdj" lay-skin="primary" title="直通车花费" checked="">
<input lay-filter="selectShow" isNum="11" isClick="true" type="checkbox"
name="transactions_num" lay-skin="primary" title="点击单价" checked="">
<input lay-filter="selectShow" isNum="12" isClick="true" type="checkbox"
name="add_purchase" lay-skin="primary" title="加购" checked="">
<input lay-filter="selectShow" isNum="13" isClick="true" type="checkbox"
name="cjeamout" lay-skin="primary" title="成交额" checked="">
<input lay-filter="selectShow" isNum="14" isClick="true" type="checkbox" name="ROI"
lay-skin="primary" title="ROI" checked="">
<input lay-filter="selectShow" isNum="15" isClick="true" type="checkbox"
name="vproc_add_num" lay-skin="primary" title="加购率" checked="">
<input lay-filter="selectShow" isNum="16" isClick="true" type="checkbox"
name="cjtjcharge" lay-skin="primary" title="钻展费用" checked="">
<input lay-filter="selectShow" isNum="17" isClick="true" type="checkbox"
name="ztc_click" lay-skin="primary" title="超级推荐" checked="">
<input lay-filter="selectShow" isNum="18" isClick="true" type="checkbox"
name="cjtj_click" lay-skin="primary" title="AI智能投放" checked="">
<input lay-filter="selectShow" isNum="19" isClick="true" type="checkbox"
name="paying_visitors" lay-skin="primary" title="淘宝客" checked="">
div>
div>
<div class="tableBox">
<table id="demo" class="tableAll" lay-filter="demo">table>
div>
form>
样式代码
.layui-form-item .layui-form-checkbox[lay-skin=primary] {
margin-top: 3px;
}
.layui-form-pane .layui-form-checkbox {
margin: 1px;
}
.layui-form-pane .layui-form-item[pane] .layui-form-label {
display: flex;
justify-content: center;
align-items: center;
}
js代码
这些需要注意layui-table的min-width为什么是2341px呢？因为是这是内容的table原始宽度，colgroup标签的子标签col的属性为5.26%，也是该属性的原始值，都需要打开调试器自己查看。
因为我表头有两行，所以表头隐藏显示需要处理两行，所以声明了colgroup1 和colgroup2变量
全选和反选事件中最后需要循环length写20是因为我表格内容显示一共20列
筛选函数中getW 需要+90.23和-90.23，因为表格需要隐藏显示列的宽度都是90.23px
//全选
$(".quanxuan").on("click", function () {
var list = $("#FlowcheckBoxAll").children("input");
$.each(list, function (index, item) {
$(item).prop("checked", true);
// $(item).attr("checked",true);
$(item).attr("isclick", "true");
});
$(".layui-table").eq(0).css({ "min-width": "2341px", "width": "100%" });
$(".layui-table").eq(1).css({ "min-width": "2341px", "width": "100%" });
$("colgroup").eq(0).children().eq(0).siblings().remove();
$("colgroup").eq(1).children().eq(0).siblings().remove();
$("colgroup").eq(0).append(`表格重载时候会显示所有列数据，所以需要再表格渲染完成的done回调调用以下函数处理之前选择隐藏和显示的列。
//重载表格做显示隐藏处理
var isRunNun = true;
function remeberTab() {
if (isRunNun) {
isRunNun = false;
var list = $("#FlowcheckBoxAll").children("input");
var isclick = null;
var isWidth = 2341;
$.each(list, function (index, item) {
isclick = $(item).attr("isclick");
if (isclick == "true") {
//显示
} else {
//隐藏
isWidth = isWidth - 90.23;
$("thead").eq(0).find("th").eq(index + 1).addClass("layui-hide");
$("thead").eq(1).find("th").eq(index + 1).addClass("layui-hide");
$("colgroup").eq(0).children().eq($("colgroup").eq(0).children().length - 1).remove();
$("colgroup").eq(1).children().eq($("colgroup").eq(1).children().length - 1).remove();
var colgroup1 = $("colgroup").eq(0).children();
var colgroup2 = $("colgroup").eq(1).children();
var newLength1 = colgroup1.length;
for (var lIndex = 1; lIndex < newLength1; lIndex++) {
colgroup1.eq(lIndex).attr({ "width": (100 / (newLength1 - 1)) + "%" });
colgroup2.eq(lIndex).attr({ "width": (100 / (newLength1 - 1)) + "%" });
}
$(".layui-table").eq(0).css({ "min-width": isWidth + "px", "width": "100%" });
$(".layui-table").eq(1).css({ "min-width": isWidth + "px", "width": "100%" });
var tbodyList = $("tbody").children();
for (var i = 0; i < tbodyList.length; i++) {
tbodyList.eq(i).children().eq(index + 1).addClass("layui-hide");
}
}
});
isRunNun = true;
}
}