/**
* 设置bootstrat-table
* @param params
*/
function setBootstrapTable (target, params) {
// 默认设置表格内容居中
params.columns && params.columns.forEach(function (item) {
if (!item.align) {
item.align = 'center'
}
})
// 默认表格配置
var defaultParams = {
data: params.data || '', // 默认数据为空
showColumns: params.showColumns ? params.showColumns : false, // 默认关闭可隐藏列
search: params.search ? params.search : false, // 默认关闭搜索
searchAlign: params.searchAlign ? params.searchAlign : 'left', // 默认搜索框靠左
searchOnEnterKey: params.searchOnEnterKey ? params.searchOnEnterKey : false, // 默认关闭回车搜索
searchText: params.searchText ? params.searchText : '', // 搜索框默认填充内容,默认为空
showToggle: params.showToggle ? params.showToggle : false, // 默认关闭切换展示方式按钮
showExport: params.showExport ? params.showExport : false, // 是否打开下载, 默认关闭
exportDataType: params.exportDataType ? params.exportDataType : 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all
exportTypes: params.exportTypes ? params.exportTypes : ['csv','excel'], // 下载类型, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv','excel']
formatSearch: function () { // 搜索框默认提示
return params.formatSearch ? params.formatSearch : '在当前表格中搜索'
},
formatNoMatches: function () { // 默认无数据展示内容
return params.formatNoMatches || '暂无数据'
},
formatLoadingMessage: function () { // 默认loading内容
return params.formatLoadingMessage || '努力加载中...'
},
formatColumns: function () { // 隐藏或显示列按钮的title, 默认为'显示或隐藏列'
return params.formatColumns ? params.formatColumns : '显示或隐藏列'
},
columns: params.columns || [] // 默认表头内容为空
}
// 将params中在默认表格配置中没有的属性,添加到默认表格配置中
for (var key in params) {
if (!defaultParams.hasOwnProperty(key)) {
defaultParams[key] = params[key]
}
}
if (params.fixedHeader) {
var clientHeight = $(target)[0].offsetParent.clientHeight
var offsetTop = $(target)[0].offsetTop
var tableHeight = clientHeight - offsetTop
defaultParams.height = tableHeight
}
// bootstrap-table表格渲染方法调用
$(target).bootstrapTable(defaultParams)
}

README.md

#### 表格组件,基于bootstrap-table

---
##### 使用方法 > html部分
```html
<table data-toggle="table" class="table table-bordered table-hover" id="your_table_id">
<thead class="thead-light"></thead>
<tbody>
<tr>
<td>数据一</td>
<td>数据二</td>
</tr>
</tbody>
</table>
```
> javascript部分
```javascript
setBootstrapTable('#your_table_id', {
data: data, // 表格数据,若是动态渲染的数据,则为必填项
formatNoMatches: '没有数据', // 配置没有数据显示的文字,默认为'暂无数据'
formatLoadingMessage: 'loading...', // 配置loading文字,默认为'努力加载中...'
height: 500, // 设置表格高度从而来固定表头
fixedHeader: true, // 自动计算表格在当前视图中,去除上方元素后可用的高度,开启这个配置则覆盖默认的height属性
search: false, // 搜索,默认关闭
searchAlign: 'left', // 默认搜索框靠左
searchOnEnterKey: false, // 默认关闭回车搜索
searchText: '', // 搜索框默认填充内容,默认为空
showColumns: false, // 默认关闭可隐藏列
showToggle: true, // 默认关闭切换展示方式按钮
showExport: false, // 是否打开下载, 默认关闭
exportDataType: 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'], // 下载类型, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv', 'excel']
formatColumns: '显示或隐藏列',// 隐藏或显示列按钮的title, 默认为'显示或隐藏列'
formatSearch: '在当前表格中搜索', // 搜索框内容,默认为'在当前表格中搜索'
onAll: function (name, args) { // 所有事件触发
// name: 触发的事件名称
// args: 触发事件的数据
},
columns: [ // 在这里进行表头设置
{
title: '表头一',
width: '100%', // 自定义宽度
sortable: true, // 是否排序
align: 'left', // 'left','center','right' 默认居中
showColumns: true, // 是否开启可隐藏列,默认开启
formatter: function (data) { // 格式化数据
// 例如: return data + '%' 则为数据返回添加上%,
// 如果数据需要%但是又要排序,则在此设置排序后的格式
}
}
]
})
```
> 更多配置项请查看 [官方文档][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. hession矩阵的计算与在图像中的应用

    参考的一篇博客,文章地址:https://blog.csdn.net/lwzkiller/article/details/55050275 Hessian Matrix,它有着广泛的应用,如在牛顿方法 ...

  2. PHP精确到毫秒秒杀倒计时实例

    精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...

  3. 算法笔记(c++)--桶排序题目

    算法笔记(c++)--桶排序 记得题目是排序,输入n个1-1000的数字然后去重然后排序. 桶排序没毛病 #include<iostream> using namespace std; i ...

  4. Amazon.com 购物 信用卡预售期

    I understand and thanks for confirming. In this case, the $1.00 is not a charge.  It is an authoriza ...

  5. python struct详解

    转载:https://www.cnblogs.com/gala/archive/2011/09/22/2184801.html 有的时候需要用python处理二进制数据,比如,存取文件,socket操 ...

  6. 软工实践-Alpha 冲刺 (6/10)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 已经解决登录注册等基本功能的界面. 完成了主界面的基本布局 ...

  7. ZOJ 3946 Highway Project 贪心+最短路

    题目链接: http://www.icpc.moe/onlinejudge/showProblem.do?problemCode=3946 题解: 用dijkstra跑单元最短路径,如果对于顶点v,存 ...

  8. ACM 第二十天

    积性函数.杜教筛 练习题 莫比乌斯函数之和 51Nod - 1244 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使用μ(n)(miu(n))作为莫比乌斯函数的记号. ...

  9. 【Nginx】均衡负载权重模式实现session数据同步

    思路:把session存放到一个公共redis服务器上 每次浏览器请求服务端都会带上cookie,因为使用的是权重负载均衡方案,因此nginx反向代理服务器会把请求发放到不同的服务端,服务端用cook ...

  10. JMeter脚本增强之集合点

    集合点的概念:用于实现所谓并发操作,如果集合点设定是10个人,那么所有的用户就会在同一条起跑线上等着后面的人,等10个人到齐了就哗地一下全部跑出去执行同一个动作.如果设置了超时,那么过了超时时间,有可 ...