layui表格筛选框 多页选中 分页置顶+扩展搜索

不是操作骚 也不是组件不够完美 总会遇到这样的需求,记录一下

分析

• 有点坑就是全选 返选 obj.data 是空的
• 那就只能初始化的时候把数据带进去
• 取了这么多ID 怎么用?

初始赋值并选中

layui.table.render({
	//其它参数自拟
	parseData: function (res) {
        //初始化当前页
        currentArray = res.data;
        res.data.map(function(val,index,array){
            _has = checkArray.findIndex((v) => {
                return v == val.goods_id;
            });
            return val.LAY_CHECKED = (_has == -1) ? false : true;
        })
    },
})

监听复选框 并加入表单

//监听行单击事件
table.on('checkbox(DataTable)', function (obj) {
       var checkData = obj.data;
       //全选
       if (obj.type == 'all') {
           currentArray.map(function(item, index, array) {
               //是否在选中数组中,-1为不存在
               var _has = checkArray.findIndex((v) => {
                   return v == item.goods_id;
               });
               (_has != -1) && checkArray.splice(_has,1);
               //全选|全不选
               (obj.checked == true) && (_has == -1) && checkArray.push(item.goods_id);
               (obj.checked == false) && (_has != -1) &&  checkArray.splice(_has,1);
           });

       }
       // 如果是单选
       else {
           var goods_id = checkData.goods_id;
           var _has = checkArray.findIndex((v) => {
               return v == goods_id;
           });
           (_has == -1) ? checkArray.push(goods_id) : checkArray.splice(_has,1);
       }
       $("#dataForm").find("[name=ids]").val(checkArray.toString());
       console.log(checkArray);
   });

额外小技巧

• 弹出层选择表格搜索 再带分页 的集成方式
• 集成为一行,放在顶部

//CSS
<style>
    .layui-table-page {background: #fff;border-top-width: 0px;}
    .layui-laypage {float: right;}
    .search {float: left;display: none}
    .layui-hide {display: block!important;}
</style>
//html
<div class="layui-inline search">
    <div class="layui-form-item" style="margin-bottom:0px">
        <div class="layui-inline">
            <div class="layui-input-inline " style="width:150px">
                <input type="text" name="name" placeholder="查找项目" autocomplete="off" class="layui-input" lay-verify="required" style="height: 26px;line-height: 26px;">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="*" style="height: 26px;line-height: 26px;">查找</button>
        </div>
    </div>
</div>
//JS
layui.table.render({
	//其它参数自拟
	done: function (res, curr, count) {
       //将分页条替换到顶部
       $(".layui-table-page").insertBefore(".layui-table-header");
       //追加搜索框
       $("#layui-table-page1").prepend($(".search").clone(true).show());
    }
})