JS组件系列——Bootstrap Table 表格行拖拽

傷城~ 2022-07-13 02:54 337阅读 0赞

前言：之前一直在研究DDD相关知识，好久没更新JS系列文章了。这两天做了一个简单的业务需求，觉得效果还可以，今天在这里分享给大家，欢迎拍砖~~

## 一、业务需求及实现效果 ##

项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右边Table里面指定行的位置，拖动完成后，左边表格减少一行，右边表格增加一行。除此之外，还需要撤销操作(相当于Ctrl + Z操作)，能够返回到上一步的状态。可能描述会让大家模拟两可，反正已经实现了，先来看看效果图吧。

### 1、先看看拖动之前的效果 ###

![459756-20151030093324075-329901841.png][]

### 2、这是拖动左边表格行数据的效果 ###

![459756-20151030093447294-2034508199.png][]

### 3、拖动一行完成之后表格数据的效果 ###

![459756-20151030093613372-1294779673.png][]

### 4、第二次、第三次拖动完成后效果 ###

![459756-20151030093622544-1141225896.png][]

![459756-20151030093728138-624402482.png][]

### 5、右边表格上面撤销操作点击效果 ###

![459756-20151030093838904-1890855843.png][]

### 6、多次点击撤销，表格回到初始状态 ###

![459756-20151030093918107-918327497.png][]

## 二、代码示例 ##

初初接到需求，博主的第一感觉是应该上Bootstrap table api里面找一下，毕竟开源的力量是强大的，或许有相关的示例呢。经过一番查找，很可惜，Bootstrap Table没有这种两张表格之间的操作。想想其实也可以理解，Bootstrap Table是针对某个动态表格数据绑定的，它的侧重点是表格内部的功能，比如表格内部行的拖拽排序(Reorder Rows)有很好的解决方案，对于像博主这样的特殊需求，似乎也应该自己去实现。

### 1、需求分析 ###

既然决定自己去写，博主开始分析需求，似乎这个操作里面比较困难的是拖拽效果，说到拖拽效果，原来使用JsPlumb的时候那使用太多了，于是就想到了我们神奇的JQuery UI里面的draggable.js 和droppable.js。拖拽的问题解决了，那么还有一个难点，就是撤销操作怎么办？我们知道Ctrl+z的意思是还原，什么叫还原？就是返回到上一步的操作，那么前提是要能够保存上一步的状态，说到保存某一步的状态，博主就知道怎么做了，需要一个全局变量Json，里面要有三个键值对，分别是当前步骤的索引、左边表格的数据、右边表格的数据。似乎也不太难嘛，博主就此着手，开干。

### 2、代码示例 ###

####  2.1 cshtml页面代码 ####

![ContractedBlock.gif][]  母版\_layout.cshtml

![ContractedBlock.gif][]  订单插单页面.cshtml

####  2.2 js代码 ####

![ContractedBlock.gif][]  全部JS代码

我们重点来看几个地方的代码：

2.2.1  左边表格加载成功之后执行表格行的可拖拽。

![复制代码][copycode.gif]

$('#tb_order_left tr').draggable({
                helper: "clone",
                start: function (event, ui) {
                    var old_left_data = JSON.stringify($('#tb_order_left').bootstrapTable("getData"));
                    var old_right_data = JSON.stringify($('#tb_order_right').bootstrapTable("getData"));
                    var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data };
                    arrdata.push(odata);
                },
                stop: function (event, ui) {
        
                }
            });

![复制代码][copycode.gif]

在draggable的start事件中，我们将拖拽之前的左右表格中的数据全部保存到arrdata变量中，i\_statuindex这个全局变量用于记录当前这一步的索引，用于撤销操作。

2.2.2 右边表格在加载成功之后注册表格的droppable事件

![复制代码][copycode.gif]

$("#tb_order_right").droppable({
                drop: function (event, ui) {
                    var arrtd = $(ui.helper[0]).find("td");
                    var rowdata = {
                        ORDER_NO: $(arrtd[1]).text(),
                        BODY_NO: $(arrtd[2]).text(),
                        VIN: $(arrtd[3]).text(),
                        TM_MODEL_MATERIAL_ID: $(arrtd[4]).text(),
                        ORDER_TYPE: $(arrtd[5]).text(),
                        ORDER_STATUS: $(arrtd[6]).text(),
                        CREATE_DATE: $(arrtd[7]).text() == "-" ? null : $(arrtd[7]).text(),
                        PLAN_DATE: $(arrtd[8]).text() == "-" ? null : $(arrtd[8]).text(),
                        VMS_NO: $(arrtd[9]).text(),
                        ENGIN_CODE: $(arrtd[10]).text(),
                        TRANS_CODE: $(arrtd[11]).text(),
                        OFFLINE_DATE_ACT: $(arrtd[12]).text() == "-" ? null : $(arrtd[12]).text(),
                        HOLD_RES: $(arrtd[13]).text(),
                        SPC_FLAG: $(arrtd[14]).text(),
                        TO_ORDER_ID: $(ui.helper[0]).attr("data-uniqueid")
    
                    };
                    var oTop = ui.helper[0].offsetTop;
                    var iRowHeadHeight = 40;
                    var iRowHeight = 37;
                    var rowIndex = 0;
                    if (oTop <= iRowHeadHeight + iRowHeight / 2) {
                        rowIndex = 0;
                    }
                    else {
                        rowIndex = Math.ceil((oTop - iRowHeadHeight) / iRowHeight);
                    }
                    $("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex, row: rowdata });
                    $('#tb_order_left').bootstrapTable("removeByUniqueId", $(ui.helper[0]).attr("data-uniqueid"));
                    oTableInit.InitDrag();
                }
            });

![复制代码][copycode.gif]

在drop事件时，取到当前拖过来的行数据，计算当前鼠标所在的位置，在右边表格指定位置插入拖过来的行数据。然后删除左边表格拖过来的行数据。

2.2.3 撤销操作代码

![复制代码][copycode.gif]

//撤销操作点击事件
            $("#btn_cancel").click(function () {
                if (i_statuindex <= 0) {
                    return;
                }
                for (var i = 0; i < arrdata.length; i++) {
                    if (arrdata[i].index != i_statuindex) {
                        continue;
                    }
                    var arr_left_data = eval(arrdata[i].left_data);
                    var arr_right_data = eval(arrdata[i].right_data);
    
                    $('#tb_order_left').bootstrapTable('removeAll');
                    $('#tb_order_right').bootstrapTable('removeAll');
                    $('#tb_order_left').bootstrapTable('append', arr_left_data);
                    for (var x = 0; x < arr_right_data.length; x++) {
                        $("#tb_order_right").bootstrapTable("insertRow", { index: x, row: arr_right_data[x] });
                    }
                    //$('#tb_order_right').bootstrapTable('append', arr_right_data);//append之后不能drop
                    break;
                }
                i_statuindex--;
    
                //重写注册可拖拽
                m_oTable.InitDrag();
            });

![复制代码][copycode.gif]

撤销操作主要是通过全局变量arrdata里面的索引判断撤销到哪一步，然后根据索引取出当前步骤的左右表格数据，依次向两表格插入数据，然后i\_statuindex依次递减，直至等于零，由于左边表格行数据全部重写加载过，所以需要重新注册可拖拽事件。就是这么简单的三步就能实现想要的效果，是不是很简单~~

[459756-20151030093324075-329901841.png]: /images/20220713/5d3de0fcfe8541fbbe8bc5a7bc07e4dd.png
[459756-20151030093447294-2034508199.png]: /images/20220713/35e418460f0e4097ba55b5869728a308.png
[459756-20151030093613372-1294779673.png]: /images/20220713/ae8faf59defa443f9bf86d1c1f11d16f.png
[459756-20151030093622544-1141225896.png]: /images/20220713/85437bc20003477796bee99b12d6961b.png
[459756-20151030093728138-624402482.png]: /images/20220713/1cba46821c00433eadacbb54c34dd0b7.png
[459756-20151030093838904-1890855843.png]: /images/20220713/479aea34007d445aa0eb79a69db9df50.png
[459756-20151030093918107-918327497.png]: /images/20220713/29e348da043746fca233b2b30ab13984.png
[ContractedBlock.gif]: /images/20220713/18504b366cf34993bf9ceef171442259.png
[copycode.gif]: /images/20220713/e16217b211f4461191deb455da4d823b.png