BootStrapTable新增一行数据原有数据消失
#使用BootStrapTable时遇到的问题#
1.新增数据一行表格的数据后,原有的数据内容会被清除
2.想要实现这样的功能
点击删除按钮,原有的数据从页面中删除,把删除的数据的id提交到后端,进行逻辑删除
新增的数据如果想要删除的话,直接点击取消按钮,会根据index来取消该行
遇到的难点
1.mysql在查询的时候如何添加数据的行号
SELECT
@i := @i + 1 AS idx, -- 行号
id,
NAME,
age,
address,
deleteFlag
FROM
student0328,
( SELECT @i := 0 ) VARS
WHERE
deleteFlag = 0
2.如何避免新增一行数据,原有的数据被删除
function updataData(count){
// 创建一个数组,用来存放表格中所有的数据
var params = [];
for(var dataIndex=0;dataIndex<=count;dataIndex++) {
// 使用JQuery选择器找到td标签(也就是包含input标签的标签)对象,这种选法选中了很多td标签,因此需要遍历
var columns = $('#table tr[data-index="'+dataIndex+'"] td');
// 创建一个对象.用来存放表格中一行的数据
var obj = {};
for (var i=0; i < columns.length -1; i++) {
// 对td标签进行遍历,遍历出一个个的tr标签(tr标签内包含有input标签)
// 找到tr标签内的input对象
var td = $(columns[i]).find('input');
// 获取id属性所对应的值
var key = td.attr('id');
// 获取input输入框内已经输入的值(添加$.trim()是为了防止更新的时候添加很多空的字符串)
obj[key] = $.trim(td.val());
}
/*
* {index:索引值, row:每行索引对应的数据(是一个对象)}
* 表格中每一行的数据
* {index:0, row:{id: "1", name: "XXX", age: "18", address: "XX"}}
* {index:1, row:{id: "1", name: "XXX", age: "20", address: "XX"}}
* */
params.push({index:dataIndex, row:obj});
}
console.info(params);
// 对表格中的数据进行更新
$('#table').bootstrapTable("updateRow",params);
}
下面是完成的HTML代码
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
head>
<body>
<table id="table" style="width: 500px;height: 800px">
table>
<br>
<button id="addData" onclick="addData()">追加button>
<br>
<button id="btn" onclick="addFormList()">登录button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous">script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js">script>
body>
<script>
// 全局变量,向后端发送的数据对象
var obj = {};
// 全局数组,存放删除的列表,用来向后端发送请求时使用
var deleteList = [];
/**
* 初始化表格
* */
$('#table').bootstrapTable({
url:"/index/search",
//表格的列
columns: [
{
field: 'idx',//域值
title: '索引值',//标题
sortable: false
},
{
field: 'id',//域值
title: 'ID',//标题
sortable: true,//启用排序
formatter: idOperate
},
{
field: 'name',//域值
title: '姓名',//标题
sortable: true,//启用排序
formatter: nameOperate
},
{
field: 'age',
title: '年龄',
formatter: ageOperate
},
{
field: 'address',
title: '状态',
sortable: true,
formatter: addressOperate
},
{
field: 'deleteFlag',
title: '按钮',
formatter : deleteFlag
}
]
});
// 点击登录按钮,把表格中输入的数据提交到后端
function addFormList() {
// 我们可以通过传入index索引来获取行对象,通常在删除数据的时候会用到
// var row = $('#table').bootstrapTable('getData')[index]
// 获取整个表格的所有数据
var data = $('#table').bootstrapTable('getData');
// 获取整个表格数据的长度
var count = data.length;
/**
* 把插入的数据更新到表格当中
* 之所以要在登录之前调用这个函数是因为用户输入完追加表格的数据之后,只有调用updataData()方法
* 才能把数据更新到整个表格对象中
* */
updataData(count);
// 向全局对象中封装数据,students和deleteIdList命名要和后端的封装属性保持一致,否则后端无法接收参数
obj.students = data;
obj.deleteIdList = deleteList;
console.info(JSON.stringify(obj));
// 向后端发送post请求,提交前端输入好的数据
$.ajax({
url : '/index/insert',
type: "POST",
datatype:"json",
contentType: "application/json;charset=utf-8",
data:JSON.stringify(obj),
success : function(data, stats) {
console.log(data); // {age1: 108,name1: "jiamingwei添加铭威"}
console.log(stats); // success
},
error : function(data) {
alert("请求失败");
}
})
}
// 更新表格的数据
function updataData(count){
// 创建一个数组,用来存放表格中所有的数据
var params = [];
for(var dataIndex=0;dataIndex<=count;dataIndex++) {
// 使用JQuery选择器找到td标签(也就是包含input标签的标签)对象,这种选法选中了很多td标签,因此需要遍历
var columns = $('#table tr[data-index="'+dataIndex+'"] td');
// 创建一个对象.用来存放表格中一行的数据
var obj = {};
for (var i=0; i < columns.length -1; i++) {
// 对td标签进行遍历,遍历出一个个的tr标签(tr标签内包含有input标签)
// 找到tr标签内的input对象
var td = $(columns[i]).find('input');
// 获取id属性所对应的值
var key = td.attr('id');
// 获取input输入框内已经输入的值(添加$.trim()是为了防止更新的时候添加很多空的字符串)
obj[key] = $.trim(td.val());
}
/*
* {index:索引值, row:每行索引对应的数据(是一个对象)}
* 表格中每一行的数据
* {index:0, row:{id: "1", name: "XXX", age: "18", address: "XX"}}
* {index:1, row:{id: "1", name: "XXX", age: "20", address: "XX"}}
* */
params.push({index:dataIndex, row:obj});
}
console.info(params);
// 对表格中的数据进行更新
$('#table').bootstrapTable("updateRow",params);
}
// 追加一行新数据
function addData() {
var count = $('#table').bootstrapTable('getData').length;
// 在插入之前先更新表格的数据
updataData(count);
$('#table').bootstrapTable('insertRow', {
// 若删除,则无法追加新列.每增加一行新列就会给索引增加一位
index: count + 1,
// 初始化新添加的行中的值(因为是新添加的,所以值为空)
row: {
// 每增加一行的时候给索引+1
idx: count + 1,
id: '',
name: '',
age: '',
address : ''
}
});
}
function deleteFlag(value, row, index) {
// 根据不同的情况显示不同状态下的按钮
if (row.deleteFlag == false){
return ' index + ',' + row.idx + ')">删除'
} else if (row.deleteFlag == true){
return ''
}
else {
return ' row.idx +')">取消'
}
}
function deleteData(index,idx) {
var row = $("#table").bootstrapTable('getData')[index];
// 把要删除的数据的id放到list列表中
deleteList.push(row.id);
$('#table').bootstrapTable('remove', {
field: 'idx',
// values所对应的一定要是一个数组,否则会报错
values: [parseInt(idx)]
});
}
function deleteInsert(idx) {
$('#table').bootstrapTable('remove', {
field: 'idx',
values: [parseInt(idx)]
});
}
function idOperate(row,index,vaue){
return [
'+row+' " />'
].join('');
}
function nameOperate(row,index,vaue){
return [
'+row+' " />'
].join('')
}
function ageOperate(row,index,vaue){
return [
'+row+' " />'
].join('')
}
function addressOperate(row,index,vaue){
return [
'+row+' " />'
].join('')
}
function testOBj() {
var obj = $('input').val();
console.info(obj);
}
script>
html>