/**
* 设置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. Unity Lighting - Choosing a Color Space 选择色彩空间(四)

      Choosing a Color Space 选择色彩空间 In addition to selecting a rendering path, it’s important to choose ...

  2. python模块的作用和说明

    Python模块 如果你从Python解释器退出并再次进入,之前的定义(函数和变量)都会丢失.因此,如果你想编写一个稍长些的程序,最好使用文本编辑器为解释器准备输入并将该文件作为输入运行.这被称作编写 ...

  3. [T-ARA][HUE]

    歌词来源:http://music.163.com/#/song?id=22704406 wa du seu mo geum to yo do ga tae 어딜가도 스페셜한게 없어 [eo-dil ...

  4. 到底什么是BFC、IFC、GFC和FFC,次奥?

    软件开发的一般被称为民工,搞前端的,有人形容为是掏粪工,说白了连民工级别高都没有.说直接点就是个制作界面的,注意,连设计界面的都算不上,一般前端都是拿着设计稿去照这样子开发的. 说这些无非是觉得前端前 ...

  5. php命名空间学习笔记。

    为什么要用命名空间? 在PHP中,命名空间用来解决在编写类库或应用程序时创建可重用的代码如类或函数时碰到的两类问题: 用户编写的代码 与  PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲 ...

  6. 第七次作业PSP

    psp 进度条 代码累积折线图 博文累积折线图 psp饼状图

  7. 第17次Scrum会议(10/29)【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/29 17:20~17:42,总计22min.地点:东北师 ...

  8. PSP DAILY的NABCD分析

    1) N (Need 需求) PSP Daily 解决了用户(软件工程课上学生)记录例行报告.写每周PSP表格和统计的需求.潜在用户还有未来该课堂的学生和需要用PSP方法记录任务完成时间和统计的学习者 ...

  9. Week4_Linux书本一二两章

    第一章的学习内容就是对Linux内核有一个基本的了解,同时知道一些关于Linux的知识. 学习Linux,可以自己有一台装有Linux操作系统的机器,源代码的作用无可替代: Linux发展历程简介:L ...

  10. 软工1816 · BETA 版冲刺前准备

    任务博客 组长博客 总的来讲Alpha阶段我们计划中的工作是如期完成的.不过由于这样那样的原因,前后端各个任务完成度不算非常高,距离完成一个真正好用.完美的软件还有所差距. 过去存在的问题 测试工作未 ...