二次封装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已经建好,所以我们直接在服务 ...
随机推荐
- vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- 003 -- Dubbo简单介绍
1:Dubbo的基本概念 dubbo是阿里巴巴SOA服务治理 方案的核心框架,每天为20000+个服务次的数据量访问支持.dubbo是一个分布式的服务框架,致力于提供高性能和透明化的RPC远程服务调用 ...
- Yii2 yii\helpers\ArrayHelper
yii\helpers\ArrayHelper 是一个数组辅助类,提供额外的数组功能函数 toArray($object, $properties = [], $recursive = true) C ...
- 常用的不易记忆的css自定义代码
在制作页面时,经常会遇到需要自定义一些标签的默认行为(如:input的占位符等),但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录.下面是我经常用到的一些重设默认行为的css. 1.占 ...
- 作业要求20181016-3 Alpha阶段第1周/共2周 Scrum立会报告+燃尽图 01
此次作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 Scrum master:范洪达 一.小组介绍 组长:王一可 组员 ...
- Beta冲刺第二周王者荣耀交流协会第三次会议
1.例会照片: 成员王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐 master:袁玥 2.时间跨度: 2017年11月19日 17:00 — 17:11,总计11分钟. 3.地 点: 一食堂 ...
- [转]Android试验:如果View的ID相同会出现什么效果?
1.实验:通过布局编辑器强行指定两个button id相同,然后在代码中通过findViewById()获得句柄后修改其文本. 实验结果:只有一个button的文本变化了,另一个不受影响. 2.实 ...
- sql高级主题资料(网络复制)
SQL Server 常用高级语法笔记 自从用了EF后很少写sql和存储过程了,今天需要写个比较复杂的报告,翻出了之前的笔记做参考,感觉这个笔记还是很有用的,因此发出来和大家分享. 1.case. ...
- C++对象内存布局测试总结
C++对象内存布局测试总结 http://hi.baidu.com/����/blog/item/826d38ff13c32e3a5d6008e8.html 上文是半年前对虚函数.虚拟继承的理解.可能 ...
- TCP系列44—拥塞控制—7、SACK关闭的快速恢复
) return; delta = ssthresh - in_flight; prr_delivered += newly_acked_sacked; if (delta < 0 ...