JS组件系列的Bootstrap表组件工件[最后一章]

引导表系列：

JS组件工件引导表的详细说明(基础版)。

JS系列的引导表组件工件[最后一章]

JS系列的引导表组件工件[II。父子表和行列序列]

Bootstrap Table是以表格形式显示的轻量级、功能丰富的数据，支持单选、复选框、排序、分页、显示/隐藏列、固定标题滚动表、响应式设计、Ajax加载JSON数据、点击排序列、卡片视图等。然后，本文将向您介绍JS组件系列的Bootstrap表组件工件，并一起学习。

一、效果展示。

1.表格线条样式。

例如，我们有一个显示订单页面的要求，不同状态的订单显示不同的颜色，如图所示：

2.按行编辑表格。

在第一篇文章中，有公园的朋友问博主是否可以支持线内编辑的效果，得到的回答是肯定的。我们先来看看效果：

编辑前。

点击单元格数据。

经过编辑整理。

3.合并表和列。

博主认为合并行和列是很常见的，尤其是做页面报表的时候。我们先来看看效果：

当前页面显示不完整。点击进入，看一看。最近怎么样？不错吧。

4.表格数据的导出。

关于表数据导出，引导表支持三种导出模式：基本、全部、选中。即当前页面数据导出、所有数据导出和选中数据导出。它还支持导出各种类型的文件，如常见的excel、xml、json等格式。

将当前页面导出到excel。

导出表中的所有数据。

导出选定的行数据。

至于其他类型文件的导出，基本和excel一样，所以我们就不展示效果了。

二、表格行样式代码示例。

关于表格行的样式设置，另一个是它最基本的功能之一，那为什么要放在第三篇呢？因为博主认为这个功能可能在任何地方都会用到。当然效果并不难，用jQuery设置tr的背景色就可以实现，但是博主认为既然bootstrap table提供了设置行背景色的机制，为什么不用它内置的api呢？让我们看看如何实现它。

初始化表单时。

//初始化表$ ('# TB _ order ')。引导表({url:'/tablestyle/getorder '，//请求后台URL(*)method: 'get '，//请求方法(*)/*)//toolbar: '#toolbar '，//工具按钮使用哪个容器Stried: true？//是否显示行间距颜色Cache3360 False？//是否使用缓存默认为真，因此需要将此属性(*) Pagination 3360设置为真。//是否显示分页(*)sortable: false。//是否启用排序sortOrder: 'asc '，//排序方法query params 3360 otableinit . query params，//传递参数(*) sidepagination :' server '，//分页方法：客户端客户端分页，服务器分页(*)pageNumber: 1，//初始化并加载第一页，第一页默认pagesize: 10，//每页记录行数(*) pagelist3360 [10，25，50，100]，//number严格搜索：真和显示列3360真。//是否显示所有列showRefresh: true，//是否显示刷新按钮minimumcountcolumns3360 2，//允许的最小列数clicktoselect3360 true，//是否启用对选中行的点击height: 500，//行高，如果没有设置height属性，表格会根据记录数自动感受到表格高度uniqueid:' id '。//每行的唯一标识符一般是主键列showtoggle: true。//对于详细视图和列表视图，是否显示切换按钮cardview3360 false。//是否显示detailView: false。//是否显示父子表rowstyle:函数(row，index){//5[' active '，' success '，' info '，' warning '，' dancer']中有5个值表示颜色；var strclass=If (row。ORDER_STATUS=='待安排'){strclass='成功'；//还有一个活动的} else if(行。order _ status==' deleted '){ str class=' dancer '；} else { return {}返回{ classs:strclass } }，列3360 [{checkbox:true}，{field3360' order _ no '，title:' order number'}，{field3360' order _ type '，' order type'}，{field:' order _ status '，title:' order status'}，{field3360 '备注' }，]})；其实关键在于这个参数：

Row style :函数(Row，index){//有5个值代表5种颜色['active '，' success '，' info '，' warning '，' dancer ']；var strclass=If (row。ORDER_STATUS=='待安排'){strclass='成功'；//还有一个活动的} else if(行。order _ status==' deleted '){ str class=' dancer '；} else { return {} return { class s 3360 str class } }，bootstrap表支持五种表行背景色，分别为“active”、“success”、“info”、“warning”和“dancer”。至于每个对应的背景色，可以通过运行代码来查看。博主第一次使用这个方法的时候也研究了很久这个方法的返回值。根据引导表规则，必须返回json格式的对象类型，例如：{ class s 3360 str class }。

三、表格行编辑代码示例。

关于表内联编辑，需要使用由引导表扩展的几个js文件。

1.引入额外的js文件。

link rel='样式表' href='//raw git.com/vitalets/x-可编辑/master/dist/bootstrap 3-可编辑/CSS/bootstrap 3-可编辑. CSS ' script src=' http://raw git.com/vitalets/x-可编辑/master/dist/bootstrap 3-可编辑/js/bootstrap 3-可编辑. js '/script script src=' http : ~/Content/bootstrap-table/extensions/Editable/bootstrap-table-可编辑. js'/script2。在cshtml页面上定义表时，添加两个属性。

表id=' tb _ departments数据-字段=' name ' data-edited=' true '部门名称/Th数据-字段='ParentName '上级部门/th数据-字段=' level ' data-edited=' true '部门级别/th数据-字段=' desc ' data-edited=' true ' description/Th/tr/the ad/table如果用js初始化，则编写如下：

{ field :“name”，title :“name”，editable:true}3。在js中初始化表单时，注册并编辑保存的事件。

$('#tb_departments ').bootstrapTable({ URL : '/可编辑/GetDepartment '，//请求后台的URL(*)method: 'get '，//请求方式(*)toolbar: '#toolbar '，//工具按钮用哪个容器striped: true，//是否显示行间隔色cache: false，//是否使用缓存，默认为没错，所以一般情况下需要设置一下这个属性(*)分页： true，//是否显示分页(*)sortable: false，//是否启用排序sortOrder: 'asc '，//排序方式查询参数3360 otableinit。查询参数，//传递参数(*)侧分页："服务器",//分页方式：客户端客户端分页服务器服务端分页(*)页码： 1,//初始化加载第一页，默认第一页pageSize: 10，//每页的记录行数(*)onEditableSave:函数（字段、行、oldValue、$el) {$ .ajax({type: 'post '，url: '/Editable/Edit '，数据： { strjs : JSON。stringify(row))}，成功：函数（数据，状态){if(状态=“成功”){警报('编辑成功');}}，错误：函数(){警报('错误')；}，完成：函数(){ } })；}});重点还是看看这个事件的处理方法

onEditableSave:函数（字段、行、oldValue、$el) {$ .ajax({type: 'post '，url: '/Editable/Edit '，数据： { strjs : JSON。stringify(row))}，成功：函数（数据，状态){if(状态=“成功”){警报('编辑成功');}}，错误：函数(){警报('错误')；}，完成：函数(){ } })；} 对应的方法里面需要自己处理保存的逻辑。四个参数字段，行，旧值，$el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的框架对象。

四、表格行列合并代码示例

表格的行列合并功能不用引用其他的射流研究…文件，只需要在模板页面使用桌子的跨列数和跨行数即可实现。

1、cshtml页面

表id=' TB _ report ' dtrth colspan=' 4 ' data-valign=' middle ' data-align=' center '第一季度/thth col span=' 4 ' data-valign=' middle ' data-align=' center '第二季度/thth col span=' 4 ' data-valign=' middle ' data-align=' center '第三季度/thth col span=' 4 ' data-valign=' middle ' data-align=' center '第四季度/thth data-field=' TotalCount ' row span=' 2 ' data-valign=' middle ' data-align=' center '年度汇总/th/trth数据-字段='JanCount '数据-对齐='中心'一月/thth data-field=' FeBcount ' data-align=' center '二月/thth data-field=' MarCount ' data-align=' center '三月/th数据-字段='第一季度'数据-对齐='中心'第一季度/th数据-字段=' AprCount '数据-对齐='中心'四月/thth data-field=' MayCount ' data-align=' center '五月/thth data-field=' jun count ' data-align=' center '六月/th数据-字段='第二季度'数据-对齐='中心'第二季度/th数据字段=' 7月计数'数据对齐='中心'七月/th数据-字段='AguCount '数据-对齐='中心'八月/thth data-field=' Sepcount ' data-align=' center '九月/thth数据字段='第三季度' 数据对齐='中心'第三季度/th数据字段='OctCount '数据对齐='中心'十月/thth data-field=' NOvCOunt ' data-align=' center '十一月/th数据-字段='DecCount '数据-对齐='中心'十二月第/个数据字段='第四季度'数据-对齐='中心'第四季度/th/tr/thead/表2、js初始化并无特殊

$ ('# TB _ report ')。bootstraptable({ URL : '/group columns/getreport '，//请求后台URL(*)method: 'get '，//请求方法(*) toolbar3360' # toolbar '，//工具按钮使用哪个容器？//是否显示行间距颜色Cache: false？//是否使用缓存？默认值为真，因此需要将此属性(*) Pagination 3360设置为真。//是否显示分页(*)sortOrder: 'asc '。//排序方式：QueryParams : otableInit。QueryParams，//传递参数(*) sidePagination 3360' server '，//分页方法：客户端客户端分页，服务器服务器分页(*))page number : 1，///初始化并加载第一页。默认页面页面大小： 10，//每页记录行数(*)页面列表： [10，25，50，100]，//每页可选行数(*)；嗯，不是很简单。当然，已经说过可以直接在cshtml中使用table的属性来设置url和分页等信息，而不需要js初始化。事实上，如果我们查看它的api，我们会发现它初始化的每个属性都对应于table的一个属性。类型，例如

如果你的表单没有任何特殊事件需要处理，那就完全没有问题。

五、表格数据导出代码示例。

表的导出功能也需要一些扩展的js支持。

1.引入额外的js文件。

script src=' http : ~/content/bootstrap-table/extensions/export/bootstrap-table-export . js '/script script src=' http://raw git.com/hhurz/tableexport . jquery . plugin/master/tableexport . js '/script 2。

$ ('# TB _ departments ')。引导表({ URL : '/export/getdepartment '，//请求后台URL(*)method: 'get '，//请求方法(*) toolbar3360' # toolbar '，//工具按钮使用哪个容器？//是否显示行间距颜色Cache: false？//是否使用缓存？默认值为真，因此有必要将此属性(*) Pagination 3360设置为真。//是否显示分页(*)sortable: false。//是否启用排序sortOrder: 'asc '，//排序方法query params 3360 otableinit . query params，//传递参数(*) sidepagination :' client '，//分页方法：client client paging，Server paging(*)page number : 1，//初始化并加载第一页，默认pageSize: 10，//每页记录行数(*) pagelist3360 [10，25，50，100]，//每页可选行数显示export:为真。//是否显示导出的exportdatatype :' basic '，//basic '，' all '，' selected '。列3360 [{checkbox3360 true}，{field3360' name '，' department name'}，{field:' parent name '，title: ' superior department ' }，{field3360' level '，title3360' department level'}，{}，{field: 'Desc '，title:' description'}，]。还是看重点：这两个属性。

显示export:为真。//Show export datatype : ' basic '，//basic '，' all '，' selected '。显示导出指示是否显示导出按钮，导出数据类型指示导出模式是当前页面、所有数据还是选定数据。不及物动词摘要

这就是上述函数的效果和简单的实现代码。博主发现有几个问题需要解决。

1.线内编辑的功能是将每一个单元格提交到后台，会造成数据库频繁操作，这是不适合的。不知道有没有更好的方法把每一行提交到后台。

2.虽然导出功能很好用，但可惜不支持IE浏览器。博主试了一下官网上面的例子，好像IE不能导出。有待核实。

以上就是边肖给大家介绍的JS组件系列的Bootstrap表组件神器【最终章】的相关内容。希望对你有帮助！