位置: 编程技术 - 正文

JS组件Bootstrap Table表格行拖拽效果实现代码(bootstrap的组件)

编辑:rootadmin

推荐整理分享JS组件Bootstrap Table表格行拖拽效果实现代码(bootstrap的组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap的组件,bootstrap ui组件库,bootstrap的组件,bootstrap的组件,javascript组件,bootstrap的组件,Js组件的滚动条怎么操作,Js组件开发方式,内容如对您有帮助,希望把文章链接给更多的朋友!

一、业务需求及实现效果

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

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

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

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

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

JS组件Bootstrap Table表格行拖拽效果实现代码(bootstrap的组件)

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页面代码

2.2 js代码

我们重点来看几个地方的代码:2.2.1 左边表格加载成功之后执行表格行的可拖拽。

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

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

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程Bootstrap实战教程

标签: bootstrap的组件

本文链接地址:https://www.jiuchutong.com/biancheng/387117.html 转载请保留说明!

上一篇:JS获取月份最后天数、最大天数与某日周数的方法(js获取当前月份的天数)

下一篇:JS操作XML实例总结(加载与解析XML文件、字符串)(js 操作xml)

  • 开出销项发票和进项票成本有出入怎么办?
  • 单位人民币卡账户可以支取现金吗
  • 两年前发票怎么红冲
  • 小规模印花税是季报还是月报
  • 砂石行业一般纳税人税率多少?能简易征收吗?
  • 人力资源服务费发票可以抵扣吗
  • 建筑业工程项目登记是哪方提交
  • 新能源汽车补贴2023年政策
  • 股权增值转让的财税处理
  • 以非现金资产清偿债务的方式下,债权人
  • 委托加工设备
  • 免税企业开了含税发票
  • 付给其他公司的服务费怎么记账
  • 旅行社差额纳税开专票吗 会议会展
  • 个体工商户的税收优惠政策有哪些
  • 接待客户的住宿费账务处理
  • 累计折旧费用
  • 增值税的计征方法有哪些
  • 所得税补缴自查需要缴纳什么
  • 法人股东转让股权涉税
  • 银行承兑 贷款
  • 家具上的木蜡油味去除
  • 生育津贴还扣税吗
  • 客户分批付款怎么说
  • 可转换公司债券账务处理
  • 收到政府的专项资金
  • 无形资产入账包括增值税吗
  • php浮点数转为字符串
  • 如何计算旧城拆迁面积
  • PHP:pg_query()的用法_PostgreSQL函数
  • 酒店需要的原材料和包装费有哪些
  • yolov5 c
  • php单例模式应用场景
  • 生产企业免抵退税实例
  • 小企业会计准则没有以前年度损益调整科目
  • php如何上传1个g以上的文件
  • 无法按时交纳税怎么办
  • 前端搭建小人逃脱游戏(内附源码)
  • gpt3 模型大小
  • php微信公众号 全站模板
  • 固定资产一次性扣除政策2023
  • 清单应该盖公章还是财务章
  • 销售返利的会计分录处理
  • python分布式执行框架Ray的介绍
  • mongodb快速入门
  • 企业送员工礼品怎么分享给团队
  • 软件信息技术服务业
  • 四种股利分配政策及适用情况
  • 固定资产折旧常见方法
  • sqlserver如何使用
  • 应该免税的增值税是什么
  • 包装物押金要计入增值税吗
  • 工程项目立项前的安全评估
  • 经营性租赁资产
  • 盈余公积多计提对报表的影响
  • 企业正常经营的条件
  • 机票的电子发票可以报销吗
  • 中标服务费计入合同取得成本
  • 递延收益的影响
  • 固定资产损失计入什么科目
  • 动态sql中返回数组的值
  • win10安装完成后需要做哪些设置
  • win7ie11如何降为ie8
  • Ubuntu安装搜狗输入法
  • ubuntu右上角没有键盘
  • 如何让windows7更快
  • sxgdsenu.exe - sxgdsenu是什么进程 有什么用
  • win8操作系统界面
  • win8查看内存
  • Windows 8.1 RT Update 3更新将于9月发布
  • windows安装node.js
  • jquery弹出页面
  • shell脚本常用命令及操作
  • 批处理设置文件夹添加user组权限
  • unity飞机大战游戏毕业论文
  • django教程推荐
  • 国税注销需要什么资料
  • 乐陵到德州多远距离
  • 个人转让住宅需要缴纳什么税
  • 税收政策对中小微企业的影响数据公式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设