1、实现效果
2、定义id="toolbar"的容器(id可以自定义)
<div class="row" id="toolbar">
<div class="col-sm-3">
<button class="btn btn-w-m btn-primary glyphicon glyphicon-plus" data-toggle="modal"
href="#addType" data-keyboard="true" data-backdrop="false"
id="btn_add">新增</button>
</div>
<div class="col-sm-3">
<button class="btn btn-w-m btn-primary glyphicon glyphicon-edit" data-toggle="modal" href="#"
onclick="javascript:showUpdateModal()" data-keyboard="true"
data-backdrop="false" id="btn_up">修改</button>
</div>
<div class="col-sm-3">
<button class="btn btn-w-m btn-primary glyphicon glyphicon-remove" id="btn_del"
onclick="deleteType()">删除</button>
</div>
</div>
3、在bootstrapTable初始化函数中添加toolbar
var $table=$('#table');
$table.bootstrapTable({
url:"/ssm_test/type/getType",
toolbar:'#toolbar',
dataType:'json',
method:'post',
contentType:"application/x-www-form-urlencoded",//发送到服务器的数据编码类型
pagination:true, //是否显示分页
pageSize:30, //设置每页的记录行数
pageNumber:1, //设置首页页码
singleSelect:false, //设置是否单选
checkboxHeader:true,
clickToSelect:true,
showRefresh:true, //是否显示刷新按钮
showToggle:true, //是否显示详细视图和列表视图的切换按钮
showColumns:true, //选择要显示的列
striped: true, //是否显示行间隔色
queryParamsType:"undefined",//设置参数格式
queryParams:function queryParams(params) {//设置查询参数
var params={
page:params.pageNumber,
rows:params.pageSize
};
return params;
},
catch:false, //禁用AJAX数据缓存
sidePagination:"server", //服务端处理分页
columns:[{
checkbox:true
},{
title:'类型id',
field:'id',
valign:'middle'
},{
title:'类型名称',
field:'name',
valign:'middle'
}]
});
})
