-
Bootstrap table
2017-12-06 22:31:32Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能 -
Bootstrap Table API 中文版（完整翻译文档）
2017-09-11 20:20:27*$('#table').bootstrapTable({}); *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽 *最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了...展开全文Bootstrap table API 中文文档（完整翻译文档）
*$(’#table’).bootstrapTable({});
*看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽
*最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型，
*默认值不翻译，例如：“class”、"id"等不翻译。
*有错请提出，会及时改正，谢谢。
如果想转请评论留个言并注明原博 @Sclifftop https://blog.csdn.net/S_clifftop/article/details/77937356给我评论点赞，听到没有，臭弟弟
- “名称”可以写在
$('#table').bootstrapTable({});的大括号中，可以定义一些想要的值，如：
$("#realTime_Table").bootstrapTable({ search: true, pagination: false, pageSize: 15, pageList: [5, 10, 15, 20], showColumns: true, showRefresh: false, showToggle: true, locale: "zh-CN", striped: true });- “属性”放在声明表内，如：
<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!> <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20"> <thead> <tr > <th data-sortable="true" data-field="realTimeDate">日期</th> <th data-sortable="true" data-field="newPlayerNum">新增用户</th> <th data-sortable="true" data-field="activePlayerNum">活跃用户</th> </tr> </thead> <tbody> </tbody> </table>- 如果名称和属性功能类似，则任意一个地方就够了，不用重复定义，有的属性写在js里比名称写在声明表中更为简单，or vice verse（有的属性必须要写，对应的名称只是表示是否启用那个属性）
表的各项(Table options )
定义在 jQuery.fn.bootstrapTable.defaults 文件内
名称 属性 类型 默认值 作用描述 - data-toggle String table 只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用
默认有写data-toggle="table",data-toggle应该知道吧，常用的有"tooltip、popover等等"，这边就不说了classes data-classes String table table-hover 表的class属性，如果没有自己定义，则默认有边框，并且当鼠标悬浮在那一行，背景会变为浅灰色. sortClass data-sort-class String undefined 声明表格td的class名，代表此列元素的class名将被排序 height data-height Number undefined 表格的高度 undefinedText data-undefined-text String - 当不写任何内容默认显示'-' striped data-striped Boolean false 默认false，当设为true，则每行表格的背景会显示灰白相间 sortName data-sort-name String undefined 定义哪一列的值会被排序，写data-field的自定义名，没定义默认都不排列，同下面的sortOrder结合使用，没写的话列默认递增（asc） sortOrder data-sort-order String asc 同上面的结合使用，默认递增（asc），也可设为递减（desc） sortStable data-sort-stable Boolean false （别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加'_position'属性 iconsPrefix data-icons-prefix String glyphicon 定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用 iconSize data-icon-size String undefined 定义的图标大小：
- undefined =>默认表示默认的按钮尺寸（btn）
- xs =>超小按钮的尺寸（btn-xs）
- sm =>小按钮的尺寸（btn-sm）
- lg =>大按钮的尺寸（btn-lg）buttonsClass data-buttons-class String default 按钮的类，默认为default。
- 可选的有：primary、danger、warning等等
- 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加"btn-"，默认为btn-default（白色）
- 参考菜鸟教程：Bootstrap 按钮icons data-icons Object { paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus'
}定义在工具栏、分页、详细视图中使用的图标
- 没办法解释，请参考菜鸟教程的图标：Bootstrap 字体图标columns - Array [] 默认空数组，在JS里面定义，field即data-field，title就是每列表头名等等。
- 请参考：查Bootstrap-table的Usagedata - Array [] 被加载的数据。
- 也就是从服务器获取的数据，通过"."运算符获取，例如"data.date/data.anything"，后面是服务器发来的字段名dataField data-data-field String rows - 名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value。
- 原文：获取每行数据json内的key
- 例如：{"name":"zz","age":20}，name和age就是key，如果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯一的ajax data-ajax Function undefined - ajax方法，和jQuery的ajax方法类似
- 参考 BootstrapTable实现定时刷新数据，只是参考，因为那是jQuery的ajax方法method data-method String get 向服务器请求远程数据的方式，默认为'get'，可选'post' url data-url String undefined 向服务器请求的url。
- 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息
下面看看原文：
- 向远程站点请求数据的URL
- 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
Without server-side pagination（没有启用服务端分页 - data1.json）
With server-side pagination（启用服务端分页 - data2.json）cache data-cache Boolean true 默认缓存ajax请求，设为false则禁用缓存 contentType data-content-type String application/json 请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。
- 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串dataType data-data-type String json 期望从服务器获取的数据的类型，默认为json格式字符串 ajaxOptions data-ajax-options Object {} 向服务器请求ajax时的附加项，默认无附加
- 参考 jQuery.ajax()queryParams data-query-params Function function(params){
return params;}当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。
- queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else
- params包括：pageSize，pageNumber，searchText，sortName，sortOrder
- 当return false，请求则终止queryParamsType data-query-params-type String limit 默认"limit"，设置该属性用来发送符合RESTful格式的参数 responseHandler data-response-handler Function function(res){
return res;}在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据） pagination data-pagination Boolean false 默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示 paginationLoop data-pagination-loop Boolean true 默认true，分页条无限循环 onlyInfoPagination data-only-info-pagination Boolean false 前提：pagination设为true，启用了分页功能。
- 默认false，设为true显示总记录数sidePagination data-side-pagination String client 设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法
- 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
Without server-side pagination（没有启用服务端分页）
With server-side pagination（启用服务端分页）pageNumber data-page-number Number 1 前提：pagination设为true，启用了分页功能。
- 默认第1页，用于设置初始的页数pageSize data-page-size Number 10 前提：pagination设为true，启用了分页功能。
- 默认每页显示10条记录，用于设置每页初始显示的条数pageList data-page-list Array [10, 25, 50, 100] 前提：pagination设为true，启用了分页功能。
- 默认为[10, 25, 50, 100]，即可以选择"每页显示10/25/50/100条记录"，用于设置选择每页显示的条数selectItemName data-select-item-name String btSelectItem radio（单选按钮）或checkbox（复选框）的字段名 smartDisplay data-smart-display Boolean true 默认为true，会 机智地（<_<）根据情况显示分页（pagination）或卡片视图（card view）escape data-escape Boolean false 跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，' search data-search Boolean false 默认false不显示表格右上方搜索框 ，可设为true，在搜索框内只要输入内容即开始搜索 searchOnEnterKey data-search-on-enter-key Boolean false 默认false不启用，设为true启用，比功能是与上面相比，在搜索框内输入内容并且按下回车键才开始搜索 strictSearch data-strict-search Boolean false 设为true，开启精确搜索 searchText data-search-text String "" 前提：search设为true，启用了搜索功能。
- 搜索框初始显示的内容，默认空字符串searchTimeOut data-search-time-out Number 500 前提：search设为true，启用了搜索功能。
- 设置搜索文件的超时时间（原文：Set timeout for search fire，不知道是写错了还是我知识面太窄，"search fire"是什么意思，官方API错了？给我整蒙逼了）trimOnSearch data-trim-on-search Boolean true 默认true，自动忽略空格 showHeader data-show-header Boolean true 默认为true显示表头，设为false隐藏 showFooter data-show-footer Boolean false 默认为false隐藏表尾，设为true显示 showColumns data-show-columns Boolean false 默认为false隐藏某列下拉菜单，设为true显示 showRefresh data-show-refresh Boolean false 默认为false隐藏刷新按钮，设为true显示 showToggle data-show-toggle Boolean false 默认为false隐藏视图切换按钮，设为true显示 新版的CSDN有bug，所以其余的Table options另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]
名称 属性 类型 默认值 作用描述 showPaginationSwitch data-show-pagination-switch Boolean false 默认为false隐藏每页数据条数选择，设为true显示 minimumCountColumns data-minimum-count-columns Number 1 每列的下拉菜单最小数 idField data-id-field String undefined 表明哪个是字段是标识字段 uniqueId data-unique-id String undefined 表明每行唯 一的标识符 cardView data-card-view Boolean false 默认false，设为true显示card view（卡片视图） detailView data-detail-view Boolean false 默认false，设为true显示detail view（细节视图） detailFormatter data-detail-formatter Function function(index, row, element){
return '';}前提：detailView设为true，启用了显示detail view。
- 用于格式化细节视图
- 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery elementsearchAlign data-search-align String right 搜索框的位置，默认right（最右），可选left buttonsAlign data-buttons-align String right 工具栏按钮的位置，默认right（最右），可选left toolbarAlign data-toolbar-align String left 自定义工具栏的位置，默认right（最右），可选left paginationVAlign data-pagination-v-align String bottom 分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条） paginationHAlign data-pagination-h-align String right 分页条水平方向的位置，默认right（最右），可选left paginationDetailHAlign data-pagination-detail-h-align String left 如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录 每页显示 8 条记录”，默认left（最左），可选right paginationPreText data-pagination-pre-text String ‹ 还是举例子，如果你内容太多，底部最右边会显示："‹ 1 2 3 4 5 ›"来选择页数，默认就是最左边那个符号，下同 paginationNextText data-pagination-next-text String › 参考上面一条 clickToSelect data-click-to-select Boolean false 默认false不响应，设为true则当点击此行的某处时，会自动选中此行的checkbox（复选框）或radiobox（单选按钮） singleSelect data-single-select Boolean false 默认false，设为true则允许复选框仅选择一行 toolbar data-toolbar String | Node undefined jQuery的选择器，例如：#toolbar，.toolbar，或者是DOM 结点 checkboxHeader data-checkbox-header Boolean true 如果你有声明复选框，默认显示表头行的全选复选框，设为false隐藏（就是表格第一行的不显示，从第二行往后都显示） maintainSelected data-maintain-selected Boolean false 设为true则保持被选的那一行的状态 sortable data-sortable Boolean true 默认true，设为false禁用所有的行排列（也就是每列表头不会显示排序的按钮，这个需要在th声明data-sortable="true"，写在js中只是启不启用） slientSort data-silent-sort Boolean true 前提：sidePagination设为server（服务端）
- 默认true，设为false则静默排序数据rowStyle data-row-style Function {} 改变某行的格式，需要两个参数：
- row：此行的数据
- index：此行的索引
支持classes和css，用法如下： function rowStyle(row, index){
return { classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
}; }rowAttributes data-row-attributes Function {} 改变某行的属性，需要两个参数：
- row：此行的数据
- index：此行的索引
支持所有自定义的属性。customSearch data-custom-search Function $.noop 自定义搜索功能（用来代替自带的搜索功能），需要一个参数：
- text：想要搜索的内容
用法如下：
function customSearch(text){
//必须使用'this.data'对数据进行过滤（filter the data，感觉这个词也不用译），不要使用'this.options.data' }customSort data-custom-sort Function $.noop 自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）：
- sortName：需要排序的那列
- sortOrder：排序方式
用法：和上面一样，不用担心，注释也一模一样locale data-locale String undefined 本地化（动词）。
本地化的文件必须被预加载，允许fallback（简单来说就是如果要使用的文件不可用，就可以用别的替代它，例如球场替补，没替补，如果有人受伤了，比赛不就废了），如果加载，将按如下顺序：
- 首先尝试加载的是指定的"本地化"文件
- 然后是'_'（下划线）写成'-'（破折号），并且区域代码被大写的
- 然后是短区域代码（例如：用'fr'代替'fr-CA'）
- 最后使用的是剩下的本地化文件（当没有文件可加载则使用默认的）
如果剩余的undefined，或者是空字符，则使用最后一次使用的那个文件（当没有本地化文件可被加载，则使用自带的'en_US'）footerStyle data-footer-style Function {} 改变footer格式，需要两个参数：
- row：此行的数据
- index：此行的索引
支持classes和css，用法如下：
function rowStyle(value，row, index){
return { css: { "font-weight": "bold" } }; }
列的各项(Column options )
定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内
名称 属性 类型 默认值 作用描述 radio data-radio Boolean false 默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的 checkbox data-checkbox Boolean false 默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定 field data-field String undefined 是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一 title data-title String undefined 这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字 titleTooltip data-title-tooltip String undefined 当悬浮在某控件上，出现提示
- 参考 Bootstrap 提示工具（Tooltip）插件class class/data-class String undefined 没什么好说的，就是class rowspan rowspan/data-rowspan Number undefined 每格所占的行数 colspan colspan/data-colspan Number undefined 每格所占的列数 align data-align String undefined 每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中） halign data-halign String undefined table header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中） falign data-falign String undefined table footer（表脚，就这样译，任性，其实随便译啦，知道就好）的对齐方式，有：left（靠左）、right（靠右）、center（居中） valign data-valign String undefined 每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下） width data-width Number（单位：px或%） undefined 每列的宽度。
- 如果没有自定义宽度，那么宽度会根据内容的宽度自适应。
- 如果表是左适应（left responsive）或者设置的宽度小于内容的宽度，那么，宽度还是会自适应（可以在class或其他的属性中使用 min-width 或 max-width）。
- 你也可以使用"%"作为单位，这样的话，bootstapTable将按百分比划分，如果你想使用"pixels（像素值）"，你可以只写数字（只要不加"%"，单位默认"px"，不嫌麻烦，或者想更清晰，你也可以加上"px"）sortable data-sortable Boolean false 默认false就默认显示，设为true则会被排序 order data-order String asc 默认的排序方式为"asc（升序）"，也可以设为"desc（降序）"。
- 与上面的结合使用，不然都不让排序了，你还考虑什么升降。visible data-visible Boolean true 默认为true显示该列，设为false则隐藏该列。
- 还是很有用的，例如隐藏自定义index列，按某属性排序后会变乱，你可以读取某行的index来进行赋值cardVisible data-card-visible Boolean true 默认为true显示该列，设为false则隐藏。 switchable data-switchable Boolean true 默认为true显示该列，设为false则禁用列项目的选项卡。 clickToSelect data-click-to-select Boolean true 默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮） formatter data-formatter Function undefined 需要此列的对象。
某格的数据转换函数，需要三个参数：
-value： field（字段名）
-row：行的数据
-index：行的（索引）indexfooterFormatter data-footer-formatter Function undefined 需要此列的对象。
某格的数据转换函数，需要一个参数：
-data： 所有行数据的数组
函数需要返回（return）footer某格内所要显示的字符串的格式，还要包括内容events data-events Object undefined 当某格使用formatter函数时，事件监听会响应，需要四个参数：
-event：jQuery事件（参考Events）。
- value：字段名
- row：行数据
- index：此行的index
举个例子：
<th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};sorter data-sorter Function undefined 自定义的排序函数，实现本地排序，需要两个参数：
- a：第一个字段名
- b：第二个字段名sortName data-sort-name String undefined 除了表头默认的sort-name或列的字段名，还可以使用自定义的sort-name
对特殊情况说明：
- 一个列显示的内容或许是"html"代码，如：<b><span style="color:red">abc</span></b>，但是被排列的是html代码中的内容（content）：abccellStyle data-cell-style Function undefined 对某格中显示样式（style）进行改变，需要三个函数：
- value：字段名
- row：行数据
- index：此行的index
- field：行的字段名
支持classes和css，用法如下：
function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }searchable data-searchable Boolean true 默认true，表示此列数据可被查询 searchFormatter data-search-formatter Boolean true 默认true，可使用格式化的数据查询 escape data-escape Boolean false 跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'
事件(Events)
定义事件的格式：
$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
事件名 定义在jQuery中的事件名 参数 作用描述 onAll all.bs.table name, args 当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括：
- name：事件名
- args：事件的数据onClickRow click-row.bs.table row, $element, field 当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：
- row：哪一行（从0开始）
- $element：该行（tr）
- field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
- 参考：Bootstrap Table 双击或单击行获取该行内容onDblClickRow dbl-click-row.bs.table row, $element, field 和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：
- row：哪一行（从0开始）
- $element：该行（tr）
- field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
- 参考：Bootstrap Table 双击或单击行获取该行内容onClickCell click-cell.bs.table field, value, row, $element 当单击某一格，就会触发该事件，所需参数如下：
- field：此格所在列的字段名
- value：此格的数据
- $element：此行的此列，就是此格（td）onDblClickCell dbl-click-cell.bs.table field, value, row, $element 当双击某一格，就会触发该事件，所需参数如下：
- field：此格所在列的字段名
- value：此格的数据
- $element：此行的此列，就是此格（td）onSort sort.bs.table name, order 当对某列进行排序时触发该事件，所需参数如下：
- name：所排序的列的字段名
- order：所排的顺序onCheck check.bs.table row, $element 当选择（check）此行时触发，所需的参数如下：
- row：所选择的行的字段名
- $element：此行的DOM元素onUncheck uncheck.bs.table row, $element 当取消选择（uncheck）此行时触发，所需的参数如下：
- row：所取消选择的行的字段名
- $element：此行的DOM元素onCheckAll check-all.bs.table rows 当全选行时触发，所需的参数如下：
- rows：最近（newly）所选择的行的字段名的数组onUncheckAll uncheck-all.bs.table rows 当取消全选行时触发，所需的参数如下：
- rows：之前或上次（previously）所选择的行的字段名的数组onCheckSome check-some.bs.table rows 当选择（check）某些行（多行，rows）时触发，所需的参数如下：
- rows：之前或上次（previously）所选择的行的字段名的数组onUncheckSome uncheck-some.bs.table rows 当取消选择（uncheck）某些行（多行，rows）时触发，所需的参数如下：
- rows：之前或上次（previously）所选择的行的字段名的数组onLoadSuccess load-success.bs.table data 当所有数据被加载时触发 onLoadError load-error.bs.table status, res 当加载某些数据出现错误时触发 onColumnSwitch column-switch.bs.table field, checked 当某列改变是否可见的状态时触发 onColumnSearch column-search.bs.table field, text 当某列被查询时触发 onPageChange page-change.bs.table number, size 当改变此页所显示的数据条数或改变页码时触发 onSearch search.bs.table text 当查询此表时触发 onToggle toggle.bs.table cardView 当改变表的视图时触发 onPreBody pre-body.bs.table data 当<tbody></tbody>中的内容没显示前触发 onPostBody post-body.bs.table data 当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发 onPostHeader post-header.bs.table none 当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发 onExpandRow expand-row.bs.table index, row, $detail 当查看详细视图（点击查看detail的图标）时触发 onCollapseRow collapse-row.bs.table index, row 当关闭详细视图（再次点击查看detail的图标）时触发 onRefreshOptions refresh-options.bs.table options 当刷新各项后或在初始化表（也包括销毁了再初始化）之前触发 onResetView reset-view.bs.table 当重置（reset）表的视图时触发 onRefresh refresh.bs.table params 当点击刷新按钮（refresh，不是浏览器的，而是表格右上角的刷新按钮）后触发
方法(Methods)
定义方法响应的语法
$('#table').bootstrapTable('method', parameter);方法名 参数 描述 举例 getOptions none 返回各项的object $table.bootstrapTable('getOptions');
- 请查看： getOptionsgetSelections none 返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行） $table.bootstrapTable('getSelections');
- 请查看： getSelectionsgetAllSelections none 返回所有被选的行（原文中：contain search or filter，其实就是你选择的筛选之后的数据），当没有行被选择，则返回空数组 $table.bootstrapTable('getAllSelections');
- 请查看： getAllSelectionsshowAllColumns none 显示所有的列 $table.bootstrapTable('showAllColumns');
- 就是显示所有的列，并没什么可说的hideAllColumns none 隐藏所有的列 $table.bootstrapTable('hideAllColumns');
- 就是隐藏所有的列getData useCurrentPage 获取被加载的表的数据，如果你设置了使用当前页的数据（useCurrentPage），则返回当前页的数据 $table.bootstrapTable('getData');
- 请查看： getDatagetRowByUniqueId id 获取你想要的某行的数据（设置某行的id） $table.bootstrapTable('getRowByUniqueId', 1);后面的1就是你要的那一行的ID
- 请查看： getRowByUniqueIdload data 向表中加载数据，原来的数据将被移除 $table.bootstrapTable('load', data);
- 请查看： load新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档）]
方法名 参数 描述 举例 append data 将数据追加在最后一行后 $table.bootstrapTable('append', data);data可以是数组
- 请查看： appendprepend data 也是追加，只是在第一行之前 $table.bootstrapTable('prepend', data);data可以是数组
- 请查看： prependremove params 移除一行或多行你所选的数据 $table.bootstrapTable('remove', {field: 'id', values: ids});
- id：所需移除的那一行（rows，一或多行）的字段
- values：被移除的行的数组
- 请查看： removeremoveAll - 移除表中所有的数据 $table.bootstrapTable('removeAll');
- 请查看： removeAllremoveByUniqueId - 移除某行数据（设置某行的id） $table.bootstrapTable('removeByUniqueId', 1);后面的1就是你想移除的那一行的ID
- 请查看： removeByUniqueIdinsertRow params 新增一行，所需的参数如下：
- index：你想插入到哪（只要愿意，想插哪就插哪，想插谁就插谁）
- row：你想插入的数据$table.bootstrapTable('insertRow', {index: 1, row: row});
- 请查看： insertRowupdateRow params 更新行数据，所需的参数如下：
- index：所要更新的行的索引（index）
- row：你想换的新的数据$table.bootstrapTable('updateRow', {index: 1, row: row});
- 请查看： updateRow
- 请查看： Bootstrap Table实现定时刷新数据updateByUniqueId params 更新某行数据，所需的参数如下：
- id：你想更新那行的id（唯一），（只要愿意，想换哪个换哪个）
- row：你想换的新的数据$table.bootstrapTable('updateByUniqueId', {id: 3, row: row});
- 请查看： updateByUniqueIdshowRow params 显示特定行，所需的参数至少包括下面所列的一个：
- id：所要显示的行的索引（index）
- uniqueId：那一行的id$table.bootstrapTable('showRow', {index:1});
- 请查看： showRow/hideRowhideRow params 隐藏特定行，所需的参数至少包括下面所列的一个：
- id：所要隐藏的行的索引（index）
- uniqueId：那一行的id$table.bootstrapTable('hideRow', {index:1});
- 请查看： showRow/hideRowgetRowsHidden boolean 获取隐藏的行（官方原话很多，其实总结起来就前面那一句） $table.bootstrapTable('getRowsHidden'); 新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]
方法名 参数 描述 举例 mergeCells options 融合~（把多格合并为一格），所需的参数如下：
- index：所要合并的格所在行的索引（index）
- field：所在列的字段名
- rowspan：合并的行总数目
- colspan：合并的列总数目$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});
- 请查看： mergeCellsupdateCell params 更新某格数据，所需的参数如下：
- index：所要合并的格所在行的索引（index）
- field：所在列的字段名
- value：要换的新的数据
你也可以设置{reinit:false}来禁用表格的再次初始化$table.bootstrapTable('updateCell',{index:index,field:'id',value:value}); refresh params 刷新服务端的数据：
- 可以设置{silent:true}来偷偷地（<_<）刷新
- 设置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改变请求的地址，页数，每页所显示的条数
- 可以设置{query:{foo:'bar'}}增加特定的参数$table.bootstrapTable('refresh');
- 请查看： refreshrefreshOptions options 看例子吧 - 请查看： refreshOptions resetSearch text 重置搜索的文本（text） - 请查看： resetSearch showLoading none 显示正在加载…… - 请查看： showLoading/hideLoading hideLoading none 隐藏正在加载…… - 请查看： showLoading/hideLoading checkAll none 选择当前页的所有行 $table.bootstrapTable('checkAll');
- 请查看： checkAll/uncheckAlluncheckAll none 取消选择当前页的所有行 $table.bootstrapTable('uncheckAll');
- 请查看： checkAll/uncheckAllcheckInvert none 反向选择，不难理解吧 $table.bootstrapTable('checkInvert'); check index 选择某一行，索引（index）从0开始 $table.bootstrapTable('check', 1);
- 请查看： check/uncheckuncheck index 取消选择某一行，索引（index）从0开始 $table.bootstrapTable('uncheck', 1);
- 请查看： check/uncheckcheckBy params 通过数组选择某一行，所需的参数如下：
- field：所要选的字段名
- values：所要选的那些值（数组）官方没，啊，有例纸：
- $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2","value3"]});
- 请查看： checkBy/uncheckByuncheckBy params 通过数组选择某一行，所需的参数如下：
- field：所要取消选择的字段名
- values：所要取消选择的那些值（数组）$("#table").bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]});
- 请查看： checkBy/uncheckByresetView params 改变表格的样式，例如改变表格的高度（height） $table.bootstrapTable('resetView');
- 请查看： resetViewresetWidth none 自动改变表头和表脚（就译成脚，任性）的宽度来适应每列的宽度 $table.bootstrapTable('resetWidth'); destroy none 销毁表格 A！T！T！A！C！K！ $table.bootstrapTable('destroy');
- 请查看： destroyshowColumn field 显示特定的列 $table.bootstrapTable('showColumn', 'name');
- 请查看： showColumn/hideCoulumnhideColumn field 隐藏特定的列 $table.bootstrapTable('hideColumn', 'name');
- 请查看： showColumn/hideCoulumn新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]
方法名 参数 描述 举例 getHiddenColumns - 获取所有隐藏的列 $table.bootstrapTable('getHiddenColumns'); getVisibleColumns - 获取所有显示的列 $table.bootstrapTable('getVisibleColumns'); scrollTo value 滚……到哪个位置，单位是'px'，如果设为'bottom'，嗖，恭喜你已到表尾 $table.bootstrapTable('scrollTo', 0);
- 请查看： scrollTogetScrollPosition none 获取当前所滚到的位置，单位你懂得，就是'px' $table.bootstrapTable('getScrollPosition'); filterBy none 只能在客户端（client-side，相对server-side）这边用，过滤表中的数据
例如：
- 可以设置{age:10}来只显示age为10的数据
- 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: ["blue", "red", "green"]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据$table.bootstrapTable('filterBy', { id: [1, 2, 3] });
- 请查看： filterByselectPage page 跳转到特定的页面 $table.bootstrapTable('selectPage', 1);
- 请查看： selectPage/prevPage/nextPageprevPage none 跳转到上一页 $table.bootstrapTable('prevPage');
- 请查看： selectPage/prevPage/nextPagenextPage none 跳转到下一页 $table.bootstrapTable('nextPage');
- 请查看： selectPage/prevPage/nextPagetogglePagination none 词穷，请看例纸 $table.bootstrapTable('togglePagination');
- 请查看： togglePaginationtoggleView none 改变视图 $table.bootstrapTable('toggleView');
- 请查看： toggleViewexpandRow index 可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用
- 通过参数index来展开此列的详细视图- 请查看： expandRow-collapseRow collapseRow index 可使用条件：detail view设为了true
- 通过参数index来关闭此列的详细视图- 请查看： expandRow-collapseRow expandAllRows
新版有更改（原来为"expandAllRow"），下同
感谢 @zhq449681061is subtable 可使用条件：detail view设为了true
- 展开所有列的详细视图$table.bootstrapTable('expandAllRows');
- 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的collapseAllRows is subtable 可使用条件：detail view设为了true
- 关闭所有列的详细视图$table.bootstrapTable('collapseAllRows');
- 参考上面
本地化，切换为另一种语言(Localizations)
默认显示英文，如果想使用中文，首先引入：
<script src="bootstrap-table-zh-CN.js"></script>然后是三种声明使用的方法（个人只使用第二、三种），如下：
- 第一种：
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);- 第二种：
<table data-toggle="table" data-locale="zh-CN"></table>- 第三种：
$('table').bootstrapTable({locale:'zh-CN'});
- 以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了，下面数字我就默认15，这个实际要看你设置的是多少
名称 参数 默认 说明 formatLoadingMessage - 'Loading, please wait…' “加载中，请等待……” formatRecordsPerPage pageNumber '%s records per page' “每页显示 15 条记录” formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows' “显示第 1 到第 15 条记录” formatDetailPagination totalRows 'Showing %s rows' “总共 15 条记录” formatSearch - 'Search' “搜索”（占位符） formatNoMatches - 'No matching records found' “没有找到匹配的记录” formatRefresh - 'Refresh' “刷新”（鼠标悬浮显示的文字，下同） formatToggle - 'Toggle' “切换” formatColumns - 'Columns' “列”
有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢
自己做的微信小程序工具 —维尼聚合工具（ 查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等）
其他相关：
- “名称”可以写在
-
Bootstrap Table
2016-10-18 11:04:48Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 http://bootstrap-table.wenzhixin.net.cn/zh-cn/使用...展开全文Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 http://bootstrap-table.wenzhixin.net.cn/zh-cn/
使用：
①.引入需要的JS和CSS
<link rel="stylesheet" href="${basePath}/css/bootstrap..css"> <link rel="stylesheet" href="${basePath}/css/bootstrap-table/bootstrap-table.css"> <script src="${basePath}/js/jquery.min.js"></script> <script src="${basePath}/js/bootstrap.min.js"></script> <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="${basePath}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table-export.js"></script> <script src="${basePath}/js/plugins/bootstrap-table/tableExport.js"></script>②.定义一个空的table
<body> <div class="row base-margin" id="query"> <ol class="breadcrumb"> <li><strong><span style="color: #27a0d7">用户列表</span></strong></li> </ol> <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm"> <div class="form-group"> <label for="orgCode">部门:</label> <select class="form-control" id="orgCode" name="orgCode"> <option value="">默认选择</option> <c:forEach var="data" items="${orgList}"> <option value="${data.orgCode }">${data.orgName }</option> </c:forEach> </select> </div> <div class="form-group"> <label for="userName">名称:</label> <input type="text" class="form-control" name="userName" id="userName" placeholder="请输入名称"> </div> <div class="form-group"> <label >日期:</label> <input placeholder="开始日期" class="form-control layer-date" id="startDate" name="startDate"> <input placeholder="结束日期" class="form-control layer-date" id="endDate" name="endDate"> </div> <div class="form-group"> <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button> </div> <div class="form-group btn-right"> <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用户</button> </div> </form> </div> <div class="container" style="width: 100%"> <table id="demo-table"> </table> </div> </body>③.初始化table表格（建议把初始化的JS代码写到另外的自定义js页面中，代码还挺长的），具体的各个参数可以查看API。
<script type="text/javascript"> $(function () { initTable(); initDate(); }); function doQuery(params){ $('#demo-table').bootstrapTable('refresh'); //刷新表格 } function initTable(){ var url = "user.do?method=listUsers&random="+Math.random(); $('#demo-table').bootstrapTable({ method:'POST', dataType:'json', contentType: "application/x-www-form-urlencoded", cache: false, striped: true, //是否显示行间隔色 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） url:url, height: $(window).height() - 110, width:$(window).width(), showColumns:true, pagination:true, queryParams : queryParams, minimumCountColumns:2, pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 20, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） uniqueId: "id", //每一行的唯一标识，一般为主键列 showExport: true, exportDataType: 'all', responseHandler: responseHandler, columns: [ { field: '', title: 'Sort No.', formatter: function (value, row, index) { return index+1; } }, { field : 'id', title : 'User ID', align : 'center', valign : 'middle', sortable : true }, { field : 'institutionCode', title : 'Institution Code', align : 'center', valign : 'middle', sortable : true }, { field : 'institutionName', title : 'Institution Name', align : 'center', valign : 'middle' }, { field : 'loginId', title : 'Login Name', align : 'center', valign : 'middle', sortable : true }, { field : 'realName', title : 'Real Name', align : 'center', valign : 'middle' }, { field : 'createTime', title : 'Create Time', align : 'center', valign : 'left', formatter : function (value, row, index){ return new Date(value).format('yyyy-MM-dd hh:mm:ss'); } }, { field : 'homeAddress', title : 'Address', align : 'center', valign : 'middle' }] }); } function initDate(){ var start = { elem: '#startDate', format: 'YYYY-MM-DD hh:mm:ss', min: laydate.now(-7), max: laydate.now(), istime: true, istoday: false, choose: function (datas) { end.min = datas; //开始日选好后，重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 } }; var end = { elem: '#endDate', format: 'YYYY-MM-DD hh:mm:ss', min: laydate.now(-7), max: laydate.now(), istime: true, //是否开启时间选择 isclear: true, //是否显示清空 istoday: true, //是否显示今天 issure: true, //是否显示确认 choose: function (datas) { start.max = datas; //结束日选好后，重置开始日的最大日期 } }; laydate(start); laydate(end); } function queryParams(params) { var param = { orgCode : $("#orgCode").val(), userName : $("#userName").val(), startDate : $("#startDate").val(), endDate : $("#endDate").val(), limit : this.limit, // 页面大小 offset : this.offset, // 页码 pageindex : this.pageNumber, pageSize : this.pageSize } return param; } // 用于server 分页，表格数据量太大的话 不想一次查询所有数据，可以使用server分页查询，数据量小的话可以直接把sidePagination: "server" 改为 sidePagination: "client" ，同时去掉responseHandler: responseHandler就可以了， function responseHandler(res) { if (res) { return { "rows" : res.result, "total" : res.totalCount }; } else { return { "rows" : [], "total" : 0 }; } } </script>④. Controller（后台用的是Spring框架）
@ResponseBody @RequestMapping(params = "method=listUsers") public Object listUsers(UserForm form) { int totalCount = userService.getTotalCount(form); if(totalCount > 0){ BasePageResult<User> result = new BasePageResult<User>(); form.setBeginNum(((form.getPageindex()-1)*form.getPageSize())); form.setEndNum((form.getPageindex()*form.getPageSize())); List<User> user = userService.getUserList2(form); result.setTotalCount(totalCount); result.setResult(user); return result; } return null; }⑤. 附上最终的表格
还有就是你们想看后台的，https://github.com/Jstarfish/starfish-demo
这个是我学shiro的时候写的一个例子，用的就是这个，你们可以跳过shiro部分，只看列表的实现。
-
bootstrap table
2019-01-23 17:24:48Bootstrap中文网：http://www.bootcss.com/...Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documenta...展开全文Bootstrap中文网：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/
Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/
Bootstrap Table Getting Start：https://bootstrap-table-docs3.wenzhixin.net.cn/getting-started/
Bootstrap Table CDN:https://www.bootcdn.cn/bootstrap-table/
-
bootstraptable
2018-07-03 17:01:01基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 -
Bootstrap table方法，Bootstrap table事件，配置.pdf
2021-08-27 11:00:40Bootstrap table方法，Bootstrap table事件，配置.pdf -
【Bootstrap Table】bootstrap table知识合集
2018-12-13 22:31:24bootstrap table系列： 【Bootstarp Table】bootstrap table基本使用 【Bootstrap Table】bootstrap table：父子表和行列调序 【Bootstrap Table】bootstrap table 常用功能 相关文档和技术网站小结 Bootstrap...展开全文参考地址：http://www.cnblogs.com/landeanfen/p/4976838.html
文章目录
相关文档和技术网站小结
Bootstrap中文网：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table API 中文版（完整翻译文档）:https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/
Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/
Bootstrap离线API：https://pan.baidu.com/s/1kTERYsf
Bootstrap Table 离线API ：https://pan.baidu.com/s/1c0G3Fu4
这里要说明一点：Bootstrap Table的离线API是博主自己在官网上面保存下来的，样式可能存在问题。一、基本使用
1、Bootstrap Table的引入
Bootstrap的包直接在 http://v3.bootcss.com/ 里面可以找到，版本已经出来4的预览版，但还是建议使用比较稳定的Bootstrap3，目前最新的3.3.5。
然后就是Bootstrap Table的包了，由于它是开源的，我们直接进到它的源码https://github.com/wenzhixin/bootstrap-table里面git下来就好了。然后把这两个包分别加入到项目中。
2、在cshtml页面引用相关组件，并定义好一个空的表格。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>BootStrap Table使用</title> @*1、Jquery组件引用*@ <script src="~/Scripts/jquery-1.10.2.js"></script> @*2、bootstrap组件引用*@ <script src="~/Content/bootstrap/bootstrap.js"></script> <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" /> @*3、bootstrap table组件以及中文包的引用*@ <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" /> <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> @*4、页面Js文件的引用*@ <script src="~/Scripts/Home/Index.js"></script> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">状态</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button> </div> </div> </form> </div> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="tb_departments"></table> </div> </body> </html>引入需要的文件之后，我们最重要的就是定义一个空的table，如上的
<table id="tb_departments"></table>3、Js初始化
$(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 var oButtonInit = new ButtonInit(); oButtonInit.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/Home/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, //每页的记录行数（*） 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, //是否显示父子表 columns: [{ checkbox: true }, { field: 'Name', title: '部门名称' }, { field: 'ParentName', title: '上级部门' }, { field: 'Level', title: '部门级别' }, { field: 'Desc', title: '描述' }, ] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 departmentname: $("#txt_search_departmentname").val(), statu: $("#txt_search_statu").val() }; return temp; }; return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { //初始化页面上面的按钮事件 }; return oInit; };4、在Controller里面对应的方法
public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu) { var lstRes = new List<Department>(); for (var i = 0; i < 50; i++) { var oModel = new Department(); oModel.ID = Guid.NewGuid().ToString(); oModel.Name = "销售部" + i ; oModel.Level = i.ToString(); oModel.Desc = "暂无描述信息"; lstRes.Add(oModel); } var total = lstRes.Count; var rows = lstRes.Skip(offset).Take(limit).ToList(); return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet); }这里有一点需要注意：如果是服务端分页，返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到前端。
5、效果及说明
效果图：
二、表格行样式：不同状态的订单显示不同的颜色
初始化表格的时候
//初始化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文件<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> <script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>2、在cshtml页面定义表格时，添加两个属性
<table id="tb_departments"> <thead> <tr> <th data-field="Name" data-editable="true">部门名称</th> <th data-field="ParentName">上级部门</th> <th data-field="Level" data-editable="true">部门级别</th> <th data-field="Desc" data-editable="true">描述</th> </tr> </thead> </table>如果是在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对象。
四、表格行列合并
1、cshtml页面<table id="tb_report"> <thead> <tr> <th colspan="4" data-valign="middle" data-align="center">第一季度</th> <th colspan="4" data-valign="middle" data-align="center">第二季度</th> <th colspan="4" data-valign="middle" data-align="center">第三季度</th> <th colspan="4" data-valign="middle" data-align="center">第四季度</th> <th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度汇总</th> </tr> <tr> <th data-field="JanCount" data-align="center">一月</th> <th data-field="FebCount" data-align="center">二月</th> <th data-field="MarCount" data-align="center">三月</th> <th data-field="FirstQuarter" data-align="center">第一季度</th> <th data-field="AprCount" data-align="center">四月</th> <th data-field="MayCount" data-align="center">五月</th> <th data-field="JunCount" data-align="center">六月</th> <th data-field="SecondQuarter" data-align="center">第二季度</th> <th data-field="JulCount" data-align="center">七月</th> <th data-field="AguCount" data-align="center">八月</th> <th data-field="SepCount" data-align="center">九月</th> <th data-field="ThirdQuarter" data-align="center">第三季度</th> <th data-field="OctCount" data-align="center">十月</th> <th data-field="NovCount" data-align="center">十一月</th> <th data-field="DecCount" data-align="center">十二月</th> <th data-field="ForthQuarter" data-align="center">第四季度</th> </tr> </thead> </table>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的属性。型如
如果你的表格没有一些特殊的事件需要处理，这样是完全没有问题的。五、表格数据导出
关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。
注意：导出的功能虽然很好用，但是遗憾的是不支持IE浏览器，博主试过官网上面的example，好像IE也导出不了。待验证。
导出当前页到excel
导出表格所有数据
导出选中行数据
至于其他类型的文件的导出，和excel基本相同，就不做效果展示了。1、引入额外的js文件
<script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script> <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>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表示导出的模式是当前页、所有数据还是选中数据。
六、父子表
初始化表格的时候有一个属性“detailView”，将它设置为true，在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。1、初始化表格，注册行展开事件
$("#tb_powerset").bootstrapTable({ url: '/api/MenuApi/GetParentMenu', method: 'get', detailView: true,//父子表 //sidePagination: "server", pageSize: 10, pageList: [10, 25], columns: [{ field: 'MENU_NAME', title: '菜单名称' }, { field: 'MENU_URL', title: '菜单URL' }, { field: 'PARENT_ID', title: '父级菜单' }, { field: 'MENU_LEVEL', title: '菜单级别' }, ], //注册加载子表的事件。注意下这里的三个参数！ onExpandRow: function (index, row, $detail) { oInit.InitSubTable(index, row, $detail); } });还是来看看子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数，
index：父表当前行的行索引。
row：父表当前行的Json数据对象。
$detail：当前行下面创建的新行里面的td对象。
第三个参数尤其重要，因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象，然后我们只需要往它里面填充我们想要的table即可。
2、我们来看oInit.InitSubTable()这个方法
//初始化子表格(无线循环) oInit.InitSubTable = function (index, row, $detail) { var parentid = row.MENU_ID; var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ url: '/api/MenuApi/GetChildrenMenu', method: 'get', queryParams: { strParentID: parentid }, ajaxOptions: { strParentID: parentid }, clickToSelect: true, detailView: true,//父子表 uniqueId: "MENU_ID", pageSize: 10, pageList: [10, 25], columns: [{ checkbox: true }, { field: 'MENU_NAME', title: '菜单名称' }, { field: 'MENU_URL', title: '菜单URL' }, { field: 'PARENT_ID', title: '父级菜单' }, { field: 'MENU_LEVEL', title: '菜单级别' }, ], //无线循环取子表，直到子表里面没有记录 onExpandRow: function (index, row, $Subdetail) { oInit.InitSubTable(index, row, $Subdetail); } }); };由此可以看出生成子表的原理就是创建一个table对象cur_table，然后再注册这个对象的表格初始化即可。
七、行调序
调序前
拖动行调序到第一行
1、需要额外引用两个js文件<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script> <script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>2、在cshtml页面定义表格时，添加两个属性
<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>然后js表格初始化的时候不需要做任何修改，加载出来的表格即可实现行调序的功能。
八、列调序
调序前
拖动列标题调序
调序后
1、额外引用几个js和css<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script> <link rel="stylesheet" href="../assets/examples.css"> <link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>2、在cshtml页面定义表格时，添加一个属性
<table id="tb_departments" data-reorderable-columns="true"></table>其他地方不用做任何修改。加载出来的表格即可实现列调序。
九、列标题搜索
1、引入额外js
<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>2、定义表格属性及表头属性
<table id="tb_roles" data-filter-control="true"> <thead> <tr> <th data-field="ROLE_NAME" data-filter-control="select">角色名称</th> <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th> <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th> </tr> </thead> </table>因为这里定义了表头的属性，所以，js初始化的时候就不用定义列了。
3、js初始化$('#tb_roles').bootstrapTable({ url: '/Role/GetRole', method: 'get', toolbar: '#toolbar', striped: true, cache: false, striped: true, pagination: true, sortable: true, queryParams: function (param) { return param; }, queryParamsType: "limit", detailView: false,//父子表 sidePagination: "server", pageSize: 10, pageList: [10, 25, 50, 100], search: true, showColumns: true, showRefresh: true, minimumCountColumns: 2, clickToSelect: true, });最开始，博主以为这种搜索只能用户客户端分页的情况，可是经过调试发现并非如此，原来搜索的条件都能通过json传递到服务端。我们来看调试的过程
后台接收参数，并反序列化
这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~十、可编辑table——x-editable组件
x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html
首先来看看bootstrap-table-editable.js这个文件
/** * @author zhixin wen <wenzhixin2010@gmail.com> * extensions: https://github.com/vitalets/x-editable */ !function ($) { 'use strict'; $.extend($.fn.bootstrapTable.defaults, { editable: true, onEditableInit: function () { return false; }, onEditableSave: function (field, row, oldValue, $el) { return false; }, onEditableShown: function (field, row, $el, editable) { return false; }, onEditableHidden: function (field, row, $el, reason) { return false; } }); $.extend($.fn.bootstrapTable.Constructor.EVENTS, { 'editable-init.bs.table': 'onEditableInit', 'editable-save.bs.table': 'onEditableSave', 'editable-shown.bs.table': 'onEditableShown', 'editable-hidden.bs.table': 'onEditableHidden' }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _initTable = BootstrapTable.prototype.initTable, _initBody = BootstrapTable.prototype.initBody; BootstrapTable.prototype.initTable = function () { var that = this; _initTable.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.editable) { return; } $.each(this.columns, function (i, column) { if (!column.editable) { return; } var _formatter = column.formatter; column.formatter = function (value, row, index) { var result = _formatter ? _formatter(value, row, index) : value; return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"', '>' + '</a>' ].join(''); }; }); }; BootstrapTable.prototype.initBody = function () { var that = this; _initBody.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.editable) { return; } $.each(this.columns, function (i, column) { if (!column.editable) { return; } that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) .off('save').on('save', function (e, params) { var data = that.getData(), index = $(this).parents('tr[data-index]').data('index'), row = data[index], oldValue = row[column.field]; row[column.field] = params.submitValue; that.trigger('editable-save', column.field, row, oldValue, $(this)); }); that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) .off('shown').on('shown', function (e, editable) { var data = that.getData(), index = $(this).parents('tr[data-index]').data('index'), row = data[index]; that.trigger('editable-shown', column.field, row, $(this), editable); }); that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) .off('hidden').on('hidden', function (e, reason) { var data = that.getData(), index = $(this).parents('tr[data-index]').data('index'), row = data[index]; that.trigger('editable-hidden', column.field, row, $(this), reason); }); }); this.trigger('editable-init'); }; }(jQuery);这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。
2、需要引用的文件如下：
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>文本框
$(function () { $("#tb_user").bootstrapTable({ toolbar: "#toolbar", idField: "Id", pagination: true, showRefresh: true, search: true, clickToSelect: true, queryParams: function (param) { return {}; }, url: "/Editable/GetUsers", columns: [{ checkbox: true }, { field: "UserName", title: "用户名", editable: { type: 'text', title: '用户名', validate: function (v) { if (!v) return '用户名不能为空'; } } }, { field: "Age", title: "年龄", }, { field: "Birthday", title: "生日", formatter: function (value, row, index) { var date = eval('new ' + eval(value).source) return date.format("yyyy-MM-dd"); } }, { field: "DeptName", title: "部门" }, { field: "Hobby", title: "爱好" }], onEditableSave: function (field, row, oldValue, $el) { $.ajax({ type: "post", url: "/Editable/Edit", data: row, dataType: 'JSON', success: function (data, status) { if (status == "success") { alert('提交数据成功'); } }, error: function () { alert('编辑失败'); }, complete: function () { } }); } }); });后台对应的更新方法
public JsonResult Edit(User user) { //更新实体 return Json(new { }, JsonRequestBehavior.AllowGet); }经过测试，用户名这一列基本可以自由编辑。同样，年龄这一列也可改成这样
{ field: "Age", title: "年龄", editable: { type: 'text', title: '年龄', validate: function (v) { if (isNaN(v)) return '年龄必须是数字'; var age = parseInt(v); if (age <= 0) return '年龄必须是正整数'; } } }其他基本不用做任何修改。
代码释疑：上文在初始化的columns属性里面通过editable属性来配置可编辑的参数，注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象，也就是说我们初始化x-editable的时候可以配置哪些属性，在列的editable属性里面也可以同样配置，这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。
时间选择框
{ field: "Birthday", title: "生日", formatter: function (value, row, index) { var date = eval('new ' + eval(value).source) return date.format("yyyy-MM-dd"); }, editable: { type: 'date', title: '生日' } }其他地方不用做任何修改，得到效果：
这是x-editable的默认样式，如果你看着不爽，可以自行配置，x-editable提供了许多配置日期框的参数，如下：
当然，如果精确到时分秒，可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果，看着还不错。
下拉框
{ field: "DeptId", title: "部门", editable: { type: 'select', title: '部门', source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}] } }
当然，这种本地设置数据源的方法肯定是不能满足我们需求的，因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了，比如我们可以这样写：{ field: "DeptId", title: "部门", editable: { type: 'select', title: '部门', source: function () { var result = []; $.ajax({ url: '/Editable/GetDepartments', async: false, type: "get", data: {}, success: function (data, status) { $.each(data, function (key, value) { result.push({ value: value.ID, text: value.Name }); }); } }); return result; } } }后台我们配置一个方法
public JsonResult GetDepartments() { var lstRes = new List<Department>(); lstRes.Add(new Department() { ID = "1", Name = "研发部" }); lstRes.Add(new Department() { ID = "2", Name = "销售部" }); lstRes.Add(new Department() { ID = "3", Name = "行政部" }); lstRes.Add(new Department() { ID = "4", Name = "创意部" }); lstRes.Add(new Department() { ID = "5", Name = "事业部" }); return Json(lstRes, JsonRequestBehavior.AllowGet); }代码释疑：这里有一点需要说明一下，细心的园友可能发现了，我们这里的 field: “DeptId” ，为什么这里要配置DeptId而不是DeptName呢?很简单，因为我们需要和数据源里面的value值对应。
复选框
{ field: "Hobby", title: "爱好", editable: { type: "checklist", separator:",", source: [{ value: 'bsb', text: '篮球' }, { value: 'ftb', text: '足球' }, { value: 'wsm', text: '游泳' }], } }
当然，如果远程数据，也可以使用类似上文的方法去取。问题小结
1、关于中文。
刚开始，博主没有引用 这个包，所以界面找不到记录是显示的是英文，如下：
后来也是查资料了解到，bootstrap table里面原来还有一个中文包，把它添加进来就好了。2、表头宽度不对齐问题。
如果提交之后的文本内容过多，表格的thead里面th的宽度和tbody里面td的宽度不对其的问题。
-
Bootstrap Table 文档
2018-05-04 22:19:45Bootstrap Table 文档，完整的使用手册，Bootstrap Table 文档，完整的使用手册，Bootstrap Table 文档，完整的使用手册， -
bootstrap table list
2021-01-19 17:46:37bootstrap table list -
bootstrap table相关合集(bootstrap-table bootstrap-table-editable bootstrap-editable)
2018-04-11 11:31:47bootstrap table合集(bootstrap-table bootstrap-table-editable bootstrap-editable) bootstrap table js插件，bootstrap table使用比较方便，有点easyui datagrid的风格，具体使用方法可见相关官网 ... -
bootstrap table小案例
2020-09-01 09:54:23主要介绍了bootstrap table小案例，教大家如何使用表格组件bootstrap table -
Bootstrap table方法，Bootstrap table事件，配置
2019-03-22 17:20:00$('#table').bootstrapTable('method', parameter); 例如： $('#my_table').bootstrapTable('refreshOptions', { data: tabledata }); //刷新表格tabledata 为数据 $("#my_table").bootstra... -
bootstrapTable
2016-04-06 21:19:52bootstrap样式比较好看，现项目中使用，做一下记录，备忘。 引入文件： html代码 ID 姓名 手机号 预产期 风险等级 有无传染病 -
Bootstrap 表格插件 BootstrapTable ： jQuery.fn.bootstrapTable.defaults
2017-09-13 14:35:54Bootstrap 表格插件 BootstrapTable ： jQuery.fn.bootstrapTable.defaults 表格参数说明文档： 表格的参数定义在 jQuery.fn.bootstrapTable.defaults。 ...方法 -
bootstrap table 例子
2018-08-16 14:14:28bootstrap table 例子，从最基础的到可扩展的，一步一步，从配置选项到js配置，应有尽有。 -
Bootstrap table分页问题汇总
2020-09-02 07:01:30主要为大家汇总了Bootstrap table分页的典型问题，以及对应每个bootstrap table分页问题的解决方法，感兴趣的小伙伴们可以参考一下 -
Bootstrap Table从零开始
2020-08-30 02:39:11Bootstrap Table从零开始，这篇文章主要介绍了Bootstrap Table的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 -
bootstrap table复杂操作代码
2021-01-19 16:30:54$('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:detailFormatter,//点击展开预先执行事件 cache: false, height: 550, showExport: true, ... -
JQuery+BootStrap+BootStrapTable.rar
2020-05-07 00:33:46JQuery+BootStrap+BootStrapTable相关文件 -
bootstrap table控件
2018-06-08 13:16:46bootstrap table控件，支持翻页功能及查询，刷新等功能。
收藏数
63,463
精华内容
25,385