BootStrap-table插件添加toolbar工具栏
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'
}]
});
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?