欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jQuery实现表格的数据拖拽

时间:2023-02-20 09:46:17|栏目:jquery|点击:

jQuery实现将一个ant-table的数据拖拽复制到另一个ant-table,供大家参考,具体内容如下

需求

1、ant-design-vue
2、将一个嵌套在drawer中的table数据拖拽复制到drawer外面的table中

效果

拖拽中

拖拽后

HTML

<el-button type="text" size="small" class="text-btn" @click="choseField">选择字段</el-button>
// 拖拽到table
<a-table class="droptable" :columns="columns_copy" :dataSource="fieldInfoList">
.....
</a-table>
// 从drawer中拖拽数据
<field-select ref="fieldList" @setFieldList="setFieldList"></field-select>

JS

initDrop() {
            // initDrop在mounted中触发,使table区域可以接受拖拽 
            let that = this
            $('.table_container').droppable({
                scope: 'basic', // 设置两个相同的scope接受拖拽信息
                tolerance: 'fit',
                drop(e) {
                    let dropFieldInfo = {
                        enName: that.dragField.enname || '',
                        cnName: that.dragField.name || '',
                    }
                    that.fieldInfoList.push(dropFieldInfo)
                    that.repeatZhName() // 校验字段是否重复的方法
                }
            })
        },
 choseField() {
            this.$refs.fieldList.setShowState(true)  //显示drawer
            // 因为drawer中的dom对象实在打开抽屉时候才会被创建,所以不能再drawer组件中进行初始化
            this.$nextTick(() => {
                // sort-table为抽屉组件中ant-table的类名
                $('.sort-table tbody tr').draggable({
                    scope: 'basic',  //相同的scope name
                    scroll: false,
                    zIndex: 10000,  // zindex设置更高避免拖拽的数据被drawer遮住,同时去除遮罩层样式
                    helper: 'clone',
                    appendTo: 'body',  //避免遮盖
                    containment: document.getElementById('app'),
                    start: e => {
                        // rowIndex第一行是表头,数据行的rowindex从1开始
                        let currentIndex = e.target.rowIndex - 1
                        // console.log(this.$refs.fieldList.tableData[currentIndex])
                        this.dragField = this.$refs.fieldList.tableData[currentIndex]
                    },
                    stop: e => {
                        // this.eventType = 'CLICK'
                        console.log('拖拽结束事件')
                        console.log(e)
                    }
                })
            })
  },

注意事项

1、drop和drag区域要配置相同的scope
2、为了避免拖拽的helper被遮住,drag要配置zIndex和appendTo
3、如果表格有翻页或者查询功能,列表数据会刷新,jq的拖拽会失效,在getList请求方法成功之后,在初始化一次拖拽事件即可,然后使用$emit让父组件接收一下

上一篇:一个仿糯米弹框效果demo

栏    目:jquery

下一篇:没有了

本文标题:jQuery实现表格的数据拖拽

本文地址:http://www.codeinn.net/misctech/226115.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有