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

前端框架使用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，然后请求后台弹出一个页面。