Bootstrap Table API 中文版 说明文档

   <table id="bootstrap-table"></table>
    $("#bootstrap-table").bootstrapTable('destroy').bootstrapTable({})

表的各项(Table options )

名称属性类型默认值作用描述
-data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用
默认有写data-toggle=”table”,data-toggle应该知道吧,常用的有”tooltip、popover等等”,这边就不说了
classesdata-classesStringtable table-hover表的class属性,如果没有自己定义,则默认有边框,并且当鼠标悬浮在那一行,背景会变为浅灰色.
sortClassdata-sort-classStringundefined声明表格td的class名,代表此列元素的class名将被排序
heightdata-heightNumberundefined表格的高度
undefinedTextdata-undefined-textString-当不写任何内容默认显示’-‘
stripeddata-stripedBooleanfalse默认false,当设为true,则每行表格的背景会显示灰白相间
sortNamedata-sort-nameStringundefined定义哪一列的值会被排序,写data-field的自定义名,没定义默认都不排列,如果你定义了,则定义的列默认递增(asc)
sortOrderdata-sort-orderStringasc同上面的结合使用,默认递增(asc),也可设为递减(desc)
sortStabledata-sort-stableBooleanfalse(别看错了,是sortStable,sortable在下面)默认false,设为true,则和sort部分一样,区别是:在排序过程中,如果存在相等的元素,则原来的顺序不会改变。原文还有一句:(如果你把此属性设为了true)我们将为此行添加’_position’属性
iconsPrefixdata-icons-prefixStringglyphicon定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome,并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
iconSizedata-icon-sizeStringundefined定义的图标大小:
      - undefined =>默认表示默认的按钮尺寸(btn)
      - xs   =>超小按钮的尺寸(btn-xs)
      - sm  =>小按钮的尺寸(btn-sm)
      - lg    =>大按钮的尺寸(btn-lg)
buttonsClassdata-buttons-classStringdefault按钮的类,默认为default。
      - 可选的有:primary、danger、warning等等
      - 写了之后会自动转换为btn-primary(蓝色)、btn-danger(红色)、btn-warning(黄色)等格式,所以前面不要再加”btn-“,默认为btn-default(白色)
      - 参考菜鸟教程:Bootstrap 按钮
iconsdata-iconsObject{ 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”,后面是服务器发来的字段名
dataFielddata-data-fieldStringrows      - 名称写自己定义的每列的字段名,也就是key,通过key才能给某行的某列赋value。
      - 原文:获取每行数据json内的key
      - 例如:{“name”:”zz”,”age”:20},name和age就是key,如果这是从服务端请求的json,那可能和每列定义的字段不同,但都是唯一的
ajaxdata-ajaxFunctionundefined      - ajax方法,和jQuery的ajax方法类似
      - 参考 BootstrapTable实现定时刷新数据,只是参考,因为那是jQuery的ajax方法
methoddata-methodStringget向服务器请求远程数据的方式,默认为’get’,可选’post’
urldata-urlStringundefined向服务器请求的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)
cachedata-cacheBooleantrue默认缓存ajax请求,设为false则禁用缓存
contentTypedata-content-typeStringapplication/json请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。
      - 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataTypedata-data-typeStringjson期望从服务器获取的数据的类型,默认为json格式字符串
ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项,默认无附加
      - 参考 jQuery.ajax()
queryParamsdata-query-paramsFunctionfunction(params){return params;}当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。 
      - queryParamsType=”limit”,它的参数包括:limit,offset,search,sort,order Else 
      - params包括:pageSize,pageNumber,searchText,sortName,sortOrder
      - 当return false,请求则终止
queryParamsTypedata-query-params-typeStringlimit默认”limit”,设置该属性用来发送符合RESTful格式的参数
responseHandlerdata-response-handlerFunctionfunction(res){ return res;}在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据)
paginationdata-paginationBooleanfalse默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示
paginationLoopdata-pagination-loopBooleantrue默认true,分页条无限循环
onlyInfoPaginationdata-only-info-paginationBooleanfalse前提:pagination设为true,启用了分页功能。
      - 默认false,设为true显示总记录数
sidePaginationdata-side-paginationStringclient设置在哪进行分页,默认”client”,可选”server”,如果设置 “server”,则必须设置url或者重写ajax方法
      - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
      Without server-side pagination(没有启用服务端分页)
      With server-side pagination(启用服务端分页)
pageNumberdata-page-numberNumber1前提:pagination设为true,启用了分页功能。
      - 默认第1页,用于设置初始的页数
pageSizedata-page-sizeNumber10前提:pagination设为true,启用了分页功能。
      - 默认每页显示10条记录,用于设置每页初始显示的条数
pageListdata-page-listArray[10, 25, 50, 100]前提:pagination设为true,启用了分页功能。
      - 默认为[10, 25, 50, 100],即可以选择”每页显示10/25/50/100条记录”,用于设置选择每页显示的条数
selectItemNamedata-select-item-nameStringbtSelectItemradio(单选按钮)或checkbox(复选框)的字段名
smartDisplaydata-smart-displayBooleantrue默认为true,会 机智地(<_<) 根据情况显示分页(pagination)或卡片视图(card view)
escapedata-escapeBooleanfalse跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'
searchdata-searchBooleanfalse默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索
searchOnEnterKeydata-search-on-enter-keyBooleanfalse默认false不启用,设为true启用,比功能是与上面相比,在搜索框内输入内容并且按下回车键才开始搜索
strictSearchdata-strict-searchBooleanfalse设为true,开启精确搜索
searchTextdata-search-textString“”前提:search设为true,启用了搜索功能。
      - 搜索框初始显示的内容,默认空字符串
searchTimeOutdata-search-time-outNumber500前提:search设为true,启用了搜索功能。
      - 设置搜索文件的超时时间(原文:Set timeout for search fire,不知道是写错了还是我知识面太窄,”search fire”是什么意思,官方API错了?给我整蒙逼了)
trimOnSearchdata-trim-on-searchBooleantrue默认true,自动忽略空格
showHeaderdata-show-headerBooleantrue默认为true显示表头,设为false隐藏
showFooterdata-show-footerBooleanfalse默认为false隐藏表尾,设为true显示
showColumnsdata-show-columnsBooleanfalse默认为false隐藏某列下拉菜单,设为true显示
showRefreshdata-show-refreshBooleanfalse默认为false隐藏刷新按钮,设为true显示
showToggledata-show-toggleBooleanfalse默认为false隐藏视图切换按钮,设为true显示
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table是一个基于Bootstrap的可扩展表格插件,它可以轻松地将数据展示在表格中,支持排序、搜索、分页等功能,还可以通过自定义模板来实现复杂的表格布局。 Bootstrap Table的使用非常简单,只需要引入相关的CSS和JS文件,然后在HTML中添加一个表格容器,即可通过JavaScript来初始化表格,如下所示: ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script> <div class="table-responsive"> <table id="table"></table> </div> <script> $(function() { $('#table').bootstrapTable({ data: [{ id: 1, name: 'John', age: 30 }, { id: 2, name: 'Jane', age: 25 }] }); }); </script> ``` 在初始化表格时,可以通过传递一个包含数据的数组来显示数据,也可以通过设置url属性来从服务器获取数据。此外,Bootstrap Table还支持通过columns属性来定义表格的列,以及通过options属性来配置表格的参数。 除了基本用法外,Bootstrap Table还提供了丰富的API和事件,可以通过它们来实现更加复杂的功能。例如,可以通过API来获取表格中的数据、展示、隐藏某些列、刷新数据等;也可以通过事件来监听表格的行选中、排序、搜索、分页等操作,从而实现更加灵活和交互性的表格。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值