bootstrp-table學習,具體內容如下
$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: '編號', sortable: true, halign: 'center'}, {field: 'username', title: '賬號', 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: '手機', 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是一種表格插件,可用作后管系統的數據處理和回顯,當然,bootstrap-table的使用需要前后臺協調進行。
在使用bootstrap-table過程中需要注意:
接口返回數據格式[json]包含的兩個字段: total(數據總計)與rows(數據),即{"total":24,"rows":[...]}
分頁包括服務器端和客戶端兩種情況,務器端分頁的參數默認值為limit,offset,search,sort,order Else,通過queryParamsType參數可對其進行重寫
columns字段中:file 表示返回字段的屬性名;title表示th標題內容;formatter表示自定義列表顯示內容,包含三個參數,value, row, index,對應 為file值,行數據,行數
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('');}
新聞熱點
疑難解答
圖片精選