开发者社区> 嗯哼9925> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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

一、业务需求及实现效果

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

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

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

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

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

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

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

二、代码示例

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

1、需求分析

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

2、代码示例

 2.1 cshtml页面代码

 母版_layout.cshtml
 订单插单页面.cshtml

 2.2 js代码

 全部JS代码

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

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

复制代码
$('#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) {
            }
        });
复制代码

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

 

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

复制代码
    $("#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();
            }
        });
复制代码

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

 

2.2.3 撤销操作代码

复制代码
     //撤销操作点击事件
        $("#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();
        });
复制代码

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

 




本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/4920894.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS案例:拖拽音量调节效果
JS案例:拖拽音量调节效果
0 0
js实现拖拽
js实现拖拽
0 0
原生js拖拽元素(onmouseup不能够触发的原因)
原生js拖拽元素(onmouseup不能够触发的原因)
0 0
js文件/图片从电脑里面拖拽到浏览器上传文件/图片
1.效果展示   2.html 代码: Title #drop img{width: 100px;height: 100px;margin: 10px;} 提交    3.
490 0
js拖拽效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
696 0
ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
原文:ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆 一、前言       吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维。在上一篇笔记里,我已经实现了自定义的地图测量模块。在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半径进行搜索(也就是缓冲区╮(╯_╰)╭)。
1231 0
JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
原文:JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。
799 0
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载