二次封装bootstrap-table及功能优化
/**
* 设置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及功能优化的更多相关文章
- bootstrap table导出功能无效报错Uncaught INVALID_CHARACTER_ERR: DOM Exception 5和导出中文乱码问题
由于表格数据中含有中文导致的,在网页的开发者选项中报一个 Uncaught INVALID_CHARACTER_ERR: DOM Exception 5 问题.这个问题是由于BootStrap tab ...
- Python笔记_第四篇_高阶编程_二次封装
1.二次封装: 二次封装其实就是对一个类或者一个方法进行二次的改造增加新的功能. 2.一个类的二次封装: 我们以一个进程为例,我们把Process这个库进行二次封装,增加一些功能,在调用. thoma ...
- 基于bootstrap table配置的二次封装
准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装
一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封装. 首先我们定义一个控制器,在新增控制器的时候,控制器会自动继承自AbpContro ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装以及6种处理时间格式化的方法
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库
经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...
随机推荐
- Linux 安装Redis<集群版>(使用Mac远程访问)
阅读本文需要先阅读安装Redis<准备> 一 架构细节 所有的redis节点彼此互联(PING-PONG机制) 内部使用二进制协议优化传输速度和带宽 节点的fail是通过集群中超过半数的节 ...
- Phaser3跟随自定义路径移动的赛车 -- iFIERO游戏教程
racingcar 在线预览:http://www.ifiero.com/uploads/phaser/pathrotate/代码: var config = { type: Phaser.AUT ...
- JAVA基础学习之路(十一)引用传递
引用传递: 不同栈内存可以指向同一块堆内存,不同栈内存可以对一块堆内存进行修改 范例一: class Message { private int num = 10; public Message(in ...
- PaaSoo云通讯-印度市场机遇与挑战并存
2019年4月16日,由白鲸出海举办的2019中印互联网大会(Global Connects India)在印度新德里举行,这次的大会主要涵盖了出海主题峰会.B2B展会.中印互联网高层圆桌等模块. 众 ...
- C#中的Split用法以及详解
一.String.Split方法提供了如下6个重载函数: 名称 说明 String.Split (Char[]) 返回包含此实例中的子字符串(由指定 Char 数组的元素分隔)的 String 数组. ...
- php异步学习(1)
1.为啥PHP需要异步操作? 一般来说PHP适用的场合是web页面展示等耗时比较短的任务,如果对于比较花时间的操作如resize图片.大数据导入.批量发送EDM.SMS等,就很容易出现操作超时情况.你 ...
- Alpha版发布 - 感谢有你们
在本次alpha开发的过程中,很感谢组长王航对我信任,让我统筹大家的工作任务和进度,使我对项目管理有了深刻的理解. 我也要感谢邹双黛,因为我以前很少做文字类的工作,写东西非常生硬,邹双黛即使在有做家教 ...
- 《我是IT小小鸟》阅读心得
虽然读这本书是老师布置的作业,但是读了几页后就被书中的内容所吸引住了.或许是因为我也是学这个专业的,所以书中的一些内容让我觉得非常的有兴趣.作为一个学习软件工程的大一学生还没真正的认识到这个专业的深奥 ...
- MySQL 查询缓存机制(MySQL数据库调优)
查询缓存机制:缓存的是查询语句的整个查询结果,是一个完整的select语句的缓存结果 哪些查询可能不会被缓存 :查询中包含UDF.存储函数.用户自定义变量.临时表.mysql库中系统表.或者包含列级别 ...
- 1."问吧APP"客户需求调查分析
产品名称:问吧 产品功能:实时提问回答和搜索 开发原因:任何人都会遇到问题,网上虽然有很多回答,但是互联网的信息错综复杂,开发这个APP就是为了让网络求助更加的合理有效,清除网络上的垃圾信息. 为知大 ...