位置: 编程技术 - 正文

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数组函数题目
  • 固定资产抵债债权人账务处理
  • 卡特迈国家公园地图
  • 限售股交易征税是多少
  • 准予在企业所得税税前扣除的有
  • 伊吕波赛道
  • 经营租入的设备为什么不属于资产
  • yii框架运行原理
  • php制作微信小程序
  • php自动提交表单
  • react组件库有哪些
  • 购入多项固定资产
  • checksum 命令
  • 企业所得税是怎么产生的
  • 所有者权益总计怎么算沙盘
  • 为什么营业成本比营业收入大的时候没有计提减值准备呢
  • 开票一定要确认发票吗
  • Mongodb中MapReduce实现数据聚合方法详解
  • php 操作mongodb
  • 资产负债表中的货币资金包括哪些
  • 盘盈盘亏的定义
  • 建筑劳务企业应发民工工资年终未发是否进行纳税调整
  • 研发使用的设备有哪些
  • 业务招待费进项票可以抵扣吗
  • 永续债利息可以抵税吗
  • 设置资产处置损益的依据
  • 分支机构需要单独设立账簿吗
  • mysql8.0免安装
  • win10 bios模式
  • mac移动硬盘不能拷贝
  • mac地图怎么标记多个位置
  • xp系统开机出现英文怎么办
  • windows8快捷键
  • windows7 usb
  • node.js+express
  • lrucache算法
  • Bullet(Cocos2dx)之内存泄露检测
  • nodejs 请求
  • 利用的近义词
  • 欢迎使用城市供水信息服务平台
  • javascript声明变量的语句
  • 怎样屏蔽锁屏广告
  • vue2.x
  • javascript的for循环
  • python datetime.now
  • jquery鼠标点击事件怎么写
  • flask框架官方文档
  • android 引用第三方库
  • python中fd
  • 防伪开票系统操作流程
  • 安徽国家税务局网上办税平台12366
  • 辽宁社保缴费公众号
  • 财税知识
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设