页面批量操作中一键全选操作

前端框架使用layUI时，批量操作可以使用layui的方法。

html：

<div class="tab-bars">
    <a class="approve"  onclick="approveListProgram()">批量审核</a>
</div>
<div class="tab-content  layui-form">
    <table class="frog-table">
        <thead>
            <tr>
                <th style="width: 20px;"><input type="checkbox"
                    lay-skin="primary" class="checkAllProgram1"
                    lay-filter="checkboxProgram1" /></th>
                <th style="width: 50px;">序号</th>
                <th>编号</th>
                <th>检查部门</th>
                <th>检查时间</th>
                <th>检查人员</th>
                <th>检查内容</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${list}" var="fpPlaceDetail" varStatus="status">
                <tr target="slt_uid" rel="${fpPlaceDetail.id}"
                    id="${fpPlaceDetail.id}">
                    <td><input type="checkbox" lay-skin="primary"
                        lay-filter="checkboxProgram1" /></td>
                    <td>${page.pageBeginCount + status.index + 1}    </td>
                    <td>${fpPlaceDetail.number}</td>
                    <td>${fpPlaceDetail.checkDepartment}</td>
                    <td>${fpPlaceDetail.checkDate}</td>
                    <td>${fpPlaceDetail.checkUser}</td>
                    <td>${fpPlaceDetail.checkContent}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>

注意，如果要是用layUI的一键全选，需要在上面第二个div页签里加上layui-form属性，否则js里的checkbox监听事件会失效。

JavaScript：

form.on('checkbox(checkboxProgram1)', function(data) {
        debugger;
        if ($(data.elem).hasClass("checkAllProgram1")) {
            if (data.elem.checked) {
                $(data.elem).parents('table:first').find('tbody').find(
                        'input[type="checkbox"]').prop("checked", true);
            } else {
                $(data.elem).parents('table:first').find('tbody').find(
                        'input[type="checkbox"]').prop("checked", false);
            }
            form.render('checkbox');
        }
    });

function approveListProgram() {
        var ids = "";
        $('.frog-table', NavTab.getCurrentPanel()).find(
                'tbody input[type="checkbox"]').each(function() {
            if ($(this).prop("checked")) {
                var id = $(this).parents('tr:first').attr("rel");
                if (ids == "") {
                    ids = id;
                } else {
                    ids += "," + id;
                }
            }
        });
        if (ids == "") {
            Dialog.warn("未选中一条以上的数据");
            return;
        }
        
        $.get('${ctx}/fpPlaceDetail/preApprove/'+ids,function(rtn){
              layer.open({
              type: 1,
              skin: 'layui-layer-rim', //加上边框
              area: ['500px', '250px'], //宽高
              content: rtn
            });
          });
    }

form.on为checkbox监听事件，执行一键全选操作。

approveListProgram()为审核操作：首先获得被选择的所有id，拼接成字符串ids，然后请求后台弹出一个页面。