近期剛剛結(jié)束一個(gè)項(xiàng)目，總結(jié)一下之前做的一個(gè)后臺(tái)管理系統(tǒng)中用到的bootstrap-table表格插件，下面是我做的一個(gè)案例（展示主要代碼部分）：

//請(qǐng)求服務(wù)數(shù)據(jù)時(shí)所傳參數(shù)function queryParams(params){return{//每頁(yè)多少條數(shù)據(jù)pageSize: params.limit,//請(qǐng)求第幾頁(yè)pageIndex: params.pageNumber,}} //創(chuàng)建表格$('#table').bootstrapTable({method: 'get',url: "../controller/main_pic_list.php",//后臺(tái)接口地址dataType: "json",pagination: true, //分頁(yè)search: true, //顯示搜索框，是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端strictSearch: true,//Enable the strict searchstriped: true, //是否顯示行間隔色pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)pageSize: 5,//每頁(yè)的記錄行數(shù)pageList:[5,10,15,20,25,30],//分頁(yè)步進(jìn)值showRefresh:true,//刷新按鈕showColumns:true,//是否顯示所有的列//sortable: true,//是否啟用排序//sortOrder: "asc",//排序方式//uniqueId: "ID",//每一行的唯一標(biāo)識(shí)，一般為主鍵列showToggle:true,//是否顯示詳細(xì)視圖和列表視圖的切換按鈕//cardView: false,//是否顯示詳細(xì)視圖//detailView: false,//是否顯示父子表//toolbar: '#toolbar',//指定工具欄//clickToSelect: true,//是否啟用點(diǎn)擊選中行//toolbarAlign:'right',//工具欄對(duì)齊方式//buttonsAlign:'right',//按鈕對(duì)齊方式queryParamsType:'limit',//查詢參數(shù)組織方式queryParams:queryParams,//請(qǐng)求服務(wù)器時(shí)所傳的參數(shù)cache: false,//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）locale:'zh-CN',//中文支持sidePagination: "server", //服務(wù)端處理分頁(yè)responseHandler:function(res){//在ajax獲取到數(shù)據(jù)，渲染表格之前，修改數(shù)據(jù)源$.each(res.rows,function (i,v) {v.updatetime = getLocalTime(v.updatetime);});return res;},columns: [{title:'全選',field:'select',//復(fù)選框checkbox:true,width:25,align:'center',valign:'middle'},{title: 'id',field: 'id',align: 'center'},{title: '標(biāo)題',field: 'title',align: 'center',valign: 'middle'},{title: '說明信息',field: 'altinfo',align: 'center',},{title: '所屬模塊',field: 'modname',align: 'center'},{title: '圖片URL',field: 'pictureurl',align: 'center',
　　　　　　　　　　　　//更改此項(xiàng)顯示的內(nèi)容，無此參數(shù)會(huì)顯示默認(rèn)值formatter:function(value,row,index){return '<a href="'+ value +'" target=_blank>'+value+'</a> ';}},{title: '狀態(tài)',field: 'status',align: 'center'},{title: '權(quán)重',field: 'weight',align: 'center'},{title: '最近更新時(shí)間',field: 'updatetime',align: 'center'},{title: '創(chuàng)建者',field: 'createuser',align: 'center'},{title: '最新修改者',field: 'lastuser',align: 'center'},{title: '最近修改者ip',field: 'lastip',align: 'center'},{title: '操作',field: 'operation',align: 'center',
　　　　　　　　　　　　//更改此項(xiàng)顯示的內(nèi)容，無此參數(shù)會(huì)顯示默認(rèn)值formatter:function(value,row,index){var e = '<a href="main_pic_edit.html?id='+ row.id +'">編輯</a> ';var d = '<a href="../controller/main_pic_delete.php?id='+ row.id +'"style="color:red" href="#">刪除</a> ';if(value === 'e') {return e;}if(value === 'ed') {return e+d;}}}]});

　　注意：1.?bootstrap-table表格插件自帶分頁(yè)功能，傳遞的參數(shù)要和后臺(tái)協(xié)商定義好；2. 其他參數(shù)配置參考代碼中的注釋。

?

轉(zhuǎn)載于:https://www.cnblogs.com/crf-Aaron/p/7838129.html

總結(jié)

以上是生活随笔為你收集整理的bootstrap-table表格插件的使用案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。