bootstraptable表格插件使用詳解

bootstrp-table學(xué)習(xí)，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、昭通網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為昭通等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

$table.bootstrapTable({
  url: '../data/data1.json',
  striped: true,
  minimumCountColumns: 2,
  clickToSelect: true,
  detailView: true,
  detailFormatter: 'detailFormatter',
  pagination: true,
  paginationLoop: false,
  classes: 'table table-hover table-no-bordered',
  sidePagination: 'server',
  silentSort: false,
  queryParamsType:'',
  queryParams: queryParams : function(params) {
   var subcompany = $('#subcompany option:selected').val();
   var name = $('#name').val();  
     return {
   pageNumber: params.offset+1,
   pageSize: params.limit,
   companyId:subcompany,
   name:name
   };
  },
  smartDisplay: false,
  idField: 'id',
  sortable: false,
  escape: true,
  idField: 'systemId',
  maintainSelected: true,
  toolbar: '#toolbar',
  columns: [
   {field: 'state', checkbox: true},
   {field: 'id', title: '編號(hào)', sortable: true, halign: 'center'},
   {field: 'username', title: '賬號(hào)', sortable: true, halign: 'center'},
   {field: 'password', title: '密碼', sortable: true, halign: 'center'},
   {field: 'name', title: '姓名', sortable: true, halign: 'center'},
   {field: 'sex', title: '性別', sortable: true, halign: 'center'},
   {field: 'age', title: '年齡', sortable: true, halign: 'center'},
   {field: 'phone', title: '手機(jī)', sortable: true, halign: 'center'},
   {field: 'email', title: '郵箱', sortable: true, halign: 'center'},
   {field: 'address', title: '地址', sortable: true, halign: 'center'},
   {field: 'remark', title: '備注', sortable: true, halign: 'center'},
   {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
  ]
 }).on('all.bs.table', function (e, name, args) {
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="popover"]').popover(); 
 });

bootstrap-table是一種表格插件，可用作后管系統(tǒng)的數(shù)據(jù)處理和回顯，當(dāng)然，bootstrap-table的使用需要前后臺(tái)協(xié)調(diào)進(jìn)行。

在使用bootstrap-table過(guò)程中需要注意：

接口返回?cái)?shù)據(jù)格式[json]包含的兩個(gè)字段： total（數(shù)據(jù)總計(jì)）與rows（數(shù)據(jù)）,即{"total":24,"rows":[...]}

分頁(yè)包括服務(wù)器端和客戶(hù)端兩種情況，務(wù)器端分頁(yè)的參數(shù)默認(rèn)值為limit，offset,search,sort,order Else,通過(guò)queryParamsType參數(shù)可對(duì)其進(jìn)行重寫(xiě)

columns字段中：file 表示返回字段的屬性名；title表示th標(biāo)題內(nèi)容；formatter表示自定義列表顯示內(nèi)容，包含三個(gè)參數(shù),value, row, index，對(duì)應(yīng) 為file值，行數(shù)據(jù)，行數(shù)

function actionFormatter(value, row, index) {
 return [
 
  '<a class="like" href="detail.html" rel="external nofollow" data-toggle="tooltip" title="詳情"><i class="glyphicon glyphicon-pencil"></i></a>　',
  '<a class="edit ml10" href="javascript:createAction()" rel="external nofollow" data-toggle="tooltip" title="修改密碼"><i class="glyphicon glyphicon-edit"></i></a>　',
 ].join('');
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：bootstraptable表格插件使用詳解
瀏覽路徑：http://www.rwnh.cn/article8/ipcpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、定制開(kāi)發(fā)、網(wǎng)站維護(hù)、建站公司、定制網(wǎng)站、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

bootstraptable表格插件使用詳解