经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery实现表格的数据拖拽
来源:jb51  时间:2022/2/22 15:52:15  对本文有异议

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

需求

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

效果

拖拽中

拖拽后

HTML

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

JS

  1. initDrop() {
  2. ?? ??? ??? ?// initDrop在mounted中触发,使table区域可以接受拖拽?
  3. ? ? ? ? ? ? let that = this
  4. ? ? ? ? ? ? $('.table_container').droppable({
  5. ? ? ? ? ? ? ? ? scope: 'basic', // 设置两个相同的scope接受拖拽信息
  6. ? ? ? ? ? ? ? ? tolerance: 'fit',
  7. ? ? ? ? ? ? ? ? drop(e) {
  8. ? ? ? ? ? ? ? ? ? ? let dropFieldInfo = {
  9. ? ? ? ? ? ? ? ? ? ? ? ? enName: that.dragField.enname || '',
  10. ? ? ? ? ? ? ? ? ? ? ? ? cnName: that.dragField.name || '',
  11. ? ? ? ? ? ? ? ? ? ? }
  12. ? ? ? ? ? ? ? ? ? ? that.fieldInfoList.push(dropFieldInfo)
  13. ? ? ? ? ? ? ? ? ? ? that.repeatZhName() // 校验字段是否重复的方法
  14. ? ? ? ? ? ? ? ? }
  15. ? ? ? ? ? ? })
  16. ? ? ? ? },
  17. ?choseField() {
  18. ? ? ? ? ? ? this.$refs.fieldList.setShowState(true) ?//显示drawer
  19. ? ? ? ? ? ? // 因为drawer中的dom对象实在打开抽屉时候才会被创建,所以不能再drawer组件中进行初始化
  20. ? ? ? ? ? ? this.$nextTick(() => {
  21. ? ? ? ? ? ? ?? ?// sort-table为抽屉组件中ant-table的类名
  22. ? ? ? ? ? ? ? ? $('.sort-table tbody tr').draggable({
  23. ? ? ? ? ? ? ? ? ? ? scope: 'basic', ?//相同的scope name
  24. ? ? ? ? ? ? ? ? ? ? scroll: false,
  25. ? ? ? ? ? ? ? ? ? ? zIndex: 10000, ?// zindex设置更高避免拖拽的数据被drawer遮住,同时去除遮罩层样式
  26. ? ? ? ? ? ? ? ? ? ? helper: 'clone',
  27. ? ? ? ? ? ? ? ? ? ? appendTo: 'body', ?//避免遮盖
  28. ? ? ? ? ? ? ? ? ? ? containment: document.getElementById('app'),
  29. ? ? ? ? ? ? ? ? ? ? start: e => {
  30. ? ? ? ? ? ? ? ? ? ? ?? ?// rowIndex第一行是表头,数据行的rowindex从1开始
  31. ? ? ? ? ? ? ? ? ? ? ? ? let currentIndex = e.target.rowIndex - 1
  32. ? ? ? ? ? ? ? ? ? ? ? ? // console.log(this.$refs.fieldList.tableData[currentIndex])
  33. ? ? ? ? ? ? ? ? ? ? ? ? this.dragField = this.$refs.fieldList.tableData[currentIndex]
  34. ? ? ? ? ? ? ? ? ? ? },
  35. ? ? ? ? ? ? ? ? ? ? stop: e => {
  36. ? ? ? ? ? ? ? ? ? ? ? ? // this.eventType = 'CLICK'
  37. ? ? ? ? ? ? ? ? ? ? ? ? console.log('拖拽结束事件')
  38. ? ? ? ? ? ? ? ? ? ? ? ? console.log(e)
  39. ? ? ? ? ? ? ? ? ? ? }
  40. ? ? ? ? ? ? ? ? })
  41. ? ? ? ? ? ? })
  42. ? },

注意事项

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号