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

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

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


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

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

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


一、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代码
To Be Containered:
Container # Size
@Html.Editor(@"InternalContainerNoEdit") @Html.Editor(@"SizeEdit");
PO # SKU # Factory Ready Date Pallets
PO # SKU # Factory Ready Date Pallets


你可能感兴趣的:(编程)