1. /**
  2. * 设置bootstrat-table
  3. * @param params
  4. */
  5. function setBootstrapTable (target, params) {
  6. // 默认设置表格内容居中
  7. params.columns && params.columns.forEach(function (item) {
  8. if (!item.align) {
  9. item.align = 'center'
  10. }
  11. })
  12. // 默认表格配置
  13. var defaultParams = {
  14. data: params.data || '', // 默认数据为空
  15. showColumns: params.showColumns ? params.showColumns : false, // 默认关闭可隐藏列
  16. search: params.search ? params.search : false, // 默认关闭搜索
  17. searchAlign: params.searchAlign ? params.searchAlign : 'left', // 默认搜索框靠左
  18. searchOnEnterKey: params.searchOnEnterKey ? params.searchOnEnterKey : false, // 默认关闭回车搜索
  19. searchText: params.searchText ? params.searchText : '', // 搜索框默认填充内容,默认为空
  20. showToggle: params.showToggle ? params.showToggle : false, // 默认关闭切换展示方式按钮
  21. showExport: params.showExport ? params.showExport : false, // 是否打开下载, 默认关闭
  22. exportDataType: params.exportDataType ? params.exportDataType : 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all
  23. exportTypes: params.exportTypes ? params.exportTypes : ['csv','excel'], // 下载类型, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv','excel']
  24. formatSearch: function () { // 搜索框默认提示
  25. return params.formatSearch ? params.formatSearch : '在当前表格中搜索'
  26. },
  27. formatNoMatches: function () { // 默认无数据展示内容
  28. return params.formatNoMatches || '暂无数据'
  29. },
  30. formatLoadingMessage: function () { // 默认loading内容
  31. return params.formatLoadingMessage || '努力加载中...'
  32. },
  33. formatColumns: function () { // 隐藏或显示列按钮的title, 默认为'显示或隐藏列'
  34. return params.formatColumns ? params.formatColumns : '显示或隐藏列'
  35. },
  36. columns: params.columns || [] // 默认表头内容为空
  37. }
  38. // 将params中在默认表格配置中没有的属性,添加到默认表格配置中
  39. for (var key in params) {
  40. if (!defaultParams.hasOwnProperty(key)) {
  41. defaultParams[key] = params[key]
  42. }
  43. }
  44. if (params.fixedHeader) {
  45. var clientHeight = $(target)[0].offsetParent.clientHeight
  46. var offsetTop = $(target)[0].offsetTop
  47. var tableHeight = clientHeight - offsetTop
  48. defaultParams.height = tableHeight
  49. }
  50. // bootstrap-table表格渲染方法调用
  51. $(target).bootstrapTable(defaultParams)
  52. }

README.md

  1. #### 表格组件,基于bootstrap-table
  2.  
  3. ---
  4. ##### 使用方法
  5.  
  6. > html部分
  7. ```html
  8. <table data-toggle="table" class="table table-bordered table-hover" id="your_table_id">
  9. <thead class="thead-light"></thead>
  10. <tbody>
  11. <tr>
  12. <td>数据一</td>
  13. <td>数据二</td>
  14. </tr>
  15. </tbody>
  16. </table>
  17. ```
  18. > javascript部分
  19. ```javascript
  20. setBootstrapTable('#your_table_id', {
  21. data: data, // 表格数据,若是动态渲染的数据,则为必填项
  22. formatNoMatches: '没有数据', // 配置没有数据显示的文字,默认为'暂无数据'
  23. formatLoadingMessage: 'loading...', // 配置loading文字,默认为'努力加载中...'
  24. height: 500, // 设置表格高度从而来固定表头
  25. fixedHeader: true, // 自动计算表格在当前视图中,去除上方元素后可用的高度,开启这个配置则覆盖默认的height属性
  26. search: false, // 搜索,默认关闭
  27. searchAlign: 'left', // 默认搜索框靠左
  28. searchOnEnterKey: false, // 默认关闭回车搜索
  29. searchText: '', // 搜索框默认填充内容,默认为空
  30. showColumns: false, // 默认关闭可隐藏列
  31. showToggle: true, // 默认关闭切换展示方式按钮
  32. showExport: false, // 是否打开下载, 默认关闭
  33. exportDataType: 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all
  34. exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'], // 下载类型, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv', 'excel']
  35. formatColumns: '显示或隐藏列',// 隐藏或显示列按钮的title, 默认为'显示或隐藏列'
  36. formatSearch: '在当前表格中搜索', // 搜索框内容,默认为'在当前表格中搜索'
  37. onAll: function (name, args) { // 所有事件触发
  38. // name: 触发的事件名称
  39. // args: 触发事件的数据
  40. },
  41. columns: [ // 在这里进行表头设置
  42. {
  43. title: '表头一',
  44. width: '100%', // 自定义宽度
  45. sortable: true, // 是否排序
  46. align: 'left', // 'left','center','right' 默认居中
  47. showColumns: true, // 是否开启可隐藏列,默认开启
  48. formatter: function (data) { // 格式化数据
  49. // 例如: return data + '%' 则为数据返回添加上%,
  50. // 如果数据需要%但是又要排序,则在此设置排序后的格式
  51. }
  52. }
  53. ]
  54. })
  55. ```
  56. > 更多配置项请查看 [官方文档][https://bootstrap-table.com/docs/api/table-options/]

  

  

二次封装bootstrap-table及功能优化的更多相关文章

  1. bootstrap table导出功能无效报错Uncaught INVALID_CHARACTER_ERR: DOM Exception 5和导出中文乱码问题

    由于表格数据中含有中文导致的,在网页的开发者选项中报一个 Uncaught INVALID_CHARACTER_ERR: DOM Exception 5 问题.这个问题是由于BootStrap tab ...

  2. Python笔记_第四篇_高阶编程_二次封装

    1.二次封装: 二次封装其实就是对一个类或者一个方法进行二次的改造增加新的功能. 2.一个类的二次封装: 我们以一个进程为例,我们把Process这个库进行二次封装,增加一些功能,在调用. thoma ...

  3. 基于bootstrap table配置的二次封装

    准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...

  4. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  5. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  6. ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装

    一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封装. 首先我们定义一个控制器,在新增控制器的时候,控制器会自动继承自AbpContro ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装以及6种处理时间格式化的方法

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封 ...

  8. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  9. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

随机推荐

  1. Ubuntu系统下在PyCharm里用virtualenv集成TensorFlow

    我的系统环境 Ubuntu 18.04 Python3.6 PyCharm 2018.3.2 community(免费版) Java 1.8 安装前准备 由于众所周知的原因,安装中需要下载大量包,尽量 ...

  2. React Native 【学习总结】-【常用命令】

    前言 刚接触RN,相信很多人无从下手,不知道下一步要干什么,能干什么,本次学习围绕这个问题,将RN的常用命令总结一下,帮助你快速上手 架构理解 光知道命令的作用,远远不够,如果知道命令背后的意义,才能 ...

  3. Yii2 UploadedFile上传文件

    通过 UploadFile::getInstance($model, $attribute); UploadFile::getInstances($model, $attribute); Upload ...

  4. 作业 20181030-3互评Alpha版本

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2323 组名:可以低头,但没必要 组长:付佳 组员:张俊余  李文涛  孙 ...

  5. 【探路者】团队中的每一次感动——Alpha版

    我是[探路者]团队的leader翟宇豪.在软件工程课程开始时,当听说有团队作业这个任务时,我个人还是对leader这个角色很期待的.我很希望通过自己的努力,让我所在的团队变得更好,让组里的每一个成员在 ...

  6. CSS3:不可思议的border属性

    在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替.但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧. 1.正三 ...

  7. git找回当前目录下误删的所有文件

    git checkout . 参考:http://opentechschool.github.io/social-coding/extras/delete-restore.html

  8. Matlab中TCP通讯-实现外部程序提供优化目标函数解

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Matlab中TCP通讯-实现外部程序提供优化目标函数解     本文地址:http://te ...

  9. 【Nginx】优化配置

    nginx优化 突破十万并发 一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1.  worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它 ...

  10. 用Python实现求Fibonacci数列的第n项

    1. 背景——Fabonacci数列的介绍(摘自百度百科): 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacc ...