1. 初始化bootstrap-table
e.g. 以我在项目中应用到的实例来讲解
在HTML中引入以下代码即可:
<div id="adminTable"></div>
在js中初始化代码如下:
$("#adminTable").bootstrapTable({
method : 'get', // 服务器数据的请求方式 get or post
url : prefix+"?op=LISTUSERS®ionid="+regionId+"&groupid="+groupId+"&usertype=false",
iconSize : 'outline',
toolbar : '#adminToolbar',
striped : false, // 设置为true会有隔行变色效果
dataType : "json", // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数
singleSelect : false, // 设置为true将禁止多选
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
search : false, // 是否显示搜索框
showColumns : false, // 是否显示内容下拉框(选择显示的列)
sidePagination : "client", // 设置在哪里进行分页,可选值为"client" 或者"server"
ajaxOptions:{ //自定义请求头信息
headers: {
key1 : value1,
key2 : value2,
......
}
},
responseHandler: function (result) {//在ajax请求成功后,对返回数据进行预处理
return getTableData(result);
},
columns : [
{
checkbox : true
},
{
field : 'nodeId', // 列字段名
title : '序号' // 列标题
},
{
field : 'userName',
title : '用户名'
},
{
field : "userInfo",
visible : false
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
var e = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="编辑" onclick="editAdmin(\''
+ row.nodeId+":"+row.userName+":"+false
+ '\')"><i class="fa fa-edit "></i></a> ';
var d = '<a class="btn btn-warning btn-sm " href="#" title="删除" mce_href="#" onclick="remove(\''
+ row.nodeId+":"+row.userName+":"+false
+ '\')"><i class="fa fa-remove"></i></a> ';
var f = '<a class="btn btn-success btn-sm " href="#" title="重置密码" mce_href="#" onclick="resetPwd(\''
+ row.nodeId+":"+row.userName+":"+false
+ '\')"><i class="fa fa-key"></i></a> ';
return e + d + f;
}
}],
onDblClickRow: function (row) {//双击表格行监听方法
},
onLoadSuccess: function(){ //加载成功时执行
},
onLoadError: function(result){ //加载失败时执行
layer.msg("adminTable load esrror:"+result.message);
}
});
如以上所示,初始化bootstrap-table实例时,需要指定多个参数。
总结以上参数说明,其中主要的几个参数如下:
- http请求参数
method:请求类型
url:资源路径
ajaxOptions:自定义请求参数
- http请求预处理
responseHandler: function (result){ return result.data}
- 分页设置
分页可选择在服务端分页、客户端分页
服务端分页:http请求中会自动添加limit、pageNum参数来请求分页数据;
客户端分页:向服务端请求所有数据,由网页将所有数据处理分页,呈现在页面中的是数据的分页显示状态。
- 定义列columns
columns 是一个json数组,数组的长度对应列数,每个json元素对应列内容,包括:field–列属性、title–列名,columns 的定义决定了其加载数据的标准格式
- 添加监听函数
可根据需要添加多个监听函数,如以上示例代码,使用了3个监听函数
2. bootstrap-table要求数据格式
以上实例代码中可以看出,bootstrap-table可直接发送http请求数据,是将数据直接渲染到页面中的。
因此,返回的数据格式有一定的要求:
{total : rowNum,//rowNum为rows的数组长度
rows : [//rows为json对象数组
{//键值对根据表格初始化中的columns结构而定
fieldName1 : fieldValue1 ,
fieldName2 : fieldValue2 ,
fieldName3 : fieldValue3 ,
......},
{
fieldName1 : fieldValue1 ,
fieldName2 : fieldValue2 ,
fieldName3 : fieldValue3 ,
......},
......
]
}
注意:如果使用了预处理函数,获得的数据格式与内容都是正确,但无法在页面中渲染出来,请尝试在预处理函数中只返回rows(json对象数组)。
3.重载表格
使用新的表格参数及url重新加载表格数据:重新执行表格初始化方法
4.刷新表格
当前的表格所有参数不变,执行以下方法刷新表格
$(“#adminTable”).bootstrapTable('refresh');
5. 完整删除表格
$(“#adminTable”).bootstrapTable('destroy');
6. 添加行
var row = {
nodeId : result.nodeId,
userName : result.userName,
userInfo : result.nodeId+":"+result.userName+":"+result.user
};
$("#adminTable").bootstrapTable('prepend',row);
参数名 | 意义 |
---|---|
prepend (append) | 插入位置 |
row | 插入行数据 |
7. 删除行
$("#adminTable").bootstrapTable('remove', {
field : "nodeId",
values : [parseInt(userInfo[0])]
});
参数名 | 意义 |
---|---|
remove | 操作类型 |
field | 指定列属性名 |
values | 删除行对应field列值 注意此为数组,并且数据类型须与初始化赋值时相同 |
8. 修改行
$("#adminTable").bootstrapTable('updateRow', {
index : 1,
row : rowInfo
});
参数名 | 意义 |
---|---|
updateRow | 操作类型 |
index | 指定行序号 |
row | 根据column定义的行内容:json格式 |
以下为学习过程中对我帮助比较大的文章,若如上解释未解决您的问题,可参考如下链接:
前端表格插件 BootstrapTable 入门教程
bootsrap官方文档
使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
bootstrap填坑之旅
bootsrap使用小结