Bootstrap Table 实现行内编辑+列拖动+前台添加行+前台删除行+点击保存传List对象到后台
本文实现Bootstrap Table 行内编辑 列拖动 list数组提交到后台
阅读目录
- html代码
- Js代码 main.js
- 后台Controller代码
- 问题总结
- 行内编辑与行拖动都需要引入js插件
- 行内编辑遇到的问题
- 行拖动
- 删除行时遇到的问题
- Controller接收list数据
- 源码地址
html代码
<html>
<head>
<meta charset="UTF-8">
<title>行内编辑+列拖动title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<link href="css/bootstrap-editable.css" rel="stylesheet"/>
<link href="css/bootstrap-table-reorder-rows.scss" rel="stylesheet">
<script src="js/jquery.min.js">script>
<script src="js/bootstrap.min.js">script>
<script src="js/bootstrap-table.min.js">script>
<script src="js/bootstrap-table-zh-CN.min.js">script>
<script src="js/bootstrap-editable.js">script>
<script src="js/bootstrap-table-editable.js">script>
<script src="js/jquery.tablednd.min.js">script>
<script src="js/bootstrap-table-reorder-rows.js">script>
<script src="main.js">script>
head>
<body>
<center><h1>Bootstrap Table 行内编辑 列拖动 list数组提交到后台h1>center>
<div class="columns pull-left">
<button type="button" class="btn btn-primary" onclick="addrow()">
<i class="fa fa-plus" aria-hidden="true">i>添加
button>
<button type="button" class="btn btn-danger" onclick="batchRemove()">
<i class="fa fa-trash" aria-hidden="true">i>删除
button>
div>
<table style="table-layout: fixed;word-break:break-all;margin: 0 auto;" id="exampleTable" data-mobile-responsive="true">
table>
<button type="button" class="btn btn-primary pull-right" onclick="svae()">保存button>
body>
html>
Js代码 main.js
$(document).ready(function() {
//修改行内编辑显示模式 `popup` / `inline` mode
$.fn.editable.defaults.mode = 'inline';
load();
});
//初始化表格
function load() {
$('#exampleTable')
.bootstrapTable(
{
method : 'get', // 服务器数据的请求方式 get or post
url : "json/test.json", // 服务器数据的加载地址
iconSize : 'outline',
uniqueId:"pkId",//为每一行指定唯一的标识符
toolbar : '#exampleToolbar',
striped : true, // 设置为true会有隔行变色效果
dataType : "json", // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect : false, // 设置为true将禁止多选
// contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
//search : true, // 是否显示搜索框
sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
reorderableRows: true,//实现行拖拽 需导入bootstrap-table-reorder-rows.js
queryParams : function(params) {
return {
//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
};
},
columns : [
{
checkbox : true
},/*
{
field : 'id',
title : '序号' ,
formatter : function(value, row, index) {
//var elIn = params.limit;
return (index +1) + (pageCt*pagelim) ;
}
},*/ {
field : 'urlPattern',
title : '地址',
editable: {
type: 'text',
validate: function (v) {
if (!v) return '不能为空';
}
}
},
{
field : 'expr',
title : '表达式',
formatter : function(value, row, index) {
return value.replace('"', '"');
},
editable: {
type: 'text',
validate: function (v) {
if (!v) return '不能为空';
}
}
},
{
field : 'beforeRwt',
title : '方式',
formatter : function(value, row, index) {
if (value && value == true) {
return 1;
} else {
return 0;
}
},
editable: {
type: 'select',
title: '方式',
source: function () {
var result = [];
$.ajax({
url: 'json/beforeRwt.json',
async: false,
success: function (data, status) {
$.each(data, function (key, value) {
result.push({ value: value.value, text: value.name });
});
}
});
return result;
},
validate: function (v) {
if (!v) return '不能为空';
}
}
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
var d = ' ';
return d ;
}
} ]
});
}
/*
* 增加行
*/
function addrow() {
var count = $('#exampleTable').bootstrapTable('getData').length;
// newFlag == 1的数据为新规的数据
$('#exampleTable').bootstrapTable('append',{
pkId : count + 1,
urlPattern: '*',
filterType: 'ADDRPART',
expr: '#http',
charset:'utf-8',
scene:'RESPONSE',
beforeRwt:false,
resourceId : $('#resourceId').val()
});
};
/*
* 删除行
*/
function remove(id) {
var uid=$(id).parent().parent().attr("data-uniqueid");
$('#exampleTable').bootstrapTable('removeByUniqueId',uid);
$("#exampleTable").bootstrapTable('load',$("#exampleTable").bootstrapTable('getData'));//加载新数据到表格中
}
/*
* 批量删除行
*/
function batchRemove() {
var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
var ids = new Array();
// 遍历所有选择的行数据，取每条数据对应的ID
$.each(rows, function(i, row) {
//ids[i] = row['pkId'];
$('#exampleTable').bootstrapTable('removeByUniqueId',row['pkId']);
});
$("#exampleTable").bootstrapTable('load',$("#exampleTable").bootstrapTable('getData'));//加载新数据到表格中
}
/**
* 保持值到后台
*/
function svae() {
var info = $("#exampleTable").bootstrapTable('getData');
var jsonString = JSON.stringify(info);
$.ajax({
cache : true,//在后边增加时间戳
contentType : 'application/json;charset=utf-8',//传值类型
type : "POST",//请求类型
url : "/url/batchsave",//url
data : jsonString,//data
async : false,//是否异步
error : function(request) {
//失败操作
alert("Connection error");
},
success : function(data) {
if (data.code == 0) {
alert("操作成功");
reLoad();
} else {
alert(data.msg)
}
}
});
}
后台Controller代码
/**
* 保存
* @return
*/
@ResponseBody
@PostMapping("/batchsave")
public R batchsave(@RequestBody List<Filter> filters){
//遍历list
for (Filter filter : filters) {
System.out.println(filter.getExpr());
}
return R.ok();
}
问题总结
行内编辑与行拖动都需要引入js插件
行内编辑遇到的问题
bootstrap-table-editable.js 文件需自己创建 官网上没有 源码里有
数据中出现 "#/js/ 这种值 输入框就会出现Empty 但是确实是有值的只是js解析时出了问题
用这字符串替换来解决
行拖动
需要添加参数 reorderableRows: true,//实现行拖拽
删除行时遇到的问题
使用removeByUniqueId需要添加参数 uniqueId:“pkId”,//为每一行指定唯一的标识符
使用removeByUniqueId删除之后 使用getSelections还可以获取到删除的值
原因是需要删除值后重新加载一下前台的值$("#exampleTable").bootstrapTable('load',$("#exampleTable").bootstrapTable('getData'));//加载新数据到表格中
Controller接收list数据
需要js将数据传为json
var info = $("#exampleTable").bootstrapTable(‘getData’);//获取表格数据
var jsonString = JSON.stringify(info);//转换为json
后台需要使用@RequestBody注解
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)
源码地址
链接: https://pan.baidu.com/s/1CTeaJoEpbzaUQ8ruR7rtwQ
提取码: i64x