当前位置: 首页 > web >正文

【JEECG】JVxeTable表格拖拽排序功能

功能说明:

实现JVxeTable表格拖拽排序功能

解决子表拖拽排序后,点击保存数据,未实现拖拽排序后效果


参数配置:

提示:

1.开启 dragSort 属性之后即可实现上下拖拽排序。

2.使用 sortKey 属性可以自定义排序保存的 key,默认为 orderNum。

3.使用 sortBegin 属性可以自定义排序的起始值,默认为 0。

4.sortKey 定义的字段不需要定义在 columns 中也能正常获取到值。

5.当存在 fixed 列时,拖拽排序将会失效,仅能上下排序。


sortKey:根据表内排序字段更换,这里演示默认排序字段【orderNum】

sortBegin:默认排序序号从0开始,可以单独设置排序开始值,这里演示默认从【3】开始


JVxeTable配置:

<JVxeTableref="tableRef1"toolbardragSortsortKey="orderNum":sortBegin="3"rowSelection:maxHeight="580":columns="table1.columns":dataSource="table1.data"
/>

数据库增加排序字段:

提示:

演示系统默认排序字段:【order_num】


排序字段名可以自定义。如设置自定义排序字段,替换sortKey中【orderNum】


查询SQL增加order_num排序:

如设置自定义排序字段,替换【order_num】

<select id="selectByMainId" parameterType="java.lang.String" resultType="org.jeecg.modules.mmes.entity.item">SELECT * FROM  itemWHEREmain_id = #{mainId}ORDER BY order_num
</select>

异常情况:

只能点击拖拽排序按钮,进行上一行,下一行,插入一行的情况,是因为columns中的dragSort和rowSelection默认是fixed:left导致

异常处理方法:

【1】修改表格表格字段列的宽度调整,保证表格不出现左右滚动条即可。

【2】修改组件方式处理,请参考官方更新文档:

JVxeTable列过长(出现横向滚动条)时无法拖拽排序 · Issue #1162

JEECG v3.7.0 +版本处理方法【或直接参考JVxeDemo3.vue案例】:

JVxeTable组件标签追加:

   dragSortFixed="none"
   rowSelectionFixed="none"

<JVxeTableref="tableRef1"toolbardragSortsortKey="orderNum":sortBegin="3"dragSortFixed="none"rowSelectionFixed="none"rowSelection:maxHeight="580":columns="table1.columns":dataSource="table1.data"
/>
http://www.xdnf.cn/news/16799.html

相关文章:

  • [SKE]Python gmssl库的C绑定
  • 机器视觉halcon7-缺陷检测
  • 计算机网络1-3:三种交换方式
  • 开源 Arkts 鸿蒙应用 开发(十二)传感器的使用
  • 双线串行的 “跨界对话”:I2C 与 MDIO 的异同解析
  • 数学建模——最大最小化模型
  • 硬件电路设计(基本元器件)
  • sqli-labs:Less-7关卡详细解析
  • 数据治理平台如何选?深度解析国产化全栈方案与行业落地实践
  • Charles中文教程 高效抓包与API接口调试实战全指南
  • 《汇编语言:基于X86处理器》第10章 复习题和练习
  • yolo8+阿里千问图片理解(华为简易版小艺看世界)
  • Docker常用命令速查手册:容器运维七维指南
  • Centos7 | 防火墙(firewalld)使用ipset管理ip地址的集合
  • 以ros的docker镜像为例,探讨docker镜像的使用
  • Power Pivot 数据分析表达式(DAX)
  • 《Java 程序设计》第 10 章 - 接口与 Lambda 表达式
  • HTML基础P2 | JS基础讲解
  • JSON.parse解析大整数踩坑
  • 重生之我在10天内卷赢C++ - DAY 1
  • 安全和AI方向的学习路线
  • Tdesign-React 模板面包屑如何放到 Header头部
  • 白话容器基础(一):进程
  • 2025年6月电子学会青少年软件编程(C语言)等级考试试卷(一级)
  • SSRF漏洞基础
  • Akamai CloudTest before 60 2025.06.02 XXE注入导致文件包含漏洞(CVE-2025-49493)
  • Solon v3.4.2(Java 应用开发生态基座)
  • T113-i Linux系统完整构建指南:从SDK开箱到内核镜像量产烧录全流程
  • 【力扣热题100】哈希——最长连续序列
  • MSVC编译KDChart过程