使用“checkAll”方法的引导表仅检查当前页面中的复选框

Question

我的 HTML5 页面中有一个引导表。

使用时

 $('#bk-table').bootstrapTable('checkAll')

仅选中当前页面中的复选框。

如何勾选所有页面中的所有复选框？

我的引导表：

 <form>
        {% csrf_token %}
        <table  contenteditable='true' class="table table-bordered table-xl" width="100%"  cellspacing="0" style="font-size: 1.0rem;"
                id="bk-table"
                data-toggle="table"
                data-toolbar="#toolbar"
                data-cookie="true"
                data-cookie-id-table="materialId"
                data-show-columns="true"           
                data-show-export="true"           
                data-height="1650"
                data-click-to-select="true"
                data-id-field="id"
                data-show-footer="true"
                data-url="/api/materials/"
                data-query-params="queryParams"
                data-remember-order="true"
                data-pagination="true"
                data-side-pagination="client"
                data-total-field="count"
                data-data-field="results">
          
            <thead class="thead-dark" >

            <tr contenteditable='true'>
                <th data-field="state" name="checkbox" class="data-checkbox"  id="data-checkbox"  data-checkbox="true" ></th>
                <th class ='courseCode' data-field="courseCode"  data-formatter="renderCourse">Course Code</th>

            </tr>
            </thead>
        </table>
    </form>

我的按钮事件：

    <button class="button" type="button" onclick="select_all();">Select All</button>
<script>
            function select_all()
            {           
                $('#bk-table').bootstrapTable('checkAll')
            }
</script>

Answer 1

bootstrapTable('checkAll') 用于检查/取消检查所有当前页面行。要选择所有页面，首先加载数据

let data = $("#bk-table").bootstrapTable('getData');

并迭代数据对象并将 id 字段

state

（因为

data-field="state"

用于复选框）值更新为对象数组数据中的

true

，然后使用以下命令重新加载表您的更新数据

$('#bk-table').bootstrapTable('load', data);

请查找示例更新的数据对象数组：

 data = [{"id":1,"courseCode":"Item 1","state":true},{"id":2,"courseCode":"Item 2","state":true},{"id":3,"courseCode":"Item 3","state":true}];

function select_all()
            {           
                let data = $("#bk-table").bootstrapTable('getData');  //getting table data
                for(let i=0;i<data.length;i++){
                           data[i]['state'] = true;
                }
                $('#bk-table').bootstrapTable('load', data); //reloading table data after updation
            }

<button class="button" type="button" onclick="select_all();">Select All</button>

投票将不胜感激！

Answer 2

我可以通过关闭分页，然后选择所有框，然后重新打开分页来完成此操作：

       <div id="importClientsToolbar">
           <h5 id="importClientsToolbar" class="m-0 text-primary"><font color="purple">Select Clients to Import</font></h5>
           <button class="btn btn-default btn-outline-primary" id="check">Check All</button>
           <button class="btn btn-default btn-outline-primary" id="uncheck">Uncheck All</button>
       </div>

      <table id="selectClientsToImport"
             class="table table-borderless sortable"
             bgcolor="#FFFFFF"
             data-toolbar="#importClientsToolbar"
             data-toolbar-align="left"
             data-search="true"
             data-click-to-select="true"
             data-checkbox-header="false"
             data-toggle="table"
             data-response-handler="responseHandler"
             data-pagination="true">

<script>
    var checkAll = false
    $(function () {
        $('#check').click(function () {
            $('#selectClientsToImport').bootstrapTable('togglePagination')
            checkAll = true
            $('#selectClientsToImport').bootstrapTable('checkAll')
            $('#selectClientsToImport').bootstrapTable('togglePagination')
        })
        $('#uncheck').click(function () {
            $('#selectClientsToImport').bootstrapTable('togglePagination')
            checkAll = false
            $('#selectClientsToImport').bootstrapTable('uncheckAll')
            $('#selectClientsToImport').bootstrapTable('togglePagination')
        })
    })
    function responseHandler(res) {
        res.rows.forEach(function (item) {
            item.state = checkAll
        })
        return res
    }
</script>