首页 > 开发 > Javascript > 正文

bootstrap table插件动态加载表头

2020-02-25 00:56:06
字体:
来源:转载
供稿:网友

bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表加载的数据需求不同,所以需要动态的更换表头。 网上有很多加载表格数据的例子,但是却没有找到如何动态加载表格,再加在数据。 虽然可以一个表格加载一种数据,但是本着学习的态度尝试了下这种方式,结果发现是可以执行的。分享下思路和实现过程,以备日后使用。

思路:

1、写接口,查询出要展示的列。注意接口中必须要有字段中文名称(columns属性的title值),字段的英文名称(columns的field字段),特别注意filed字段应该与最后查询出的列表中返回的json数据中的key保持一致,不然取不到值。

2、ajax请求刚才的接口,查询出columns,并给table的columns赋值。

3、加载表格展示。

大致代码如下:

表格:

var peopleOptions;// 人口列表加载function tableItem() {  peopleOptions = {    method : "POST", // 使用get请求到服务器获取数据    url : path + "/api/information/people/getList", // 获取数据的地址    contentType : "application/x-www-form-urlencoded",// 重要否则POST会报错    striped : false, // 表格显示条纹    pagination : true, // 启动分页    pageSize : 10, // 每页显示的记录数    pageNumber : 1, // 当前第几页    pageList : [ 10, 20, 50 ], // 记录数可选列表    uniqueId : "id",    showColumns : false, // 显示下拉框勾选要显示的列    showToggle : false, // 显示 切换试图(table/card)按钮    clickToSelect : false, // 点击可选    singleSelect : false, // 禁止多选    maintainSelected : true, // 在点击分页按钮或搜索按钮时,将记住checkbox的选择项    sortable : true, // 禁止所有列的排序    sidePagination : "server", // 表示服务端请求 后台分页    toolbar : "#toolbar",// 指明自定义的toolbar    queryParamsType : "undefined",    queryParams : function queryParams(params) {      var param = {        pageNumber : params.pageNumber,        pageSize : params.pageSize,        orgId : ztreeId,        nodeId : ztreeId,        citizenName : $("#fullname").val().trim(),        sex : $("#sex").val(),        age : $("#age").val().trim(),        identityCode : $("#idCard").val().trim(),        cellPhone : $("#isMobile").val().trim(),        adress : $("#adress").val().trim(),      };      return param;    },    onLoadSuccess : function() { // 加载成功时执行      responseHandler : function(res) { // 格式化数据        console.log(res);        if (res.data.total != undefined)          tmp = {            total : res.data.total,            rows : res.data.rows          };        if (res.data.total == undefined)          tmp = {            total : res.data.length,            rows : res.data          };        return tmp;      },      columns : [ {        checkbox : true,        title : '全选',        valign : 'middle'      }, {        title : '序号',        field : 'number',        width : '40px',        align : 'center',        valign : 'middle',        formatter : indexFormatter      }, {        title : '姓名',        field : 'citizenName',        align : 'center',        valign : 'middle',      }, {        title : '年龄',        field : 'age',        align : 'center',        width : 28,        valign : 'middle',        formatter : ageFormatter      }, {        title : '性别',        field : 'sex',        width : 28,        align : 'center',        valign : 'middle',      },{        title : '身份证号',        field : 'identityCode',        align : 'center',        valign : 'middle',      }, {        title : '民族',        field : 'nation',        align : 'center',        valign : 'middle',      } ]    }}  $table = $("#table").bootstrapTable(peopleOptions);};            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表