bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了,不多说废话,开始我们的干货之旅吧。
bootstrap table系列:
JS组件系列——表格组件神器:bootstrap table
JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
一、效果展示
1、表格行样式
比如我们有一个显示订单页面的需求,不同状态的订单显示不同的颜色,如图:
2、表格行内编辑
第一篇的时候有园友就问过博主是否可以支持行内编辑的效果,答案是肯定的。我们先来看看效果:
编辑前
点击某个单元格数据
编辑后完成后
3、表格行列合并
关于行列合并的需求博主觉得是非常常见的,尤其是做页面报表的时候需要用到。先来看看效果:
当前页显示不全,点击进入看看。怎么样?效果还不错吧。
4、表格数据导出
关于表格数据导出,bootstrap table支持三种模式的导出:basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件,比如常见的excel、xml、json等格式。
导出当前页到excel
导出表格所有数据
导出选中行数据
至于其他类型的文件的导出,和excel基本相同,就不做效果展示了。
二、表格行样式代码示例
关于表格行的样式设置,其他是它一个最基础的功能,为什么要把它放在第三篇?是因为博主觉得这功能可能到处都用得着。当然,效果并不难,自己用jQuery设置tr的背景色也可以实现,但是博主觉得,既然bootstrap table提供了机制设置行的背景色,我们何不用它内置的api呢。我们看看如何实现。
初始化表格的时候
复制代码
//初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder', //请求后台的URL()
method: 'get', //请求方式()
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性()
pagination: true, //是否显示分页()
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数()
sidePagination: "server", //分页方式:client客户端分页,server服务端分页()
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数()
pageList: [10, 25, 50, 100], //可供选择的每页的行数()
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
}
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
columns: [{
checkbox: true
}, {
field: 'ORDER_NO',
title: '订单编号'
}, {
field: 'ORDER_TYPE',
title: '订单类型'
}, {
field: 'ORDER_STATUS',
title: '订单状态'
}, {
field: 'REMARK',
title: '备注'
}, ]
});
复制代码
其实重点就在这个参数里面:
复制代码
rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
}
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
复制代码
bootstrap table支持5中表格的行背景色,分别是'active', 'success', 'info', 'warning', 'danger'这五种,至于每种对应的背景颜色,将代码运行起来就可看到。关于这个方法的返回值,博主第一次用的时候也研究了好久,按照bootstrap table的规则,必须返回一个json格式的对象型如: { classes: strclass } 。
三、表格行内编辑代码示例
关于表格行内编辑,需要使用bootstrap table扩展的几个js文件。
1、引入额外的js文件
2、在cshtml页面定义表格时,添加两个属性
复制代码
部门名称上级部门部门级别描述
复制代码
如果是在js里面初始化,写法如下:
{
field: "name",
title: "名称",
editable:true
}
3、在js里面初始化表格的时候注册编辑保存的事件
复制代码
$('#tb_departments').bootstrapTable({
url: '/Editable/GetDepartment', //请求后台的URL()
method: 'get', //请求方式()
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性()
pagination: true, //是否显示分页()
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数()
sidePagination: "server", //分页方式:client客户端分页,server服务端分页()
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
});
复制代码
重点还是看看这个事件的处理方法
复制代码
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
复制代码
对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
四、表格行列合并代码示例
表格的行列合并功能不用引用其他的js文件,只需要在cshtml页面使用table的colspan和rowspan即可实现。
1、cshtml页面
复制代码
第一季度第二季度第三季度第四季度年度汇总一月二月三月第一季度四月五月六月第二季度七月八月九月第三季度十月十一月十二月第四季度
复制代码
2、js初始化并无特殊
复制代码
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport', //请求后台的URL()
method: 'get', //请求方式()
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性()
pagination: true, //是否显示分页()
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数()
sidePagination: "server", //分页方式:client客户端分页,server服务端分页()
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数()
pageList: [10, 25, 50, 100], //可供选择的每页的行数()
});
复制代码
怎么样,有没有很简单。当然,有人说了,你都可以不用js初始化,直接在cshtml里面用table的属性去设置url、分页等信息。确实,如果我们看过它的api,会发现它初始化的每一个属性都对应一个table的属性。型如
如果你的表格没有一些特殊的事件需要处理,这样是完全没有问题的。
五、表格数据导出代码示例
表格数据的导出功能也需要一些扩展的js支持。
1、引入额外的js文件
2、js初始化的时候
复制代码
$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment', //请求后台的URL()
method: 'get', //请求方式()
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性()
pagination: true, //是否显示分页()
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数()
sidePagination: "client", //分页方式:client客户端分页,server服务端分页()
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数()
pageList: [10, 25, 50, 100], //可供选择的每页的行数()
clickToSelect:true,
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部门名称'
}, {
field: 'ParentName',
title: '上级部门'
}, {
field: 'Level',
title: '部门级别'
}, {
field: 'Desc',
title: '描述'
}, ]
});
复制代码
还是来看重点:这两个属性
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
showExport表示是否显示导出的按钮,exportDataType表示导出的模式是当前页、所有数据还是选中数据。
六、总结
以上就是功能的效果以及实现的简单代码。博主发现有几个问题有待解决。
1、行内编辑的功能是每一个单元格提交到后台,这样会造成数据库的频繁操作,感觉不太合适。不知道有没有更好的方式,每行提交到后台。
2、导出的功能虽然很好用,但是遗憾的是不支持IE浏览器,博主试过官网上面的example,好像IE也导出不了。待验证。
bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table相关推荐
- bootstrapr表格父子框_JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- ElementUI table组件,表格组件,单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
- java表格组件_表格组件 java
package 表格组件; import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Example ...
- bootstrap表格插件php,bootstrap table表格插件使用详解
bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCou ...
- CSS设置表格行列,给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
- bootstrap表格 行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案:x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- 【JS组件系列】——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- bootstrap表格 行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
最新文章
- win合适做服务器的系统,win系统做云服务器
- 用C语言编写万年历6,C语言编写万年历
- C# ToString()方法
- java+synchro_synchrozied,wait()与notify()的理解
- angular 模块构建_我如何在Angular 4和Magento上构建人力资源门户
- 跟老齐学python Django实战第一章错误解决
- 最近和一个创业中的朋友喝茶聊天
- RAR 5.50 控制台使用记录
- python编程入门视频-带学《Python编程:从入门到实践》
- 阿江ASP探针 V 1.92
- 基于jeesit下的工作流开发步骤
- java 图片md5码_java 对图片进行MD5算法
- 【知识兔】两列Excel数据快速合并为一列,你会哪种方法?
- 数据结构 第2版 第二版 陈越_高中数学选学---人教A版选修2-1第二章第二节椭圆...
- Axure设计原型如何如何插入视频
- 传智播客mysql 下载_传智播客mysqlppt
- Speedoffice(word)如何调整页眉位置
- 清朝后宫佳丽的真实照片
- 推荐三款动态壁纸软件,足够让你的桌面惊艳!
- stata实现经济生态的空间杜宾模型