引导表插件动态加载标题

Bootstrap的表属性很熟悉。最近遇到了一个问题，犹豫是不是每个列表都有不同的数据需求，需要动态改变表头。网上有很多加载表数据的例子，但是没有办法动态加载表并添加到数据中。虽然一个表可以加载一种数据，但是这种方法在学习的态度上已经尝试过了，发现是可以执行的。分享想法和实施过程以备将来使用。

思考：

1.编写界面，查询要显示的列。注意界面中字段的中文名称(columns属性的title值)和字段的英文名称(columns的field字段)，特别注意字段字段要和上次查询列表返回的json数据中的key一致，否则取不到值。

2.ajax刚才请求接口，查询出列，并为表的列赋值。

3.加载表格显示。

大致代码如下：

表单：

var peopleOptions//人口列表加载函数TableItem(){ PeopleOptions={ method : ' POST '，//使用得到请求到服务器获取数据url :路径/API/信息/人员/GetList '，//获取数据的地址内容类型： '应用程序/x-www-form-URL编码'，//重要否则邮政会报错条纹：假，//表格显示条纹分页： true，//启动分页pageSize : 10，//每页显示的记录数页码： 1,//当前第几页页面列表： [ 10,20,50 ],//记录数可选列表uniqueId : 'id '，showColumns : false，//显示下拉框勾选要显示的列showToggle : false，//显示切换试图（表格/卡片)按钮单击选择：假，//点击可选singleSelect : false，//禁止多选保持选择的：为真， //在点击分页按钮或搜索按钮时，将记住检验盒的选择项可排序： true，//禁止所有列的排序侧分页： '服务器',//表示服务端请求后台分页工具栏： ' #工具栏'，//指明自定义的工具栏queryParamsType : '未定义，queryParams :函数查询参数(params){ var param={页码： params。页码，pageSize : params.pageSize，orgId : ztreeId，nodeId : ztreeId，citizenName : $('#fullname ').val().trim()，sex : $('#sex ').val()，age : $('#age ').val().trim()，identityCode : $('#idCard ').val().trim()，MobiLe : $(' # IsMoBile ').val().trim()，adress : $('#adress ').val().trim()，}；返回参数；}，onLoadSuccess :函数(){ //加载成功时执行responseHandler :函数(res) { //格式化数据控制台。日志(RES)；if (res.data.total！=未定义)tmp={总计： RES . data。总计，行： RES .数据。行}；if(RES .数据。total==undefined)tmp={ total : RES . data。长度，第：行RES . data }；返回tmp}，第：列[ {复选框：为真，标题： '全选，valign : 'middle' }，{ title : '序号，字段： '数字，宽度： '40px '，对齐： '中心，valign : '中间，格式化程序： indexFormatter }，{ title : '姓名，字段： 'citizenName '，对齐： '中心'，valign : '中间'，}，{ title : '年龄，字段： '年龄，对齐： '中心，宽度： 28，valign : '中间，格式化程序： ageFormatter }，{ title : '性别，字段：“性”，宽度： 28, 将："居中对齐",将："居中对齐“，}，{ title : '身份证号，字段： '标识代码，对齐： '中心，valign : '中间，}，{ title : '民族，字段： '国家，对齐： '中心，valign : '中间，}]} $ table=$(' # table ').bootstrapTable(PeopleOptions)；};动态获取列：

函数getColumns() {//加载动态表$。Ajax({ URL : path ' API/information/people/getlabellecolumn？Ztre Eid=' ztre Eid，type:' get '，datatype:' JSON '，async3360 false，success3360函数(返回值){//找不到对应的列。显示默认列if(返回值。retcode==' 0 '){//找不到列时，给它my columns=$ table。引导表(' getoptions ')。列[0]；} else {//异步获取要动态生成的列var arr=returnValue.data$.每个(arr，function(i，item){ mycolumns . push({ ' field ' : item . labelcolumncode，' title ' : item . labelcolumnname，' hide' : true，' align' : 'center '，' valign ' : ' middle ' })；});} console . log(MyColumns)；返回myColumns} });}刷新列表：

//点击左边的树，重新加载table $ table . bootstrap table(' refresh options '，{ URL : path '/API/people datainfo/getpeople infolist '，//获取数据列的地址3360 my columns，})；}需要注意的是，bootstrap的表提供了两种刷新方式，一种是refreshOptions，一种是refresh options。前者仅刷新当前表，而后者将更新表中的所有组件。因为我们替换了url和列，所以我们需要调用后者。

展览效果：

实际上，动态加载头类似于在Echart中动态加载数据的感觉，只是改变了整个Option中的相关属性。

优点：代码量会大大减少，当我们想要加载不同数据、相同样式的表时可以采用。

缺点：风格难以保持。前端人员很难定位bug，因此很难修改相应的风格bug。

根据项目的实际情况，选择最佳用途。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。