二次封装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已经建好,所以我们直接在服务 ...
随机推荐
- spring第一章
spring第一章 一.概述 Spring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的.Spring使用基本的JavaBean来完成以前只可能由EJB完成的 ...
- Paper Reading - Deep Visual-Semantic Alignments for Generating Image Descriptions ( CVPR 2015 )
Link of the Paper: https://arxiv.org/abs/1412.2306 Main Points: An Alignment Model: Convolutional Ne ...
- Visual Studio 调试时无法命中断点
1.查看代码优化是否勾选,如有去掉勾选 2.确保是在Debug模式下设置的断点 3.确保在启动时未修改代码即“要求源文件和原始版本完全匹配” 4.DLL的引用问题
- Weighted Median
For n elements x1, x2, ..., xn with positive integer weights w1, w2, ..., wn. The weighted median is ...
- Improving the Safety, Scalability, and Efficiency of Network Function State Transfers
Improving the Safety, Scalability, and Efficiency of Network Function State Transfers 来源:ACM SIGCOMM ...
- 第二次c艹作业
1,c语言实现方法:按照电梯运行方式,改变被定义为全局变量的结构体的数值. c艹实现方法:用类来存放电梯的属性,整个过程都是对类操作. 两者不同:c语言是面向过程的,整个函数里都要对电梯的参数进行修改 ...
- Android工程方法数超过64k,The number of method references in a .dex file cannot exceed 64K.
最近将一个老的Eclipse项目转到Android Studio后,用gradle添加了几个依赖,项目可以make,但是一旦run就报错 Error:The number of method refe ...
- 使用RStudio学习一个简单神经网络
数据准备 1.收集数据 UC Irvine Machine Learning Repository-Concrete Compressive Strength Data Set 把下载到的Concre ...
- PAT 甲级 1099 Build A Binary Search Tree
https://pintia.cn/problem-sets/994805342720868352/problems/994805367987355648 A Binary Search Tree ( ...
- windows下面安装python3遇到的没有添加到环境变量的问题
windows下面安装python3出现的问题 在官网上面下载最新版的安装包进行安装,并勾选Add Python 3.5 to PATH 安装的过程中可能会出现没有添加到PATH路径的情况 默认的安装 ...