bootstrap-table實現兩個表格之間數據的傳遞，表格添加行刪除行功能

bootstrap table是一個非常不錯的，基於bootstrap的插件，它擴展和豐富了bootstrap表格的操作，如格式化表格，表格選擇器，表格工具欄，分頁等等。

具體的幫助可以到如下鏈接看實例  http://bootstrap-table.wenzhixin.net.cn/examples/ 

其實可以參考上述的實例進行擴展開發，比如兩個表格之間進行數據的傳遞，如下圖所示：

左邊表格選擇一行添加到右邊表格，右邊表格選擇一行添加到左邊表格，直接看下面的相關代碼

一、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>