頁面批量操作中一鍵全選操作

前端框架使用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，然后請求后台彈出一個頁面。