bootstrap table 删除当前行
2018-12-27 本文已影响0人
SharpKing
解决bootstrap table行拖拽与获取数据的问题后，又来一个新问题
在此将解决方案分享出来。
前提准备
bootstrap table 好用的多功能表格 中文官网 github
bootstrap-table-reorder-rows 上述表格的一个扩展，支持行拖拽 github
问题
以上为原表格，已设置uniqueid=id，拖动行更换位置后如下图
在删除按钮点击事件中获取行的id号，并用removeByUniqueId方法删除当前行，发现删除的并不是当前行，原因是拖拽排序后，row.id发生了改变，不再与uniqueid相同。但是uniqueid不属于表格的字段，不能在row对象中获取。
解决方法
再用removeByUniqueId方法删除当前行
var uid=$(this).parent().parent().attr("data-uniqueid");
$('#tabletest').bootstrapTable('removeByUniqueId', uid);
完整的html源码如下，可直接另存为html后进行测试
<!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" data-unique-id="idx">
</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>
</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,
columns: [{
field: 'idx',
title: '编号'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '价格'
}, {
field: 'button',
title: '操作',
events: operateEvents,
formatter: operateFormatter
}],
data: [{
idx: 1,
name: 'Item 1',
price: '$1'
}, {
idx: 2,
name: 'Item 2',
price: '$2'
}]
});
});
$("#btn_add").click(function () {
var rowCount = $('#tabletest').bootstrapTable('getData').length;
$('#tabletest').bootstrapTable('append', { 'idx': rowCount + 1, 'name': 'bb', 'price': rowCount + 1 });
})
function operateFormatter(value, row, index) {
return [
'<button type="button" class="btn btn-default" id="rowDel">删除</button>'
].join('');
};
window.operateEvents = {
'click #rowDel': function (e, value, row, index) {
var uid=$(this).parent().parent().attr("data-uniqueid");
$('#tabletest').bootstrapTable('removeByUniqueId', uid);
}
};
</script>
</body>
</html>
