layui 数据表格根据状态判断是否显示多选框
需求描述:状态为已办结的不能再进行处理
开发思路:
如图,状态为“已办结”的不显示多选框按钮
代码:
html中,实现是否显示多选框
<script type="text/html" id="checkbd"> {{# if (d.status!='已办结'){ }} <input type="checkbox" name="siam_one" title="" lay-skin="primary" data-aid="{{ d.sheetId }}" data-bid="{{ d.userName }}" data-cid="{{ d.phongNo }}"> {{# } }} </script>
js中,数据表格列代码,实现多选框
{ templet: "#checkbd", title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary' lay-filter='siam_all'> ", width: 60, },
js中,实现全选
layui.use('form', function () { form = layui.form; form.on("checkbox(siam_all)", function () { var status = $(this).prop("checked"); $.each($("input[name=siam_one]"), function (i, value) { $(this).prop("checked", status); }); form.render(); }); });
js中,实现获取多选框的值
var sheetIds = []; var userNames = []; var phongNos = []; $.each($("input[name=siam_one]:checked"), function (i, value) { sheetIds[i] = $(this).attr("data-aid"); userNames[i] = $(this).attr("data-bid"); phongNos[i] = $(this).attr("data-cid"); }); console.log("sheetIds="); console.log(sheetIds); console.log("userNames="); console.log(userNames); console.log("phongNos="); console.log(phongNos);
参考链接:
https://blog.csdn.net/weixin_48850734/article/details/123130351