bootstrap table行拖拽排序并获取数据
2018-12-27 本文已影响0人
SharpKing
测试bootstrap table及拖拽功能的时候遇到一个问题
在此将解决方案分享出来。
前提准备
bootstrap table 好用的多功能表格 中文官网 github
bootstrap-table-reorder-rows 上述表格的一个扩展，支持行拖拽 github
问题
以上的原表格，拖动行更换位置后如下图
使用bootstrap table的getData方法获取表格内容，仍为拖拽前的数据
解决方法
官方原文（ This function must be use if your tr elements won't have the id attribute. If your tr elements don't have the id attribute this plugin don't fire the onDrop event.）
$(document).ready(function () {
$("#tabletest").bootstrapTable({
reorderableRows: true,
striped: true,
search: true,
toolbar: '#toolbar',
useRowAttrFunc: true
});
});
源代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">
</head>
<body>
<div style="width:1000px">
<table id="tabletest">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-info btn-sm rightSize">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="getdata" type="button" class="btn btn-info btn-sm rightSize">
获取数据
</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.js"></script>
<script src="https://cdn.bootcss.com/TableDnD/1.0.3/jquery.tablednd.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabletest").bootstrapTable({
reorderableRows: true,
striped: true,
search: true,
toolbar: '#toolbar',
useRowAttrFunc: true,
// onReorderRow: function (newdata) {
// console.log(newdata);
// }
});
});
$("#btn_add").click(function () {
$('#tabletest').bootstrapTable('append', { 'id': 'aa', 'name': 'bb', 'price': '1' });
});
$("#getdata").click(function () {
alert(JSON.stringify($('#tabletest').bootstrapTable('getData')));
});
</script>
</body>
</html>
