springboot+bootstraptable

Posted 2023-04-22 chuangsi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springboot+bootstraptable相关的知识，希望对你有一定的参考价值。

springboot+bootstraptable

项目采用的是springboot+bootstraptable搭建的demo https://blog.csdn.net/weixin_43373818/article/details/114714016
基础的增删改查已经实现

html页面

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width"/>
<title>BootStrap Table使用</title>
<script th:src="@/js/jquery-1.9.1.min.js"></script>
<script th:src="@/js/fenYe2.js"></script>

</head>
<body onload="fenye_init2();">
<div class="panel-body" >
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" >
<label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_status">状态</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_status">
</div>
<div class="col-sm-4" >
<button type="button" id="btn_query" class="btn btn-primary">查询
</button>
</div>
</div>
</form>
</div>
</div>

<div class="modal fade"id="addModal"tabindex="-1"role="dialog"aria-labelledby="addModalLabel"data-backdrop="false">
<div class="modal-dialog"role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close"data-dismiss="modal"aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title"id="addModalLabel">新增用户信息</h4>
</div>
<div class="modal-body">
<form id="add_form_modal"class="form-horizontal">
<input type="hidden"name="userId"class="form-control"id="userId">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="userName">用户名</label>
</div>
<div class="col-sm-9">
<input type="text"name="userName"class="form-control"id="userName">
</div>

</div>

</form>
<div class="modal-footer">
<button type="button"class="btn btn-default btn_reset_c"data-dismiss="modal"><span
class="glyphicon glyphicon-remove"aria-hidden="true"></span>取消
</button>
<button type="button"id="btn_add_reset"class="btn btn-default btn_reset_c">
<span class="glyphicon glyphicon-share-alt"aria-hidden="true"></span>重置
</button>
<button type="button"id="btn_add_submit"class="btn btn-primary"data-dismiss="modal"><span
class="glyphicon glyphicon-floppy-disk"aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
</div>

</div>
</body>
</html>

JS代码

function fenye_init2()
fenye_search2();

function fenye_search2()
var $table= $(\'#taskInfo\').bootstrapTable(
method: \'get\',
url: "/user/all2",
striped : true, // 是否显示行间隔色
pagination : true, // 启动分页显示第1到第10条记录
pageSize : 10, // 每页显示的记录数
pageNumber : 1, // 当前第几页
//pageList : [ 5, 10, 15, 20, 25 ], // 记录数可选列表
showColumns : true, // 是否显示所有的列
dataType : \'json\',
//search : true, // 是否启用查询显示搜索input框
// sidePagination : "server", // 表示服务端请求
sidePagination : "client", // 表示服务端请求
showRefresh : true, // 显示刷新按钮
toolbar: \'#toolbar\', // 工具按钮用哪个容器新增/删除/修改按钮
clickToSelect: true, // 是否启用点击选中行
showToggle: false, // 是否显示详细视图和列表视图的切换按钮
cardView: false, // 是否显示详细视图
detailView: false, // 是否显示父子表
cache: false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
uniqueId: "ID", // 每一行的唯一标识，一般为主键列
singleSelect : true, // 单选checkbox
paginationLoop : false, // 启用分页条无限循环的功能
detailView : false,
paginationPreText : \'上一页\', // 指定分页条中上一页按钮的图标或文字。
paginationNextText : \'下一页\', //指定分页条中下一页按钮的图标或文字。
/*onPageChange : function(number, size)
fenye_search(number, size);
,
onRefresh : function()
fenye_search(1,10);
,*/
queryParams: function (params)
// search: "开启search中的值", sort: undefined, order: "asc", offset: 0, limit: 5
var returnObject =
limit: params.limit,
departmentname:$("#txt_search_departmentname").val(),
status:$("#txt_search_status").val(),

return returnObject
,
columns : [

checkbox: true
,

title : \'userId\',
field : \'userId\',
align : \'center\',
valign : \'middle\',
// visible : false
// switchable: false
,

title : \'姓名\',
field : \'userName\',
align : \'center\',
valign : \'middle\'
,
title : \'电话\',
field : \'phone\',
align : \'center\',
valign : \'middle\'

,
title : \'部门\',
field : \'departmentname\',
align : \'center\',
valign : \'middle\'

,
title : \'描述\',
field : \'status\',
align : \'center\',
valign : \'middle\'
,
title : \'操作\',
field : \'operate\',
formatter: btnGroup, // 自定义方法，添加按钮组
events: // 注册按钮组事件
\'click #modRole\': function (event, value, row, index)
showUser(row.id, row.username)
,
\'click #modUser\': function (event, value, row, index)
showInfo(row.userId)
,
\'click #delUser\': function (event, value, row, index)
delUser(row)

]
);
$(\'body\').on(\'click\',\'#\',function ()
//在这监控body里的事件
)
//查询按钮事件
$(\'#btn_query\').click(function()
$(\'#taskInfo\').bootstrapTable(\'refresh\',
url : \'/user/all2\'
);
)
function delUser(row)
console.log(row.userId)
console.log(row.userName)
$.ajax(
type: "get",
dataType: "json",
url: "/user/delete",
data: ids:row.userId,
success: function (data)
if (data.state != 0)
$table.bootstrapTable(\'refresh\');

)

function btnGroup () // 自定义方法，添加操作按钮
// data-target="xxx" 为点击按钮弹出指定名字的模态框
let html =
\'<a href="####" class="btn btn-info" id="modRole" data-toggle="modal" data-target="#editrole" title="修改权限">\' +
\'<span class="glyphicon glyphicon-edit"></span></a>\' +
\'<a href="####" class="btn btn-warning" id="modUser" data-toggle="modal" data-target="#editinfo" \' +
\' title="修改用户">\' +
\'<span class="glyphicon glyphicon-info-sign"></span></a>\' +
\'<a href="####" class="btn btn-danger" id="delUser" data-toggle="modal" data-target="#deleteuser" \' +
\' title="删除用户">\' +
\'<span class="glyphicon glyphicon-trash"></span></a>\'
return html
;
//删除按钮
$(\'#btn_delete\').click(function()
var rows = $table.bootstrapTable(\'getSelections\');
// 删除值修改选中的第一行数据
// var rows = this.getSelectedTableData();
if (rows.length == 0)
alert(\'请先勾选需要操作的数据源\');
return false;

// 删除值修改选中的第一行数据
var ids = [];
$.each(rows, function (index, row)
ids.push(row.userId);
);

$.ajax(
type: "get",
dataType: "json",
url: "/user/delete",
data: ids:ids.toString(),
success: function (data)
if (data.state != 0)
$table.bootstrapTable(\'refresh\');

)
)

$("#btn_add").click(function ()
$("#addModal").modal(
keyboard: true
);
clearForm("#add_form_modal");// 清除表单上一次的输入数据
)

function showInfo (userid)
$("#addModal").modal(
keyboard: true
);
$.getJSON("/user/findById?userId="+userid,function(data)
$("#userId").val(data.userId)
$("#userName").val(data.userName)
$("#password").val(data.password)
$("#phone").val(data.phone)
$("#departmentname").val(data.departmentname)
$("#status").val(data.status)
)

// helper: 重置表单
function clearForm(form)
$(form)[0].reset();

// 当点击【保存】按钮后，将表单中的数据提交到后台
$("#btn_add_submit").on("click",function ()
$.ajax(
type: "post",
url: "/user/save",
data: $("#add_form_modal").serializeArray(), // 收集表单中的数据
dataType: "text",
success: function (data)
// $.getJSON("/user/all",function(data)
//initDataTable("destroy", data); // 接收到后台返回的数据后，重新渲染table，具体怎么初始化table见上一章
// $table.bootstrapTable(\'load\',data)
$table.bootstrapTable(\'refresh\',data)
// );

);
);

后台代码

@Controller
@RequestMapping(value = "/user")
public class UserController

@Autowired
private UserService userService;

@ResponseBody
@RequestMapping("/add")
public int addUser(User user)
return userService.addUser(user);

@ResponseBody
@RequestMapping("/addAll")
public void addUserAll()
for (int i = 1; i < 100; i++)
User user = new User();
user.setUserName("haha"+i);
user.setPassword("pwd"+i);
user.setPhone("pho"+i);
userService.addUser(user);

@ResponseBody
@RequestMapping("/all")
public Object findAllUser(PageInfo pageInfo)
return userService.findAllUser(pageInfo.getPageNum(),pageInfo.getPageSize());

@ResponseBody
@RequestMapping("/all2")
public Object findAllUser(User user)
return userService.selectAll(user);

@ResponseBody
@RequestMapping("/delete")
public Integer delete(String ids)
String[] split = ids.split(",");
List<Integer> ids2 = new ArrayList<>();
for (String s : split)
ids2.add(Integer.parseInt(s));

System.out.println("ids = " + ids2);
return userService.delete(ids2);

@ResponseBody
@RequestMapping("/save")
public Object save(User user)
Object allUser = findAllUser(new User());
if (user != null && user.getUserId() != null)
userService.update(user);
else
userService.save(user);

return allUser;

@ResponseBody
@RequestMapping("/findById")
public Object findById(String userId)
return userService.findById(userId);

实现效果

效果地址（求别乱玩）

源码地址

https://gitee.com/zhaohaiqi/springboot-bootstraptable

bootstraptable设置某一列的宽度

参考技术A <table id="example1"
class="table table-bordered table-striped table-responsive"
style="min-width:1000px;table-layout: fixed;word-break:break-all;">
<thead>
<tr>
<th style="width:4%;">序号</th>
<th style="width:24%;">Task ID</th>
<th style="width:45%;">参数</th>
<th>Task 名称</th>
<th>执行时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>

table-layout: fixed; 固定表格宽度
word-break:break-all; 列的内容换行
<th style="width:4%;">序号</th> width:4% 设置列的宽度

以上是关于springboot+bootstraptable的主要内容，如果未能解决你的问题，请参考以下文章

SpringBoot 中，返回给前端如 Vuethymeleaf javascript 插件如 bootstrapTable时，将code码转换成文本显示

bootstrap-table方法

bootstraptable设置某一列的宽度

bootstrap-table笔记

怎样修改bootstrap table detailformatter

bootstrap table怎么选择多行