bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能

时间:2022-12-08 16:00:39

bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等。

具体的帮助可以到如下链接看实例  http://bootstrap-table.wenzhixin.net.cn/examples/ 


其实可以参考上述的实例进行扩展开发,比如两个表格之间进行数据的传递,如下图所示:

bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能

左边表格选择一行添加到右边表格,右边表格选择一行添加到左边表格,直接看下面的相关代码


一、JavaScript代码


        $tableLeft = $('#table-methods-table-left').bootstrapTable({

url: '/Containers/getPoItems/' + selectedTypeID
});

$tableRight = $('#table-methods-table-right').bootstrapTable();

$('#btn2Right').click(function () {
var selectContent = $tableLeft.bootstrapTable('getSelections');
$tableRight.bootstrapTable("append", selectContent);
var selects = $tableLeft.bootstrapTable('getSelections');
SKUNo = $.map(selects, function (row) {
return row.SKUNo;
});

$tableLeft.bootstrapTable('remove', {
field: 'SKUNo',
values: SKUNo
});

});
$('#btn2Left').click(function () {
var selectContent = $tableRight.bootstrapTable('getSelections');
$tableLeft.bootstrapTable("append", selectContent);
var selects = $tableRight.bootstrapTable('getSelections');
SKUNo = $.map(selects, function (row) {
return row.SKUNo;
});
$tableRight.bootstrapTable('remove', {
field: 'SKUNo',
values: SKUNo
});
});
}

二、HTML代码
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2">
To Be Containered:
</td>
<td>
<table>
<tr>
<td>Container #</td>
<td>Size</td>
</tr>
<tr>
<td>
@Html.Editor(@"InternalContainerNoEdit")
</td>
<td>
@Html.Editor(@"SizeEdit");
</td>
</tr>
</table>


</td>
</tr>
<tr>
<td>
<table class="table" id="table-methods-table-left">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="PONo">
PO #
</th>
<th data-field="SKUNo">
SKU #
</th>
<th data-field="Factory">
Factory
</th>
<th data-field="ReadyDate">
Ready Date
</th>
<th data-field="Pallets">
Pallets
</th>
</tr>
</thead>

</table>
</td>
<td valign="middle">

<button class="btn btn-primary btn-large btn-block" type="button" id="btn2Right" data-method="append">--></button> <button id="btn2Left" class="btn btn-info btn-large btn-block" type="button"><---</button>

</td>
<td>
<table class="table" id="table-methods-table-right">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="PONo">
PO #
</th>
<th data-field="SKUNo">
SKU #
</th>
<th data-field="Factory">
Factory
</th>
<th data-field="ReadyDate">
Ready Date
</th>
<th data-field="Pallets">
Pallets
</th>
</tr>
</thead>

</table>
</td>
</tr>
<tr>

<td colspan="3" align="right">
<button class="btn btn-primary btn-large btn-block" type="button" id="btnOk" >OK</button>

</td>
</tr>
</tbody>
</table>