标签：bootstraptable function springboot data userId user true row

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 onl oad="fenye_init2();">
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<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" style="text-align:left;">
<button type="button" style="margin-left:50px" 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"style="margin-top:5%;">
<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代码

}, {
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" ' +
'style="margin-left:15px" title="修改用户">' +
'<span class="glyphicon glyphicon-info-sign"></span></a>' +
'<a href="####" class="btn btn-danger" id="delUser" data-toggle="modal" data-target="#deleteuser" ' +
'style="margin-left:15px" 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,function,springboot,data,userId,user,true,row
From： https://www.cnblogs.com/chuangsi/p/17342248.html

springboot+bootstraptable

springboot+bootstraptable

html页面

JS代码

后台代码

实现效果

相关文章

赞助商

阅读排行