bootstrap table插件动态加载表头


Posted in Javascript onJuly 19, 2019

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);
};

动态获取列:

function getColumns() {
 // 加载动态表格
 $.ajax({
 url : path + "api/information/people/getLableColumn?ztreeId=" + ztreeId,
 type : 'get',
 dataType : "json",
 async : false,
 success : function(returnValue) {
  // 未查询到相应的列,展示默认列
  if (returnValue.retCode == "0") {
  //没查到列的时候把之前的列再给它
  myColumns = $table.bootstrapTable('getOptions').columns[0];
  } else {
  // 异步获取要动态生成的列
  var arr = returnValue.data;
  $.each(arr, function(i, item) {
   myColumns.push({
   "field" : item.labelColumnCode,
   "title" : item.labelColumnName,
   "hide" : true,
   "align" : 'center',
   "valign" : 'middle'
   });
  });
  }
  console.log(myColumns);
  return myColumns;
 }
 });
}

刷新列表:

//点击左侧树后重新加载表格
 $table.bootstrapTable( 
        "refreshOptions", 
        { 
       url : path + "/api/peopledataInfo/getPeopleInfoList", // 获取数据的地址
       columns : myColumns,
       
        } 
    );
  }

需要注意的是bootstrap的table提供了两个刷新的方法,一个refresh,一个refreshOptions,前者只是刷新当前表格,后者会将表格中的组件全部更新一遍,因为我们替换了url和columns,所以需要调用后者。

展示效果:

bootstrap table插件动态加载表头

bootstrap table插件动态加载表头

动态加载表头其实就是类似Echart中动态加载数据的感觉一样,只是改变整个Option中的相关属性即可。

优点:代码量会大大减少,当我们要加载不同数据且样式一样的表格的时候可以采用这样的方式。

缺点:样式很难维护。前端人员不好定位bug,所以很难修改相应的样式bug。

依据项目实际情况,择优使用吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
VueJS 取得 URL 参数值的方法
Jul 19 #Javascript
vue自定义表单生成器form-create使用详解
Jul 19 #Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 #Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
You might like
PHP 读取和编写 XML
2014/11/19 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
window.onload使用指南
2015/09/13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
医生实习工作总结的自我评价
2013/09/27 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
珍惜水资源建议书
2014/03/12 职场文书
入党自我鉴定
2014/03/25 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS