位置: 编程技术 - 正文

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)

  • 个人出售二手房要交增值税吗
  • 以前年度损益调整在借方是什么意思
  • 公司交社保是怎么计算的
  • 处置无形资产取得的收入计入
  • 政府补贴的内容
  • 应付账款的进项税分录
  • 开票方没缴税咋办
  • 充值费用优惠怎么取消
  • 企业转增股本要交税吗
  • 增值税发票含税不含税怎样调整
  • 劳务费差额征税的账务处理
  • 企业以货币形式取得的收入
  • 什么是遗产税什么是税
  • 营改增的作用
  • 开票系统的收款码怎么弄
  • 企业间借款利息开票税目
  • 公司做账挂名字
  • 采用简易计税方法
  • 企业注销时未分配利润怎么处理
  • 小规模减免增值税政策
  • 合并报表实操视频
  • win7操作系统激活
  • 期末留抵税额可以冲减欠税吗
  • win7桌面快捷键是什么
  • 计划成本是什么科目
  • 民间借贷以工资抵押的案例
  • PHP:mb_eregi_replace()的用法_mbstring函数
  • php怎么上传多个图片
  • 工程长期停工
  • win10怎么找应用程序
  • wordpress介绍
  • php中序遍历
  • php生成zip压缩包
  • 支付报刊杂志费
  • 往来指哪些科目
  • r在数据分析中表示什么意思
  • midjourney 初级使用说明
  • 开发支出的含义
  • 资产减值损失属于营业外支出吗
  • 人力资源公司代办
  • 跨境电商企业账务如何做账
  • 织梦cms要钱吗
  • 企业税收风险因素分析
  • 公司境外汇款该怎么处理
  • 企业主营业务利润是由什么构成的
  • sql数据库聚集索引和非聚集索引的区别是什么?
  • 老板让我做分公司负责人能接受么
  • 所得税汇算清缴退税会计分录怎么做
  • 应付票据是
  • 企业所得税汇算表
  • 装修费可以一次性入账吗
  • 少交税款滞纳金
  • 预付账款发票到哪里查
  • 汇算清缴晚了几天
  • 本年利润的会计科目代码
  • mysql replace正则表达式
  • 使用注册表删除软件时,有些拒绝访问
  • ubuntu rar压缩
  • centos7.0网络配置
  • win7系统强制关机
  • centos7手册
  • linux系统的
  • 免打扰模式在哪关
  • 升级win10后无法修改magicbook开机画面
  • win8 怎么样
  • 写一个bat文件
  • python生成矩阵的方法
  • js domcontentloaded
  • android系统设置
  • 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
  • checkbox选中一个其余选项置灰
  • python,多线程
  • 文化事业建设费是什么税
  • 什么情况适用简易诉讼程序
  • 亳州国税局电话号码
  • 税务申报系统出现异常怎么办
  • 税费银联缴款
  • 增值税电子普通发票可以抵扣吗
  • 北京朝阳区国税局
  • 资源税的征税对象和纳税环节
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设