BootstrapTable

In the Web background management project, table display data is mostly used, mainly including multi-condition query, paging, sorting and other functions of the table. The front-end framework of our project is Bootstrap. So many plug-ins support Bootstrap. Bootstrap table is a very famous open source table plug-in. Our form in the project is to use it for presentation.

Problem description

To modify the page, you need to select the previously selected item by default in the check box. It's actually quite simple. The main thing is that I am a back-end programmer, and I don't know much about the front-end. Although there are detailed documents, it is easy to be confused.

<!-- input It's stored back in the background.'Nursing items'Selected values stirng Type 1,2,3 -->
<input type="hidden" name="nursingUuids" value="${oldPeopleNursing.nursingUuids}">
<!-- bootstrap table -->
<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" data-formatter="BEADHOUSE_NURSING_TYPE_Formatter">Nursing project type</th>
    	<th data-field="name">Nursing name</th>
    	<th data-field="level" data-formatter="BEADHOUSE_NURSING_LEVEL_Formatter">Nursing level</th>
    	<th data-field="cost">Nursing cost</th>
    	<th data-field="isBase" data-formatter="FLAG_IS_Formatter">basic nursing</th>
    	<th data-field="isFeature" data-formatter="FLAG_IS_Formatter">Characteristic nursing</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    $(document).ready(function() {
      // Initialization of Nursing Item List
      $('#table-beadhouseNursing').bootstrapTable();
      $('#table-beadhouseNursing').bootstrapTable('checkBy', {field: 'uuid', values:$("input[name='nursingUuids']").val().split(",")});
    }); 
</script>

The above code is the problem code. It feels right, but the check box just can't be selected by default.

Solve the problem

There are two problems:

1. The order of execution of js is $(' table - beadhouse Nursing'). BootstrapTable ('checkBy', {field:'uuid', values: $("input [name='nursing Uuids']). val (). split (",")}); the location is not correct.
2. The value of the parameter in checkBy is incorrect.

Correct code:

$('#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});
    	  }
    });

Analysis:
First, the default checkBy method needs to be executed after bootstrapTable data is loaded successfully. Then there's the value problem. The value I put in is 1,2,3. The value of checkBy is the array values=[]. Using the. split(",") method, you get an array of strings. So it needs to be processed in accordance with the uuid data type in the table. In this way, the checkBy method can find the corresponding row.