BootStrapTable的动态表格
https://blog.csdn.net/Nerver_77/article/details/82684393
在咱们构建BootStrapTable(下文中均称:BsTable),其中columns参数做为表格列的内容存储,咱们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。ajax
columns参数格式:相似下文sql
columns: { { field: 'Id', title: '编号', },{ field: 'name', title: '名称', },{ field: 'sex', title: '性别', //自定义方法 formatter: function (value) { if (value == 1) { return '男'; } else if (value == 2) { retuen '女'; } } }, }
所有代码:json
/** * BsTable动态表格生成 */ function sqlExecute() { // var sql = $('#sql').val(); // var connectInfo = $('#connectInfo').val(); $('#DataQueryTable').bootstrapTable({ ajax: function (request) { $.ajax({ type: "post", url: prefix + "/list", contentType: "application/json;charset=utf-8", dataType: "json", json: 'callback', success: function (data) { var json = data.rows; // console.log(json); var dynamicHeader = []; dynamicHeader.push({ field: "state", check: true }); for (var i = 0; i < (Object.keys(json[0])).length; i++) { var property = (Object.keys(json[0]))[i]; console.log(property); dynamicHeader.push({ "title": property, "field": property, switchable: true, sortable: true }); } // console.log(Object.keys(json[0])); $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({ data: json, toolbar: '#toolbar', cache: false, striped: true, sidePagination: "client", sortOrder: "desc", pageSize: 25, pageNumber: 1, pageList: "[25, 50, 100, All]", showToggle: true, showColumns: true, showExport: true, height: 400, exportDataType: "basic", pagination: true, strictSearch: true, search: true, columns: dynamicHeader }); }, error: function () { alert("SQL查询错误,请输入正确的SQL语句!"); location.reload(); } }); } }); };
<button type="button" class="btn btn-primary" onclick="sqlExecute()"> <i class="fa fa-check"></i> SQL语句执行 </button> <div class="row"> <div class="col-sm-12 select-table table-striped"> <table id="DataQueryTable"></table> </div> </div>