BootstrapTable checkbox默认选中

刺骨的言语ヽ痛彻心扉 2024-02-19 21:54 28阅读 0赞

## BootstrapTable ##

在Web后台管理项目中对表格展示数据使用居多，主要是表格的多条件查询、分页、排序等功能。我们的项目中前端框架是Bootstrap。所以很多插件都是支持Bootstrap的。bootstrap-table是一款非常有名的开源表格插件。我们在项目中的表格就是使用它进行展示。

## 问题描述 ##

在修改页面需要将之前选中的项在复选框默认选中。其实挺简单。主要是自己是后端编程，对前端了解不深。虽然有详细的文档但是也容易迷糊。

<input type="hidden" name="nursingUuids" value="${oldPeopleNursing.nursingUuids}">
    
    <table id="table-beadhouseNursing" class="table table-striped table-condensed"
        data-url="beadhouseNursing/search"
        data-query-params="beadhouseNursingQueryParams">
        <thead>
        <tr>
        	<th data-checkbox="true"></th>
        	<th data-field="type">护理项目类型</th>
        	<th data-field="name">护理名称</th>
        	<th data-field="level">护理级别</th>
        	<th data-field="cost">护理费用</th>
        	<th data-field="isBase">基础护理</th>
        	<th data-field="isFeature">特色护理</th>
        </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(document).ready(function() {
          // 护理项目列表初始化
          $('#table-beadhouseNursing').bootstrapTable();
          $('#table-beadhouseNursing').bootstrapTable('checkBy', {field: 'uuid', values:$("input[name='nursingUuids']").val().split(",")});
        }); 
    </script>

**以上代码就是问题代码。感觉没错，但是复选框就是不能默认选中。**

## 解决问题 ##

**有两个地方有问题:**

1.  js执行顺序，就是`$('#table-beadhouseNursing').bootstrapTable('checkBy', {field: 'uuid', values:$("input[name='nursingUuids']").val().split(",")});`位置不对。
2.  checkBy中参数values值不对。

**正确代码：**

$('#table-beadhouseNursing').bootstrapTable({
        	  onLoadSuccess: function (data) {
        	    var nursingUuids = [];
        	    $.each($("input[name='nursingUuids']").val().split(","), function(i, n) {
        	    	nursingUuids.push(Number(n))
        	    });
        	    $('#table-beadhouseNursing').bootstrapTable('checkBy', {field: 'uuid', values:nursingUuids});
        	  }
        });

**解析：**  
首先是需要在bootstrapTable 数据加载成功后再执行默认选中方法checkBy。然后就是values值问题，我在input中存放的值是1,2,3。checkBy的values值是数组values=\[\]。在使用.split(",")方法后得到的是字符串数组。所以需要进行处理与表格中uuid数据类型一致。这样checkBy方法才能找到对应的行。