bootstrap table表格插件使用详解

bootstrap table表格插件使用详解

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: '姓名', glwYzsortable: 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();

});

bootstrhttp://ap-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 [

'　',

'　',

].join('');

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。