Bootstrap动态设置表格title项

页面searchType

<form id="formId"><div class="select-list"><ul><li><select name="searchType" id="searchType"><option value="1">按各节点统计</option><option value="2">按台账单位统计</option></select></li></ul></div>
</form>

根据 searchType 的值动态修改 areaname 列的标题。可以通过在 onLoadSuccess 回调函数中检查 searchType 的值，并调用 updateColumnTitle 来动态设置列标题。

$(function () {var options = {url: prefix + "/useSituation",modalName: "证书在线核查",pagination: false,showSearch: false,showRefresh: false,queryParams: queryParams,onLoadSuccess: function (data) {// 设置areaname字段let searchType = $("#searchType").val();if (searchType == 1) {$("#bootstrap-table").bootstrapTable('updateColumnTitle', { field: 'areaname', title: '节点' });} else if (searchType == 2) {$("#bootstrap-table").bootstrapTable('updateColumnTitle', { field: 'areaname', title: '台账单位' });}let rows = $("#bootstrap-table").bootstrapTable('getData', true);// 非活跃证书数量rows.forEach(function(row) {row['nonActiveCount'] = row.count1 - row.count2;});$("#bootstrap-table").bootstrapTable('load', rows);initChart(rows);},columns: [{field: 'areaname', width: '200', title: '节点 / 台账单位', align: 'center'},{field: 'count1', width: '200', title: '证书总量', align: 'center'},{field: 'count2', width: '200', title: '活跃证书数量', align: 'center'},{field: 'nonActiveCount', width: '200', title: '非活跃证书数量', align: 'center'},{field: 'count3', width: '200', title: '活跃证书占比', align: 'center',formatter: function (value, row, index) {return value * 100 + "%"}}]};$.table.init(options);
});