不是操作骚 也不是组件不够完美 总会遇到这样的需求,记录一下
分析
- 有点坑就是全选 返选 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());
}
})