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

//請求服務數(shù)據(jù)時所傳參數(shù)function queryParams(params){return{//每頁多少條數(shù)據(jù)pageSize: params.limit,//請求第幾頁pageIndex: params.pageNumber,}} //創(chuàng)建表格$('#table').bootstrapTable({method: 'get',url: "../controller/main_pic_list.php",//后臺接口地址dataType: "json",pagination: true, //分頁search: true, //顯示搜索框，是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端strictSearch: true,//Enable the strict searchstriped: true, //是否顯示行間隔色pageNumber: 1, //初始化加載第一頁，默認第一頁pageSize: 5,//每頁的記錄行數(shù)pageList:[5,10,15,20,25,30],//分頁步進值showRefresh:true,//刷新按鈕showColumns:true,//是否顯示所有的列//sortable: true,//是否啟用排序//sortOrder: "asc",//排序方式//uniqueId: "ID",//每一行的唯一標識，一般為主鍵列showToggle:true,//是否顯示詳細視圖和列表視圖的切換按鈕//cardView: false,//是否顯示詳細視圖//detailView: false,//是否顯示父子表//toolbar: '#toolbar',//指定工具欄//clickToSelect: true,//是否啟用點擊選中行//toolbarAlign:'right',//工具欄對齊方式//buttonsAlign:'right',//按鈕對齊方式queryParamsType:'limit',//查詢參數(shù)組織方式queryParams:queryParams,//請求服務器時所傳的參數(shù)cache: false,//是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）locale:'zh-CN',//中文支持sidePagination: "server", //服務端處理分頁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',//復選框checkbox:true,width:25,align:'center',valign:'middle'},{title: 'id',field: 'id',align: 'center'},{title: '標題',field: 'title',align: 'center',valign: 'middle'},{title: '說明信息',field: 'altinfo',align: 'center',},{title: '所屬模塊',field: 'modname',align: 'center'},{title: '圖片URL',field: 'pictureurl',align: 'center',
　　　　　　　　　　　　//更改此項顯示的內(nèi)容，無此參數(shù)會顯示默認值formatter:function(value,row,index){return '<a href="'+ value +'" target=_blank>'+value+'</a> ';}},{title: '狀態(tài)',field: 'status',align: 'center'},{title: '權重',field: 'weight',align: 'center'},{title: '最近更新時間',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',
　　　　　　　　　　　　//更改此項顯示的內(nèi)容，無此參數(shù)會顯示默認值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表格插件自帶分頁功能，傳遞的參數(shù)要和后臺協(xié)商定義好；2. 其他參數(shù)配置參考代碼中的注釋。

?

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

總結(jié)

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

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