位置: 编程技术 - 正文

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)

  • 办税人员可以不交社保吗
  • 购买软件无形资产
  • 增值税的账务处理 月末怎么结转 案例
  • 建筑类企业是否允许留抵
  • 开票方丢失记账怎么处理
  • 土地增值税二次清算规定
  • 公司年底奖金怎么算
  • 一般纳税人城建税怎么计算
  • 小企业营业外收入明细
  • 盈利能力分析对企业发展的意义
  • 股本权益性投资是什么
  • 固定资产清理先提折旧再清理吗
  • 工程施工购买的标示牌怎么开票给甲方
  • 费用转利润分录怎么做?
  • 失控发票已取得怎么处理
  • 免交的增值税怎么退
  • 金税盘开票怎么改成含税金额
  • 出口退税预审在申报系统怎么做
  • 购买股票相关税费会计分录
  • 税前不得扣除的项目
  • 公司给个人买的意外险个人有权利查吗
  • 影视行业如何盈利
  • 经办人需要承担风险盘锦交通运输破坏营商环境
  • macos big sur怎么升级
  • 在windows 7中
  • 建筑业预缴企业所得税税率是多少
  • 免租期租金可以追回吗
  • php该怎么学
  • PHP:pg_select()的用法_PostgreSQL函数
  • 安全模式是个啥
  • 进货发票怎么抵税
  • 期初未缴税额有数字怎么处理
  • 如何用php做到页数显示
  • 资产负债表中的货币资金怎么算
  • php添加
  • css单行文本溢出隐藏
  • 建筑修缮服务税率
  • php远程访问
  • 帝国cms视频教程
  • 工会经费计提比例是2%还是0.8%
  • discuz发帖标签
  • mongodb启动命令 linux
  • phpcms api
  • 预交的企业所得税需要计提吗?
  • 揭秘蟹卡骗局
  • 找社保代理公司需要提供什么资料
  • 生产设备改扩建会计分录
  • 合伙企业的合伙人有下列情形中的当然退伙
  • 资产负债表没有
  • 暂估回冲方式
  • 固定资产盘亏是营业外支出吗
  • 文化传媒公司的主营业务
  • 非居民企业境内所得
  • 把公司设备操作坏了怎么担责
  • 没有进项发票出口免税
  • 怎样算小公司
  • mysql如何修改默认值
  • win8.1安装应用商店
  • ubuntu做lvm
  • 苹果电脑的重新启动在哪里
  • linux操作系统版本有哪些
  • libegl.dll病毒
  • win8.1关机
  • jquery技巧
  • 九九乘法表vb
  • shell按行读取文件存入数组
  • node.js速成
  • js selectionchange
  • window.parent与window.openner区别介绍
  • package.json里面的配置
  • javascript基础类型
  • jquery iframe src
  • javascript面向对象精要pdf下载
  • 通用申报表怎么填样本
  • 江苏省国税务局
  • 在深圳居住的香港居民怎样办理边境地区通行证
  • 什么是增值税留抵退税
  • 纳税申报过了申报期未申报怎么办
  • 高新企业公布
  • 金融商品转让是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设