2019-10-10 14:53:32 weixin_34849724 阅读数 15

表的各项(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的自定义名,没定义默认都不排列,如果你定义了,则定义的列默认递增(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的右侧边栏Usage
data - 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另写一个表格 [ BootstrapTable 文档 ]

名称 属性 类型 默认值 作用描述
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-card-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 element
searchAlign 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:行的(索引)index
footerFormatter 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):abc
cellStyle 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’);
      - 请查看: getOptions
getSelections none 返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行) $table.bootstrapTable(‘getSelections’);
      - 请查看: getSelections
getAllSelections none 返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组 $table.bootstrapTable(‘getAllSelections’);
      - 请查看: getAllSelections
showAllColumns none 显示所有的列 $table.bootstrapTable(‘showAllColumns’);
      - 就是显示所有的列,并没什么可说的
hideAllColumns none 隐藏所有的列 $table.bootstrapTable(‘hideAllColumns’);
      - 就是隐藏所有的列
getData useCurrentPage 获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据 $table.bootstrapTable(‘getData’);
      - 请查看: getData
getRowByUniqueId id 获取你想要的某行的数据(设置某行的id) $table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID
      - 请查看: getRowByUniqueId
load data 向表中加载数据,原来的数据将被移除 $table.bootstrapTable(‘load’, data);
      - 请查看: load

新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstraptable API 中文文档 ]

方法名 参数 描述 举例
append data 将数据追加在最后一行后 $table.bootstrapTable(‘append’, data);data可以是数组
      - 请查看: append
prepend data 也是追加,只是在第一行之前 $table.bootstrapTable(‘prepend’, data);data可以是数组
      - 请查看: prepend
remove params 移除一行或多行你所选的数据 $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); 
      - id:所需移除的那一行(rows,一或多行)的字段 
      - values:被移除的行的数组 
      - 请查看: remove
removeAll - 移除表中所有的数据 $table.bootstrapTable(‘removeAll’); 
      - 请查看: removeAll
removeByUniqueId - 移除某行数据(设置某行的id) $table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID 
      - 请查看: removeByUniqueId
insertRow params 新增一行,所需的参数如下: 
      - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁) 
      - row:你想插入的数据
$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); 
      - 请查看: insertRow
updateRow 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}); 
      - 请查看: updateByUniqueId
showRow params 显示特定行,所需的参数至少包括下面所列的一个: 
      - id:所要显示的行的索引(index) 
      - uniqueId:那一行的id
$table.bootstrapTable(‘showRow’, {index:1}); 
      - 请查看: showRow/hideRow
hideRow params 隐藏特定行,所需的参数至少包括下面所列的一个: 
      - id:所要隐藏的行的索引(index) 
      - uniqueId:那一行的id
$table.bootstrapTable(‘hideRow’, {index:1}); 
      - 请查看: showRow/hideRow
getRowsHidden 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});
      - 请查看: mergeCells
updateCell 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’);
      - 请查看: refresh
refreshOptions options 看例子吧       - 请查看: refreshOptions
resetSearch text 重置搜索的文本(text)       - 请查看: resetSearch
showLoading none 显示正在加载……       - 请查看: showLoading/hideLoading
hideLoading none 隐藏正在加载……       - 请查看: showLoading/hideLoading
checkAll none 选择当前页的所有行 $table.bootstrapTable(‘checkAll’);
      - 请查看: checkAll/uncheckAll
uncheckAll none 取消选择当前页的所有行 $table.bootstrapTable(‘uncheckAll’);
      - 请查看: checkAll/uncheckAll
checkInvert none 反向选择,不难理解吧 $table.bootstrapTable(‘checkInvert’);
check index 选择某一行,索引(index)从0开始 $table.bootstrapTable(‘check’, 1);
      - 请查看: check/uncheck
uncheck index 取消选择某一行,索引(index)从0开始 $table.bootstrapTable(‘uncheck’, 1);
      - 请查看: check/uncheck
checkBy params 通过数组选择某一行,所需的参数如下: 
      - field:所要选的字段名 
      - values:所要选的那些值(数组)
官方没,啊,有例纸:
- $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看: checkBy/uncheckBy
uncheckBy params 通过数组选择某一行,所需的参数如下: 
      - field:所要取消选择的字段名 
      - values:所要取消选择的那些值(数组)
$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看: checkBy/uncheckBy
resetView params 改变表格的样式,例如改变表格的高度(height) $table.bootstrapTable(‘resetView’);
      - 请查看: resetView
resetWidth none 自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度 $table.bootstrapTable(‘resetWidth’);
destroy none 销毁表格 A!T!T!A!C!K! $table.bootstrapTable(‘destroy’);
      - 请查看: destroy
showColumn field 显示特定的列 $table.bootstrapTable(‘showColumn’, ‘name’);
      - 请查看: showColumn/hideCoulumn
hideColumn 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);
      - 请查看: scrollTo
getScrollPosition 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] });
      - 请查看: filterBy
selectPage page 跳转到特定的页面 $table.bootstrapTable(‘selectPage’, 1);
      - 请查看: selectPage/prevPage/nextPage
prevPage none 跳转到上一页 $table.bootstrapTable(‘prevPage’);
      - 请查看: selectPage/prevPage/nextPage
nextPage none 跳转到下一页 $table.bootstrapTable(‘nextPage’);
      - 请查看: selectPage/prevPage/nextPage
togglePagination none 词穷,请看例纸 $table.bootstrapTable(‘togglePagination’);
      - 请查看: togglePagination
toggleView none 改变视图 $table.bootstrapTable(‘toggleView’);
      - 请查看: toggleView
expandRow index 可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用 
      - 通过参数index来展开此列的详细视图
      - 请查看: expandRow-collapseRow
collapseRow index 可使用条件:detail view设为了true 
      - 通过参数index来关闭此列的详细视图
      - 请查看: expandRow-collapseRow
expandAllRow is subtable 可使用条件:detail view设为了true 
      - 展开所有列的详细视图
$table.bootstrapTable(‘expandAllRow’); 
      - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的
collapseAllRow is subtable 可使用条件:detail view设为了true 
      - 关闭所有列的详细视图
$table.bootstrapTable(‘collapseAllRow’); 
      - 参考上面

本地化,切换为另一种语言(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'});


  • 以下说明除了数字外均为中文默认显示,本来不用写的,只要引入就显示中文了
名称 参数 默认 说明
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’ “列”

有错请留言,会及时更改,如果翻译的行写成列等低级错误,看英文名称就知道有没有错了,知道就好,会持续检查哪有误、漏译,谢谢 

2018-07-25 14:27:33 wuguofei12345 阅读数 258

表格参数

名称

 

标签

 

类型

 

默认

 

描述

 

- data-toggle String 'table' 不用写 JavaScript 直接启用表格。
classes data-classes String 'table table-hover' 表格的类名称。默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式。
sortClass data-sort-class String undefined The class name of the td elements which are sorted.
height data-height Number undefined 定义表格的高度。
undefinedText data-undefined-text String '-' 当数据为 undefined 时显示的字符
striped data-striped Boolean false 设置为 true 会有隔行变色效果
sortName data-sort-name String undefined 定义排序列,通过url方式获取数据填写字段名,否则填写下标
sortOrder data-sort-order String 'asc' 定义排序方式 'asc' 或者 'desc'
sortStable data-sort-stable Boolean false 设置为 true 将获得稳定的排序,我们会添加_position属性到 row 数据中。
iconsPrefix data-icons-prefix String 'glyphicon' 定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果
Glyphicon 集成于Bootstrap可免费使用 参考:http://glyphicons.com/
FontAwesome 参考:http://fortawesome.github.io/
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'
}
自定义图标
columns - Array [] 列配置项,详情请查看 列参数 表格.
data - Array [] 加载json格式的数据
ajax data-ajax Function undefined 自定义 AJAX 方法,须实现 jQuery AJAX API
method data-method String 'get' 服务器数据的请求方式 'get' or 'post'
url data-url String undefined 服务器数据的加载地址
cache data-cache Boolean true 设置为 true 禁用 AJAX 数据缓存
contentType data-content-type String 'application/json' 发送到服务器的数据编码类型
dataType data-data-type String 'json' 服务器返回的数据类型
ajaxOptions data-ajax-options Object {} 提交ajax请求时的附加参数,可用参数列请查看http://api.jquery.com/jQuery.ajax.
queryParams data-query-params Function function(params) {
return params;
}
请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
limit, offset, search, sort, order 否则, 需要包含: 
pageSize, pageNumber, searchText, sortName, sortOrder. 
返回false将会终止请求
queryParamsType data-query-params-type String 'limit' 设置为 'limit' 则会发送符合 RESTFul 格式的参数.
responseHandler data-response-handler Function function(res) {
return res;
}
加载服务器数据之前的处理程序,可以用来格式化数据。
参数:res为从服务器请求到的数据。
pagination data-pagination Boolean false 设置为 true 会在表格底部显示分页条
paginationLoop data-pagination-loop Boolean true 设置为 true 启用分页条无限循环的功能。
onlyInfoPagination data-only-info-pagination Boolean false 设置为 true 只显示总数据数,而不显示分页按钮。需要 pagination='True'
sidePagination data-side-pagination String 'client' 设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法
pageNumber data-page-number Number 1 如果设置了分页,首页页码
pageSize data-page-size Number 10 如果设置了分页,页面数据条数
pageList data-page-list Array [10, 25, 50, 100, All] 如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
selectItemName data-select-item-name String 'btSelectItem' radio or checkbox 的字段名
smartDisplay data-smart-display Boolean true True to display pagination or card view smartly.
escape data-escape Boolean false 转义HTML字符串,替换 &<>"`, 和 ' 字符.
search data-search Boolean false 是否启用搜索框
searchOnEnterKey data-search-on-enter-key Boolean false 设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
strictSearch data-strict-search Boolean false 设置为 true启用 全匹配搜索,否则为模糊搜索
searchText data-search-text String '' 初始化搜索文字
searchTimeOut data-search-time-out Number 500 设置搜索超时时间
trimOnSearch data-trim-on-search Boolean true 设置为 true 将允许空字符搜索
showHeader data-show-header Boolean true 是否显示列头
showFooter data-show-footer Boolean false 是否显示列脚
showColumns data-show-columns Boolean false 是否显示 内容列下拉框
showRefresh data-show-refresh Boolean false 是否显示 刷新按钮
showToggle data-show-toggle Boolean false 是否显示 切换试图(table/card)按钮
showPaginationSwitch data-show-pagination-switch Boolean false 是否显示 数据条数选择框
minimumCountColumns data-minimum-count-columns Number 1 当列数小于此值时,将隐藏内容列下拉框。
idField data-id-field String undefined 指定主键列
uniqueId data-unique-id String undefined Indicate an unique identifier for each row.
cardView data-card-view Boolean false 设置为 true将显示card视图,适用于移动设备。否则为table试图,适用于pc
detailView data-detail-view Boolean false 设置为 true 可以显示详细页面模式。
detailFormatter data-detail-formatter Function function(index, row) {
return '';
}
格式化详细页面模式的视图。
searchAlign data-search-align String 'right' 指定 搜索框 水平方向的位置。'left' or 'right'
buttonsAlign data-buttons-align String 'right' 指定 按钮 水平方向的位置。'left' or 'right'
toolbarAlign data-toolbar-align String 'left' 指定 toolbar 水平方向的位置。'left' or 'right'
paginationVAlign data-pagination-v-align String 'bottom' 指定 分页条 在垂直方向的位置。'top' or 'bottom' or 'bonth'
paginationHAlign data-pagination-h-align String 'right' 指定 分页条 在水平方向的位置。'left' or 'right'
paginationDetailHAlign data-pagination-detail-h-align String 'left' 指定 分页详细信息 在水平方向的位置。'left' or 'right'
paginationPreText data-pagination-pre-text String '<' 指定分页条中上一页按钮的图标或文字
paginationNextText data-pagination-next-text String '>' 指定分页条中下一页按钮的图标或文字
clickToSelect data-click-to-select Boolean false 设置true 将在点击行时,自动选择rediobox 和 checkbox
singleSelect data-single-select Boolean false 设置True 将禁止多选
toolbar data-toolbar String undefined 一个jQuery 选择器,指明自定义的toolbar 例如:
#toolbar, .toolbar.
checkboxHeader data-checkbox-header Boolean true 设置false 将在列头隐藏check-all checkbox .
maintainSelected data-maintain-selected Boolean false 设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
sortable data-sortable Boolean true 设置为false 将禁止所有列的排序
silentSort data-silent-sort Boolean true 设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效.
rowStyle data-row-style Function function(row,index) {
return class;
}
自定义行样式 参数为:
row: 行数据
index: 行下标
返回值可以为class或者css
rowAttributes data-row-attributes Function function(row,index) {
return attributes;
}
自定义行属性 参数为:
row: 行数据
index: 行下标
返回值可以为class或者css 支持所有自定义属性
customSearch data-custom-search Function $.noop The custom search function is executed instead of built-in search function, takes one parameters: 
text: the search text.
Example usage:

 


 
  1. function customSearch(text) {
  2. //Search logic here.
  3. //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
  4. }
  5.  
customSort data-custom-sort Function $.noop The custom sort function is executed instead of built-in sort function, takes two parameters: 
sortName: the sort name.
sortOrder: the sort order.
Example usage:

 


 
  1. function customSort(sortName, sortOrder) {
  2. //Sort logic here.
  3. //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
  4. }
  5.  

2017-03-21 14:22:36 mrczr 阅读数 3438

刚开始学习bootstrap容易被里面各种参数搞晕。此文无关实现,只是为了记住各个参数的意义,方便开发的时候查询。


表格参数Edit on GitHub

表格的参数定义在 jQuery.fn.bootstrapTable.defaults

名称
 
标签
类型
默认
 
描述
 
 
- data-toggle String           'table' 不用写 JavaScript 直接启用表格。  
classes data-classes String 'table table-hover' 表格的类名称。默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式。  
sortClass data-sort-class String undefined The class name of the td elements which are sorted.  
height data-height Number undefined 定义表格的高度。  
undefinedText data-undefined-text String '-' 当数据为 undefined 时显示的字符  
striped data-striped Boolean false 设置为 true 会有隔行变色效果  
sortName data-sort-name String undefined 定义排序列,通过url方式获取数据填写字段名,否则填写下标  
sortOrder data-sort-order String 'asc' 定义排序方式 'asc' 或者 'desc'  
sortStable data-sort-stable Boolean false 设置为 true 将获得稳定的排序,我们会添加_position属性到 row 数据中。  
iconsPrefix data-icons-prefix String 'glyphicon' 定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果
Glyphicon 集成于Bootstrap可免费使用 参考:http://glyphicons.com/
FontAwesome 参考:http://fortawesome.github.io/
 
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'
}
自定义图标  
columns - Array [] 列配置项,详情请查看 列参数 表格.  
data - Array [] 加载json格式的数据  
ajax data-ajax Function undefined 自定义 AJAX 方法,须实现 jQuery AJAX API  
method data-method String 'get' 服务器数据的请求方式 'get' or 'post'  
url data-url String undefined 服务器数据的加载地址  
cache data-cache Boolean true 设置为 true 禁用 AJAX 数据缓存  
contentType data-content-type String 'application/json' 发送到服务器的数据编码类型  
dataType data-data-type String 'json' 服务器返回的数据类型  
ajaxOptions data-ajax-options Object {} 提交ajax请求时的附加参数,可用参数列请查看http://api.jquery.com/jQuery.ajax.  
queryParams data-query-params Function function(params) {
return params;
}
请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
limit, offset, search, sort, order 否则, 需要包含: 
pageSize, pageNumber, searchText, sortName, sortOrder. 
返回false将会终止请求
 
queryParamsType data-query-params-type String 'limit' 设置为 'limit' 则会发送符合 RESTFul 格式的参数.  
responseHandler data-response-handler Function function(res) {
return res;
}
加载服务器数据之前的处理程序,可以用来格式化数据。
参数:res为从服务器请求到的数据。
 
pagination data-pagination Boolean false 设置为 true 会在表格底部显示分页条  
paginationLoop data-pagination-loop Boolean true 设置为 true 启用分页条无限循环的功能。  
onlyInfoPagination data-only-info-pagination Boolean false 设置为 true 只显示总数据数,而不显示分页按钮。需要 pagination='True'  
sidePagination data-side-pagination String 'client' 设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法  
pageNumber data-page-number Number 1 如果设置了分页,首页页码  
pageSize data-page-size Number 10 如果设置了分页,页面数据条数  
pageList data-page-list Array [10, 25, 50, 100, All] 如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。  
selectItemName data-select-item-name String 'btSelectItem' radio or checkbox 的字段名  
smartDisplay data-smart-display Boolean true True to display pagination or card view smartly.  
escape data-escape Boolean false 转义HTML字符串,替换 &<>"`, 和 ' 字符.  
search data-search Boolean false 是否启用搜索框  
searchOnEnterKey data-search-on-enter-key Boolean false 设置为 true时,按回车触发搜索方法,否则自动触发搜索方法  
strictSearch data-strict-search Boolean false 设置为 true启用 全匹配搜索,否则为模糊搜索  
searchText data-search-text String '' 初始化搜索文字  
searchTimeOut data-search-time-out Number 500 设置搜索超时时间  
trimOnSearch data-trim-on-search Boolean true 设置为 true 将允许空字符搜索  
showHeader data-show-header Boolean true 是否显示列头  
showFooter data-show-footer Boolean false 是否显示列脚  
showColumns data-show-columns Boolean false 是否显示 内容列下拉框  
showRefresh data-show-refresh Boolean false 是否显示 刷新按钮  
showToggle data-show-toggle Boolean false 是否显示 切换试图(table/card)按钮  
showPaginationSwitch data-show-pagination-switch Boolean false 是否显示 数据条数选择框  
minimumCountColumns data-minimum-count-columns Number 1 当列数小于此值时,将隐藏内容列下拉框。  
idField data-id-field String undefined 指定主键列  
uniqueId data-unique-id String undefined Indicate an unique identifier for each row.  
cardView data-card-view Boolean false 设置为 true将显示card视图,适用于移动设备。否则为table试图,适用于pc  
detailView data-detail-view Boolean false 设置为 true 可以显示详细页面模式。  
detailFormatter data-detail-formatter Function function(index, row) {
return '';
}
格式化详细页面模式的视图。  
searchAlign data-search-align String 'right' 指定 搜索框 水平方向的位置。'left' or 'right'  
buttonsAlign data-buttons-align String 'right' 指定 按钮 水平方向的位置。'left' or 'right'  
toolbarAlign data-toolbar-align String 'left' 指定 toolbar 水平方向的位置。'left' or 'right'  
paginationVAlign data-pagination-v-align String 'bottom' 指定 分页条 在垂直方向的位置。'top' or 'bottom' or 'bonth'  
paginationHAlign data-pagination-h-align String 'right' 指定 分页条 在水平方向的位置。'left' or 'right'  
paginationDetailHAlign data-pagination-detail-h-align String 'left' 指定 分页详细信息 在水平方向的位置。'left' or 'right'  
paginationPreText data-pagination-pre-text String '<' 指定分页条中上一页按钮的图标或文字  
paginationNextText data-pagination-next-text String '>' 指定分页条中下一页按钮的图标或文字  
clickToSelect data-click-to-select Boolean false 设置true 将在点击行时,自动选择rediobox 和 checkbox  
singleSelect data-single-select Boolean false 设置True 将禁止多选  
toolbar data-toolbar String undefined 一个jQuery 选择器,指明自定义的toolbar 例如:
#toolbar, .toolbar.
 
checkboxHeader data-checkbox-header Boolean true 设置false 将在列头隐藏check-all checkbox .  
maintainSelected data-maintain-selected Boolean false 设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项  
sortable data-sortable Boolean true 设置为false 将禁止所有列的排序  
silentSort data-silent-sort Boolean true 设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效.  
rowStyle data-row-style Function function(row,index) {
return class;
}
自定义行样式 参数为:
row: 行数据
index: 行下标
返回值可以为class或者css
 
rowAttributes data-row-attributes Function function(row,index) {
return attributes;
}
自定义行属性 参数为:
row: 行数据
index: 行下标
返回值可以为class或者css 支持所有自定义属性
 
customSearch data-custom-search Function $.noop The custom search function is executed instead of built-in search function, takes one parameters: 
text: the search text.
Example usage:
            function customSearch(text) {
                //Search logic here.
                //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
            }
            
 
customSort data-custom-sort Function $.noop The custom sort function is executed instead of built-in sort function, takes two parameters: 
sortName: the sort name.
sortOrder: the sort order.
Example usage:
            function customSort(sortName, sortOrder) {
                //Sort logic here.
                //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
            }
            
 
 

列参数Edit on GitHub

 


 

The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.

Name
 
Attribute
 
Type
 
Default
 
Description
 
radio data-radio Boolean false True to show a radio. The radio column has fixed width.
checkbox data-checkbox Boolean false True to show a checkbox. The checkbox column has fixed width.
field data-field String undefined The column field name.
title data-title String undefined The column title text.
titleTooltip data-title-tooltip String undefined The column title tooltip text. This option also support the title HTML attribute
class class / data-class String undefined The column class name.
rowspan rowspan / data-rowspan Number undefined Indicate how many rows a cell should take up.
colspan colspan / data-colspan Number undefined Indicate how many columns a cell should take up.
align data-align String undefined Indicate how to align the column data. 'left', 'right', 'center' can be used.
halign data-halign String undefined Indicate how to align the table header. 'left', 'right', 'center' can be used.
falign data-falign String undefined Indicate how to align the table footer. 'left', 'right', 'center' can be used.
valign data-valign String undefined Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
width data-width Number {Pixels or Percentage} undefined The width of column. If not defined, the width will auto expand to fit its contents. Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, you can add or no the 'px' to your number and then the bootstrapTable will use the pixels
sortable data-sortable Boolean false True to allow the column can be sorted.
order data-order String 'asc' The default sort order, can only be 'asc' or 'desc'.
visible data-visible Boolean true False to hide the columns item.
cardVisible data-card-visible Boolean true False to hide the columns item in card view state.
switchable data-switchable Boolean true False to disable the switchable of columns item.
clickToSelect data-click-to-select Boolean true True to select checkbox or radiobox when the column is clicked.
formatter data-formatter Function undefined The context (this) is the column Object. 
The cell formatter function, take three parameters: 
value: the field value. 
row: the row record data.
index: the row index.
footerFormatter data-footer-formatter Function undefined The context (this) is the column Object. 
The function, take one parameter: 
data: Array of all the data rows. 
the function should return a string with the text to show in the footer cell.
events data-events Object undefined The cell events listener when you use formatter function, take three parameters: 
event: the jQuery event. 
value: the field value. 
row: the row record data.
index: the row index.
sorter data-sorter Function undefined The custom field sort function that used to do local sorting, take two parameters: 
a: the first field value.
b: the second field value.
sortName data-sort-name String undefined Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "<b><span style="color:red">abc</span></b>", but a fieldName to sort is "content" with the value of "abc".
cellStyle data-cell-style Function undefined The cell style formatter function, take three parameters: 
value: the field value.
row: the row record data.
index: the row index.
field: the row field.
Support classes or css.
searchable data-searchable Boolean true True to search data for this column.
searchFormatter data-search-formatter Boolean true True to search use formated data.
 
 
Option 事件
 
jQuery 事件
 
参数
 
描述
 
onAll all.bs.table name, args 所有的事件都会触发该事件,参数包括:
name:事件名,
args:事件的参数。
onClickRow click-row.bs.table row, $element 当用户点击某一行的时候触发,参数包括:
row:点击行的数据,
$element:tr 元素,
field:点击列的 field 名称。
onDblClickRow dbl-click-row.bs.table row, $element 当用户双击某一行的时候触发,参数包括:
row:点击行的数据,
$element:tr 元素,
field:点击列的 field 名称。
onClickCell click-cell.bs.table field, value, row, $element 当用户点击某一列的时候触发,参数包括:
field:点击列的 field 名称,
value:点击列的 value 值,
row:点击列的整行数据,
$element:td 元素。
onDblClickCell dbl-click-cell.bs.table field, value, row, $element 当用户双击某一列的时候触发,参数包括:
field:点击列的 field 名称,
value:点击列的 value 值,
row:点击列的整行数据,
$element:td 元素。
onSort sort.bs.table name, order Fires when user sort a column, the parameters contains: 
name: the sort column field name
order: the sort column order.
onCheck check.bs.table row Fires when user check a row, the parameters contains: 
row: the record corresponding to the clicked row. $element: the DOM element checked.
onUncheck uncheck.bs.table row Fires when user uncheck a row, the parameters contains: 
row: the record corresponding to the clicked row. $element: the DOM element unchecked.
onCheckAll check-all.bs.table rows Fires when user check all rows, the parameters contains: 
rows: array of records corresponding to newly checked rows.
onUncheckAll uncheck-all.bs.table rows Fires when user uncheck all rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.
onCheckSome check-some.bs.table rows Fires when user check some rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.
onUncheckSome uncheck-some.bs.table rows Fires when user uncheck some rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.
onLoadSuccess load-success.bs.table data Fires when remote data is loaded successfully.
onLoadError load-error.bs.table status Fires when some errors occur to load remote data.
onColumnSwitch column-switch.bs.table field, checked Fires when switch the column visible.
onColumnSearch column-search.bs.table field, text Fires when search by column.
onPageChange page-change.bs.table number, size Fires when change the page number or page size.
onSearch search.bs.table text Fires when search the table.
onToggle toggle.bs.table cardView Fires when toggle the view of table.
onPreBody pre-body.bs.table data Fires before the table body is rendered
onPostBody post-body.bs.table none Fires after the table body is rendered and available in the DOM
onPostHeader post-header.bs.table none Fires after the table header is rendered and availble in the DOM
onExpandRow expand-row.bs.table index, row, $detail 当点击详细图标展开详细页面的时候触发。
onCollapseRow collapse-row.bs.table index, row 当点击详细图片收起详细页面的时候触发。
onRefreshOptions refresh-options.bs.table options Fires after refresh the options and before destroy and init the table.
onRefresh refresh.bs.table params Fires after the click the refresh button.
 

 


 

使用方法的语法:$('#table').bootstrapTable('method', parameter);

 
名称
 
参数
 
描述
 
例子
 
getOptions none 返回表格的 Options。  
getSelections none 返回所选的行,当没有选择任何行的时候返回一个空数组。  
getAllSelections none 返回所有选择的行,包括搜索过滤前的,当没有选择任何行的时候返回一个空数组。  
getData useCurrentPage 或者当前加载的数据。假如设置 useCurrentPage 为 true,则返回当前页的数据。  
getRowByUniqueId id 根据 uniqueId 获取行数据。  
load data 加载数据到表格中,旧数据会被替换。  
showAllColumns none Show All the columns.  
hideAllColumns none Hide All the columns.  
append data 添加数据到表格在现有数据之后。  
prepend data 插入数据到表格在现有数据之前。  
remove params 从表格中删除数据,包括两个参数: field: 需要删除的行的 field 名称。
values: 需要删除的行的值,类型为数组。
 
removeAll - 删除表格所有数据。  
removeByUniqueId id 根据 uniqueId 删除指定的行。  
insertRow params 插入新行,参数包括:
index: 要插入的行的 index。
row: 行的数据,Object 对象。
 
updateRow params 更新指定的行,参数包括:
index: 要更新的行的 index。
row: 行的数据,Object 对象。
 
showRow params 显示指定的行,参数包括:
index: 要更新的行的 index 或者 uniqueId。
isIdField: 指定 index 是否为 uniqueid。
 
hideRow params 显示指定的行,参数包括:
index: 要更新的行的 index。
uniqueId: 或者要更新的行的 uniqueid。
 
getRowsHidden show Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method only will return the rows hidden.
mergeCells options Merge some cells to one cell, the options contains following properties: 
index: the row index. 
field: the field name.
rowspan: the rowspan count to be merged. 
colspan: the colspan count to be merged.
updateCell params Update one cell, the params contains following properties: 
index: the row index. 
field: the field name.
value: the new field value.
refresh params Refresh the remote server data, you can set {silent: true} to refresh the data silently, and set {url: newUrl} to change the url. To supply query params specific to this request, set {query: {foo: 'bar'}}
refreshOptions options Refresh the options
resetSearch text Set the search text
showLoading none Show loading status.
hideLoading none Hide loading status.
checkAll none Check all current page rows.
uncheckAll none Uncheck all current page rows.
check index Check a row, the row index start with 0.
uncheck index Uncheck a row, the row index start with 0.
checkBy params Check a row by array of values, the params contains:
field: name of the field used to find records
values: array of values for rows to check
Example: 
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckBy params Uncheck a row by array of values, the params contains:
field: name of the field used to find records
values: array of values for rows to uncheck
Example: 
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetView params Reset the bootstrap table view, for example reset the table height.
resetWidth none Resizes header and footer to fit current columns width
destroy none Destroy the bootstrap table.
showColumn field Show the specified column.
hideColumn field Hide the specified column.
getHiddenColumns - 获取隐藏的列。
getVisibleColumns - 获取可见列。
scrollTo value 滚动到指定位置,单位为 px,设置 'bottom' 表示跳到最后。
getScrollPosition none 获取当前滚动条的位置,单位为 px。
filterBy params (只能用于 client 端)过滤表格数据, 你可以通过过滤{age: 10}来显示 age 等于 10 的数据。
selectPage page 跳到指定的页。
prevPage none 跳到上一页。
nextPage none 跳到下一页。
togglePagination none 切换分页选项。
toggleView none 切换 card/table 视图
expandRow index Expand the row that has the index passed by parameter if the detail view option is set to True.
collapseRow index Collapse the row that has the index passed by parameter if the detail view option is set to True.
expandAllRows is subtable Expand all rows if the detail view option is set to True.
collapseAllRows is subtable Collapse all rows if the detail view option is set to True.
 

多语言Edit on GitHub

 

Name
 
Parameter
 
Default
 
formatLoadingMessage - 'Loading, please wait…'
formatRecordsPerPage pageNumber '%s records per page'
formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows'
formatDetailPagination totalRows 'Showing %s rows'
formatSearch - 'Search'
formatNoMatches - 'No matching records found'
formatRefresh - 'Refresh'
formatToggle - 'Toggle'
formatColumns - 'Columns'
formatAllRows - 'All'
 

 



2017-04-06 15:15:19 xwq20160104 阅读数 333

最近的项目都使用bootstrapTable来创建table,bootstrapTable确实非常好用。获取行对象可以直接取row,但是如何把row作为一个参数传到另一个js方法里面呢,直接传row,

浏览器解析的时候就会变成这样

然后就会抛错

那么正确的传参应该怎么传呢。将这个jquery对象转化为json对象传递就可以了

只要改成这样就ok了,

这样js方法就可以直接访问这个对象的属性了

,完美。


2018-05-15 11:45:38 yaomingyang 阅读数 15158

官方文档可以参考:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6
页面效果图:
这里写图片描述
- 要控制左侧的复选框按钮属性设置:

 checkbox: false,
  • 控制内容下拉列中是否显示的属性设置:
visible: false
  • 后端代码要返回查询符合条件的总条数
  • 表格中的数据导出要引入如下文件:
<script src="/public/plugin/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="/public/plugin/bootstrap-table/tableExport.js"></script>

属性设置:

        //显示导出插件
        showExport: true, 
        //文件名称设置
        exportOptions:{
            fileName: document.title  
        }
  • 首先帖出来前端页面代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消息处理中心</title>
<link rel="stylesheet" href="/public/plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/plugin/bootstrap-table/dist/bootstrap-table.css">

<script src="/public/js/jquery-2.1.1.min.js"></script>
<script src="/public/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/public/plugin/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="/public/plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/public/plugin/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div id="toolbar"></div>
        <table id="bootstrapTable" ></table>
    </div>
</div>
</body>
<script type="text/javascript">
$(function(){
    initTable();
});
function initTable() {
    //先销毁表格  
    $("#bootstrapTable").bootstrapTable({
        //表格高度
        height: getHeight(),
        //服务器数据的请求方式 'get' 或 'post'。
        method: 'get',
        //设置为 true 会有隔行变色效果
        striped: true,
        //设置为 true 会在表格底部显示分页条。
        pagination: true,
        //请求后台的URL
        url: '/MsgDealCenterAction/listData',
        //服务器返回的数据类型。
        dataType: 'json',
        //工具按钮用哪个容器
        toolbar: '#toolbar', 
        //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性
        cache: false, 
        //设置为 true 启用分页条无限循环的功能
//         paginationLoop: true,
        //设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置服务器数据地址(url)或者重写ajax方法
        sidePagination: 'server', 
        //初始化加载第一页,默认第一页
        pageNumber: 1, 
        //每页的记录行数
        pageSize: 10, 
        //可供选择的每页的行数
        pageList: [10,15,20, 50, 100], 
        //设置为false 将禁止所有列的排序。
        sortable: true,
        //设置默认排序为 name
        sortName: 'insert_time', 
        //定义排序方式,'asc' 或者 'desc'。
        sortOrder: "desc",  
        //是否显示刷新按钮
        showRefresh: true,
        //是否显示内容列下拉框。
        showColumns: true,
        //显示导出插件
        showExport: true, 
        //是否显示右上角的搜索框
        search: false,
        //是否显示切换视图(table/card)按钮。
        showToggle:false,
        //是否启用点击选中行
//         clickToSelect: true, 
        //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder  
        //设置为limit可以获取limit, offset, search, sort, order  
        queryParamsType:'undefined',
        //请求服务器数据
        queryParams: function queryParams(params){
            var param = {    
                 pageNumber: params.pageNumber,    
                 pageSize: params.pageSize,
                 sortName: params.sortName,
                 sortOrder: params.sortOrder
             };    
             return param;    
        },
        //加载成功时执行
        onLoadSuccess: function(data){    
            console.log("加载成功");  
        },
        //加载失败时执行  
        onLoadError: function(status){  
            console.log("加载数据失败"+status);  
        },
        columns: [
        {
           title: "全选",
           field: "select",
           checkbox: false,
           width: 20,//宽度
           align: "left",//水平
           valign: "middle",
           formatter: function (value, row, index) {
                return row._id;
           }
        },{
            title: '编号',//标题  可不加
            align: 'center',
            valign: 'middle',
            sortable: false,
            formatter: function (value, row, index) {
                return index+1;
            }
        },{
            field: 'source',
            title: '产品线',
            align: 'center',
            valign: 'middle',
            sortable: false,
            width:  '80px'
        },{
            field: 'msg_type',
            title: '消息类型',
            align: 'center',
            valign: 'middle',
            sortable: false
        },{
            field: 'account_name',
            title: '账号类型',
            align: 'center',
            valign: 'middle',
            sortable: false
        },{
            field: 'msg_name',
            title: '消息名称',
            align: 'left',
            valign: 'middle',
            sortable: false
        },{
            field: 'msg',
            title: '消息内容',
            align: 'left',
            valign: 'middle',
            sortable: false,
            visible: false,
            //value【字段值】row【row对应的整条记录】index【行索引】
            formatter: function format(value,row,index){
                console.log(typeof(value)) 
                // 缩进一个2个空格
                  return JSON.stringify(value, null, 2);  
            }
        },{
            field: 'msg_start_time',
            title: '起始有效时间',
            align: 'center',
            valign: 'middle',
            sortable: true
        },{
            field: 'msg_end_time',
            title: '结束有效时间',
            align: 'center',
            valign: 'middle',
            sortable: true
        },{
            field: 'insert_time',
            title: '入库时间',
            align: 'center',
            valign: 'middle',
            sortable: true
        },{
            field: 'update_time',
            title: '更新时间',
            align: 'center',
            valign: 'middle',
            sortable: true,
            visible: false
        }]
    });
}
//获取table的高度
function getHeight() {
    return $(window).height() - 100;
}
</script>
</html>

下面是后端的代码:

    public static void listData(Integer pageNumber,Integer pageSize,String sortName,String sortOrder, Integer source, Integer msg_type, String account_name) {
        DBCollection collection = MongoUtil.getGGUserCollection("gg_deal_msg_center");
        BasicDBObject query = new BasicDBObject();
        //产品线
        if(ObjectUtils.isNotNull(source)) {
            query.append("source", source);
        }
        //消息类型
        if(ObjectUtils.isNotNull(msg_type)) {
            query.append("msg_type", msg_type);
        }

        if(StringUtils.isNotBlank(account_name)) {
            List<Long> accountIds = getAccountIdByName(account_name);
            query.append("account_id", new BasicDBObject("$in", accountIds));
        }
        //数据总条数
        long count = collection.count(query);

        BasicDBObject orderBy = new BasicDBObject(sortName, SortEnum.fromSortValue(sortOrder));

        DBCursor cursor = collection.find(query).limit(pageSize).skip((pageNumber - 1) * pageSize).sort(orderBy);
        List<Map<String, Object>> list = GGDBCursor.find(cursor);

        if(ObjectUtils.isNotNull(list)) {
            Set<Long> accountIds = Sets.newHashSet();
            for(Map<String, Object> map:list) {
                Long accountId = NumberUtils.createLong(map.get("account_id").toString());
                if(!Arrays.asList(0L, 1L,2L).contains(accountId)) {
                    accountIds.add(accountId);
                }
            }
            Map<Long, String> accounts = obtainAccounts(accountIds);

            for(Map<String, Object> map:list) {
                //账号或者推送类型
                Long accountId = NumberUtils.createLong(map.get("account_id").toString());
                //产品线
                Integer productLine = NumberUtils.createInteger(map.get("source").toString());
                //消息类型
                Integer msgType = NumberUtils.createInteger(map.get("msg_type").toString());
                if(Arrays.asList(-1L, 0L, 1L,2L).contains(accountId)) {
                    accountIds.add(accountId);
                }
                if(Arrays.asList(-1L,1L,2L,3L).contains(accountId)) {
                    map.put("account_name", MsgUserTypeEnum.fromMsgUserName(accountId));
                } else {
                    map.put("account_name", accounts.get(accountId));
                }

                map.put("source", ProductEnum.fromProductName(productLine));
                map.put("msg_type", MsgTypeEnum.fromMsgName(msgType));
            }
        }
        JSONObject json = new JSONObject();
        json.put("rows", list);
        json.put("total", count);
        System.out.println(json.toJSONString());
        renderJSON(json);
    }
没有更多推荐了,返回首页