antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
实现效果
本来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图:
sortablejs介绍
首先先来认识一下这个插件: sortablejs
大家可以去细读一下它的api文档:
这边我就着重介绍一下我用到的api。
1.group
可以传入对象,参数值为name
,pull
,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.animation
ms, number 单位:ms,定义排序动画的时间;
3. handle
: 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动(你想让哪个元素拖动就绑定这个元素的class);
4. onStart:function(evt){}
开始拖拽的回调方法;
5. onUpdate:function(evt){}
列表内元素顺序更新的回调方法;
6. onAdd:function(evt){}
元素从一个列表拖拽到另一个列表的回调方法;
7. onRemove:function(evt){}
元素从列表中移除进入另一个列表的回调方法;
这个需求用到这些api也就足够了。
具体实现
1.第一步先初始化sortable
方法,因为我们的需求是两个表格拖拽,所以初始化2个方法。
html代码
<s-table ref="table" size="default" class="left-table" rowKey="key" :columns="columns" :data="loadData"> </s-table> <s-table class="sort-table" ref="table2" size="default" class="left-table" rowKey="key" :columns="columns" :data="loadData"> </s-table>
具体的columns 和loadData就不多余阐述。
JS代码
import Sortable from 'sortablejs' methods:{ // 初始化 sortable 实现拖动 initSortable () { var that = this var el = this.$el.querySelector('.sort-table tbody') Sortable.create(el, { handle: '.ant-table-row', animation: 150, group: { name: 'name', pull: true, put: true }, onUpdate: function (evt) { }, // 开始拖拽的时候 onStart: function (evt) { }, onAdd: function (evt) { }, onRemove: function (evt) { } }) }, initSortable1 () { var that = this var el = this.$el.querySelector('.left-table tbody') Sortable.create(el, { handle: '.ant-table-row', animation: 150, group: { name: 'name', pull: true, put: true }, onUpdate: function (evt) { }, // 开始拖拽的时候 onStart: function (evt) { }, onAdd: function (evt) { }, onRemove: function (evt) { } }) }, }
关于handle
所取的class,因为我们是要对antdesign表格的每一行进行拖拽,所以要选取到他每一行的class。
至此两个table之间就可以实现拖拽效果,但仅仅只是拖拽效果。
因为这样拖拽之后,两边的数据源并没有发生变化,而且明明已经拖拽过来之后,另一边的表格的展示页会存在错误:
排序是我右边表格特有的,但是这边的表格是不需要这个排序的,而且如果拖拽成功的话为什么还会显示暂无数据呢,最后左边表头的CheckBox
也无法选中。所以到此为止只是有拖拽效果而已。
2.在拖拽动作之后,把左右两边的数据源重新赋值,这里有两种实现思路:
- 每一次拖拽之后都去请求后台数据,拿到新的数据源之后重新赋值给表格,
- 前端自己做好数据源的处理,等所有的拖拽结束之后排好序再给后台保存。
考虑到性能消耗,我就选择了第二种:
1)定义左右两边的数据源数组
data(){ return{ unMatchedList: [], // 左边未匹配的数据 dataList: [], // 右边已匹配的数据 pullIndex :'',//原数组拖拽元素的下标 } }
2)在每一次remove
或者add
的时候更新数据源,这里只写了一个表格拖拽的方法,另一个只要把that.dataList
和that.unMatchedList
左右两边的数据源赋值调换一下就行,就不贴重复代码了
// 开始拖拽的时候 onStart: function (evt) { that.pullIndex = evt.oldIndex }, onAdd: function (evt) { //evt.newIndex 移入到新数组的下标 //pullIndex 原数组拖拽元素的下标 that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex]) that.dataList.forEach((item, index) => { item.sort = index + 1 }) //通知table视图更新 that.$nextTick(() => { that.$refs.table2 && this.$refs.table2.refresh(true) that.$refs.table && this.$refs.table.refresh(true) }) }, onRemove: function (evt) { that.dataList.splice(evt.oldIndex, 1) that.dataList.forEach((item, index) => { item.sort = index + 1 }) that.$nextTick(() => { that.$refs.table2 && this.$refs.table2.refresh(true) that.$refs.table && this.$refs.table.refresh(true) }) } })
3)实现同一个表格上下拖拽排序
initSortable () { var that = this var el = this.$el.querySelector('.sort-table tbody') Sortable.create(el, { handle: '.ant-table-row', animation: 150, group: { name: 'name', pull: true, put: true }, //这里千万不要用onEnd 方法 onUpdate: function (evt) { var o = evt.oldIndex var n = evt.newIndex if (o === n) { return } that.sortListAndUpdate(that.dataList, o, n) }, }) }, // 对数据进行排序,要求 o(oldIndex) 和 n(newIndex) 从 0开始 sortList (list, o, n) { var newTableData = JSON.parse(JSON.stringify(list)) var data = newTableData.splice(o, 1, null) newTableData.splice(o < n ? n + 1 : n, 0, data[0]) newTableData.splice(o > n ? o + 1 : o, 1) return newTableData }, /** * 对数据排序并更新 table, 要求 o(oldIndex) 和 n(newIndex) 从 0开始 */ sortListAndUpdate (list, o, n) { var newTableData = this.sortList(list, o, n) newTableData.forEach((item, index) => { item.sort = index + 1 }) this.$nextTick(() => { this.dataList = newTableData that.$refs.table2 && this.$refs.table2.refresh(true) }) },
这边我们选用onUpdate
方法来排序,不要用onEnd
方法,因为只要你有拖拽效果,都会去触发onEnd
方法,导致左右拖拽完后又会触发一次排序。
到此这篇关于antdesign-vue结合sortablejs实现两个table相互拖拽排序功能的文章就介绍到这了,更多相关antdesign-vue实现拖拽排序内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了C# 参数按照ASCII码从小到大排序(字典序)的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 在本篇文章里小编给大家整理的是关于C#实现排序的代码以及相关知识点,需要的朋友们参考下。...2020-06-25
- 这篇文章主要为大家详细介绍了js实现数组冒泡排序、快速排序的原理,感兴趣的小伙伴们可以参考一下...2016-03-10
图文详解Heap Sort堆排序算法及JavaScript的代码实现
这篇文章以图文详解Heap Sort堆排序算法及JavaScript的代码实现,堆排序算法基于类二叉树的堆数据结构,需要的朋友可以参考下...2016-05-05- c# n个数排序实现代...2020-06-25
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 本文给大家汇总介绍了几个个人收藏的JavaScript实现冒泡排序的代码,都是非常的不错,有需要的小伙伴可以参考下...2016-06-12
- 这篇文章主要为大家详细介绍了C#控件Picturebox实现鼠标拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C#使用linq对数组进行筛选排序的方法,实例分析了C#实用linq扩展进行数组排序的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了JS实现的随机排序功能算法,结合具体实例形式分析了javascript常用的排序算法实现技巧,需要的朋友可以参考下...2017-06-15
- 冒泡排序即是对数组每次轮循出最大数或最小数放在队尾,这里我们来看一下C#实现冒泡排序算法的代码示例,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了vue element el-transfer增加拖拽功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21- element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验,本文实现了vue可拖拽的dialog弹框,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-14
- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 排序是我们在日常开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了利用JavaScript对中文(汉字)进行排序的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。...2017-06-24
- 这篇文章主要介绍了javascript拖拽效果延伸的学习,关于拖拽延伸出来的一些效果,感兴趣的朋友可以参考一下...2016-04-06
- 但是,我们在使用中就会发现问题,这里的数组排序方法并不是按照我们想像中的数字大小来排序的,而是按照字符串测试结果改变原先的数据。这并不是我们想要的。那么如何才可以得到我们想要的按照我们思维中的数字大小来排序...2014-05-31