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:'tabletable-hovertable-no-bordered',
sidePagination:'server',
silentSort:false,
queryParamsType:'',
queryParams:queryParams:function(params){
varsubcompany=$('#subcompanyoption:selected').val();
varname=$('#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,orderElse,通过queryParamsType参数可对其进行重写
columns字段中：file表示返回字段的属性名；title表示th标题内容；formatter表示自定义列表显示内容，包含三个参数,value,row,index，对应为file值，行数据，行数
functionactionFormatter(value,row,index){
return[
'',
'',
].join('');
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。