框架爲:http://ruoyi.vip/
效果爲：
![如何實現BootStrapTable的動態表格插入與上下移動]()
代碼爲：
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('表格行內編輯')"/>
<th:block th:include="include :: bootstrap-editable-css"/>
</head>
<body class="gray-bg">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="form1">
<div class="select-list">
<ul>
<li>
用戶名稱：<input type="text" name="userName"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm"
onclick="$.table.search('form1', 'bootstrap-table1')"><i
class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm"
onclick="$.form.reset('form1', 'bootstrap-table1')"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="container-div">
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="insertRow()">
<i class="fa fa-plus"></i> 新增行
</a>
<a class="btn btn-info" onclick="getSelections()">
<i class="fa fa-search"></i> 查詢選擇數據
</a>
<a class="btn btn-primary" onclick="getData()">
<i class="fa fa-search"></i> 獲取所有數據
</a>
</div>
<div class="row">
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"
data-use-row-attr-func="true"
data-reorderable-rows="true"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>
<th:block th:include="include :: bootstrap-table-reorder-js"/>
</div>
<script th:inline="javascript">
var prefix = ctx + "demo/table";
var datas = [[${@dict.getType('sys_normal_disable')}]];
$(function () {
var options = {
url: prefix + "/list",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
showPageGo: true,
height: 600,
// fixedColumns: true,
// fixedNumber: 1,
onEditableSave: onEditableSave,
onReorderRow: function (data) {
//當拖拽結束後，data爲整個表格的數據
console.log('拖拽結束' + JSON.stringify(data));
return false;
},
columns: [{
checkbox: true
},
{
field: 'userId',
title: '用戶ID',
titleTooltip: 'wwqwq'
},
{
field: 'userCode',
title: '用戶編號',
editable: true
},
{
field: 'userName',
title: '用戶姓名',
editable: {
type: 'text',
title: '名稱',
emptytext: "【名稱】爲空",
validate: function (value) {
if (value.length > 30) {
return '名稱不能超過30個字符';
}
if (value.length == 0) {
return '名稱不能爲空';
}
}
}
},
{
field: 'userPhone',
title: '用戶手機'
},
{
field: 'userEmail',
title: '用戶郵箱'
},
{
field: 'userBalance',
title: '用戶餘額'
},
{
field: 'status',
title: '用戶狀態',
align: 'center',
editable: {
type: 'select',
title: '狀態',
source: [{
value: 0,
text: "正常"
}, {
value: 1,
text: "停用"
}]
}
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>編輯</a> ');
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>刪除</a>');
actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="insertRow(\'' + row.userId + '\')"><i class="fa fa-remove"></i>新增表格行</a>');
actions.push('<a class="fa fa-arrow-circle-up fa-5" style="font-size: 20px; cursor: pointer;" data-toggle="tooltip" data-html="true" th:title="上移步驟" onclick="upsteps(this)"></a>');
actions.push('<a class="fa fa-arrow-circle-down fa-5" style="font-size: 20px; cursor: pointer;" data-toggle="tooltip" data-html="true" th:title="下移步驟" onclick="downsteps(this)"></a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
function onEditableSave(field, row, oldValue, $el) {
alert("字段名：" + field + "，當前值：" + row[field] + "，舊值：" + oldValue);
}
/* 查詢表格所有數據值 */
function getData() {
var data = $("#" + table.options.id).bootstrapTable('getData');
alert(JSON.stringify(data))
}
/* 查詢表格選擇行數據值 */
function getSelections() {
var data = $("#" + table.options.id).bootstrapTable('getSelections');
alert(JSON.stringify(data))
}
/* 新增表格行 */
function insertRow() {
var randomId = 100 + ~~(Math.random() * 100)
$("#" + table.options.id).bootstrapTable('insertRow', {
index: 0, // 你想插入到哪，0表示第一行
row: {
userId: randomId,
userCode: 2000000 + randomId,
userName: '測試' + randomId,
userPhone: '1588888888',
userEmail: '[email protected]',
userBalance: 10 + randomId,
}
})
}
//根據點擊新增
function insertRow(id) {
var randomId = 100 + ~~(Math.random() * 100)
$("#" + table.options.id).bootstrapTable('insertRow', {
index: id, // 你想插入到哪，0表示第一行
row: {
userId: "",
userCode: "2000000 + randomId",
userName: '測試' + randomId,
userPhone: '1588888888',
userEmail: '[email protected]',
userBalance: "10 + randomId",
}
})
}
/***
* 向上移動
*/
function upsteps(obj) {
if (obj === null) return;
var parentTD = obj.parentNode; //parentNode是父標籤的意思，如果你的TD裏用了很多div控制格式，要多調用幾次parentNode
var parentTR = parentTD.parentNode;
var oTable = document.getElementById("bootstrap-table");
if (oTable.rows.length >= 3) {
$.modal.msgWarning("只有一個步驟，無需上移");
return;
} else {
swapTr(parentTR, oTable.rows[parentTR.sectionRowIndex]);
}
}
/***
* 向下移動
*/
function downsteps(obj) {
if (obj === null) return;
var parentTD = obj.parentNode; //parentNode是父標籤的意思，如果你的TD裏用了很多div控制格式，要多調用幾次parentNode
var parentTR = parentTD.parentNode;
var oTable = document.getElementById("bootstrap-table");
var $tr = $(this).parents("tr");
if ($tr.index() == oTable.rows.length - 1) {
$.modal.msgWarning("只有一個步驟，無需下移");
return;
} else {
swapTr(parentTR, oTable.rows[parentTR.sectionRowIndex + 2]);
}
}
/**交換tr1和tr2的位置*/
function swapTr(tr1, tr2) {
if (null == tr2 || null == tr1) {
$.modal.msgWarning("只有一個步驟，無需下移");
return;
}
var target = (tr1.rowIndex < tr2.rowIndex) ? tr2.nextSibling : tr2;
var tBody = tr1.parentNode;
tBody.replaceChild(tr2, tr1);
tBody.insertBefore(tr1, target);
}
</script>
</body>
</html>
