• 售前

  • 售后

热门帖子
入门百科

antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

[复制链接]
绚丽源自寂寞悍 显示全部楼层 发表于 2021-10-25 19:34:20 |阅读模式 打印 上一主题 下一主题
目次


  • 实现效果

    • sortablejs介绍
    • 具体实现


实现效果

原来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图:


sortablejs介绍

起首先来熟悉一下这个插件: sortablejs
各人可以去细读一下它的api文档:

这边我就着重介绍一下我用到的api。
1.
  1. group
复制代码
可以传入对象,参数值为
  1. name
复制代码
,
  1. pull
复制代码
,
  1. put
复制代码
,
name:如果是要两个列表下举行拖动的话,name的值必须为一样;
pull:pull用来界说从这个列表容器移动出去的设置,true/false/‘clone'/function
      
  • true :列表容器内的列表单元可以被移出;  
  • false:列表容器内的列表单元不可以被移出;  
  • clone:列表单元移出,移动的为该元素的副本;  
  • function:用来举行pull的函数判断,可以举行复杂逻辑,在函数中return false/true来判断是否移出;
put:put用来界说往这个列表容器放置列表单元的的设置,true/false/[‘foo',‘bar']/function;
      
  • true:列表容器可以从其他列表容器内放入列表单元;  
  • false:与true相反;  
  • [‘foo',‘bar']:这个可以是一个字符串大概是字符串的数组,代表的是group设置项里界说的name值;  
  • function:用来举行put的函数判断,可以举行复杂逻辑,在函数中return false/true来判断是否放入;
2.
  1. animation
复制代码
ms, number 单位:ms,界说排序动画的时间;
3.
  1. handle
复制代码
: 格式为简朴css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才气使列表单元举行拖动(你想让哪个元素拖动就绑定这个元素的class);
4.
  1. onStart:function(evt){}
复制代码
开始拖拽的回调方法;
5.
  1. onUpdate:function(evt){}
复制代码
列表内元素次序更新的回调方法;
6.
  1. onAdd:function(evt){}
复制代码
元素从一个列表拖拽到另一个列表的回调方法;
7.
  1. onRemove:function(evt){}
复制代码
元素从列表中移除进入另一个列表的回调方法;
这个需求用到这些api也就充足了。

具体实现

1.第一步先初始化
  1. sortable
复制代码
方法,由于我们的需求是两个表格拖拽,以是初始化2个方法。
html代码
  1. <s-table
  2. ref="table"
  3. size="default"
  4. class="left-table"
  5. rowKey="key"
  6. :columns="columns"
  7. :data="loadData">
  8. </s-table>
  9.   
  10. <s-table
  11. class="sort-table"
  12. ref="table2"
  13. size="default"
  14. class="left-table"
  15. rowKey="key"
  16. :columns="columns"
  17. :data="loadData">
  18. </s-table>
复制代码
具体的columns 和loadData就不多余论述。
JS代码
  1. import Sortable from 'sortablejs'
  2. methods:{
  3. // 初始化 sortable 实现拖动
  4. initSortable () {
  5. var that = this
  6. var el = this.$el.querySelector('.sort-table tbody')
  7. Sortable.create(el, {
  8. handle: '.ant-table-row',
  9. animation: 150,
  10. group: { name: 'name', pull: true, put: true },
  11. onUpdate: function (evt) {
  12. },
  13. // 开始拖拽的时候
  14. onStart: function (evt) {
  15.   
  16. },
  17. onAdd: function (evt) {
  18.   
  19. },
  20. onRemove: function (evt) {
  21. }
  22. })
  23. },
  24. initSortable1 () {
  25. var that = this
  26. var el = this.$el.querySelector('.left-table tbody')
  27. Sortable.create(el, {
  28. handle: '.ant-table-row',
  29. animation: 150,
  30. group: { name: 'name', pull: true, put: true },
  31. onUpdate: function (evt) {
  32. },
  33. // 开始拖拽的时候
  34. onStart: function (evt) {
  35.   
  36. },
  37. onAdd: function (evt) {
  38.   
  39. },
  40. onRemove: function (evt) {
  41. }
  42. })
  43. },
  44. }
复制代码
关于
  1. handle
复制代码
所取的class,由于我们是要对antdesign表格的每一行举行拖拽,以是要选取到他每一行的class。

至此两个table之间就可以实现拖拽效果,但仅仅只是拖拽效果
由于这样拖拽之后,双方的数据源并没有发生变革,而且明显已经拖拽过来之后,另一边的表格的展示页会存在错误:

排序是我右边表格特有的,但是这边的表格是不必要这个排序的,而且如果拖拽乐成的话为什么还会表现暂无数据呢,末了左边表头的
  1. CheckBox
复制代码
也无法选中。以是到此为止只是有拖拽效果而已。
2.在拖拽动作之后,把左右双方的数据源重新赋值,这里有两种实现思路:
      
  • 每一次拖拽之后都去哀求后台数据,拿到新的数据源之后重新赋值给表格,  
  • 前端本身做好数据源的处置处罚,等所有的拖拽竣事之后排好序再给后台保存。
思量到性能斲丧,我就选择了第二种:
1)界说左右双方的数据源数组
  1. data(){
  2. return{
  3. unMatchedList: [], // 左边未匹配的数据
  4. dataList: [], // 右边已匹配的数据
  5. pullIndex :'',//原数组拖拽元素的下标
  6. }
  7. }
复制代码
2)在每一次
  1. remove
复制代码
大概
  1. add
复制代码
的时间更新数据源,这里只写了一个表格拖拽的方法,另一个只要把
  1. that.dataList
复制代码
  1. that.unMatchedList
复制代码
左右双方的数据源赋值变更一下就行,就不贴重复代码了
  1. // 开始拖拽的时候
  2. onStart: function (evt) {
  3.   that.pullIndex = evt.oldIndex
  4. },
  5. onAdd: function (evt) {
  6. //evt.newIndex 移入到新数组的下标
  7. //pullIndex 原数组拖拽元素的下标
  8.   that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  9.   that.dataList.forEach((item, index) => {
  10.   item.sort = index + 1
  11.   })
  12.   //通知table视图更新
  13.   that.$nextTick(() => {
  14.   that.$refs.table2 && this.$refs.table2.refresh(true)
  15.                  that.$refs.table && this.$refs.table.refresh(true)
  16.   })
  17. },
  18. onRemove: function (evt) {
  19.   that.dataList.splice(evt.oldIndex, 1)
  20.   that.dataList.forEach((item, index) => {
  21.   item.sort = index + 1
  22.   })
  23.   that.$nextTick(() => {
  24.   that.$refs.table2 && this.$refs.table2.refresh(true)
  25.                 that.$refs.table && this.$refs.table.refresh(true)
  26.   })
  27. }
  28. })
复制代码
3)实现同一个表格上下拖拽排序
  1. initSortable () {
  2. var that = this
  3. var el = this.$el.querySelector('.sort-table tbody')
  4. Sortable.create(el, {
  5. handle: '.ant-table-row',
  6. animation: 150,
  7. group: { name: 'name', pull: true, put: true },
  8. //这里千万不要用onEnd 方法
  9. onUpdate: function (evt) {
  10.   var o = evt.oldIndex
  11.   var n = evt.newIndex
  12.   if (o === n) {
  13.   return
  14.   }
  15.   that.sortListAndUpdate(that.dataList, o, n)
  16. },
  17. })
  18. },
  19. // 对数据进行排序,要求 o(oldIndex) 和 n(newIndex) 从 0开始
  20. sortList (list, o, n) {
  21. var newTableData = JSON.parse(JSON.stringify(list))
  22. var data = newTableData.splice(o, 1, null)
  23. newTableData.splice(o < n ? n + 1 : n, 0, data[0])
  24. newTableData.splice(o > n ? o + 1 : o, 1)
  25. return newTableData
  26. },
  27. /**
  28. * 对数据排序并更新 table, 要求 o(oldIndex) 和 n(newIndex) 从 0开始
  29. */
  30. sortListAndUpdate (list, o, n) {
  31. var newTableData = this.sortList(list, o, n)
  32. newTableData.forEach((item, index) => {
  33. item.sort = index + 1
  34. })
  35. this.$nextTick(() => {
  36. this.dataList = newTableData
  37. that.$refs.table2 && this.$refs.table2.refresh(true)
  38. })
  39. },
复制代码
这边我们选用
  1. onUpdate
复制代码
方法来排序,不要用
  1. onEnd
复制代码
方法,由于只要你有拖拽效果,都会去触发
  1. onEnd
复制代码
方法,导致左右拖拽完后又会触发一次排序。

到此这篇关于antdesign-vue联合sortablejs实现两个table相互拖拽排序功能的文章就介绍到这了,更多相关antdesign-vue实现拖拽排序内容请搜刮脚本之家以前的文章或继承浏览下面的相关文章希望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作