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

【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.dtcms.com/a/307142.html

相关文章:

  • C语言:逆序输出0到9的数组元素
  • LeetCode Hot 100 搜索旋转排序数组
  • 腾讯云市场排名
  • 借助 Wisdom SSH 的 AI 助手构建 Linux 开发环境
  • 2419.按位与最大的最长子数组
  • duiLib 自定义资源目录
  • 限流算法详解:固定窗口、滑动窗口、令牌桶与漏桶算法全面对比
  • P1036 [NOIP 2002 普及组] 选数
  • 结合C++红黑树与AI人工智能的应用
  • Linux 系统日志管理与时钟同步实用指南
  • TCP和UDP编程的主要区别
  • 当人生低谷无人帮助时,如何独自奏响人生乐章
  • Linux系统编程Day1-- Linux系统的概念,主要内容
  • 查看遥控器6通道(以及其他通道)的实际PWM值
  • 洛谷 P1601 A+B Problem(高精)普及-
  • Datawhale AI夏令营 大模型技术task3 稍稍提分
  • 密码学安全性简介
  • LLM—— 基于 MCP 协议(Stdio 模式)的工具调用实践
  • 从一开始的网络攻防(十三):WAF入门到上手
  • 疏老师-python训练营-Day30模块和库的导入
  • Mysql事务基础
  • 通俗易懂的解释G1垃圾收集器
  • 学习Markdown
  • vulhub-Thales靶场攻略
  • git的开发流程
  • # C语言:20250730学习(二级指针)
  • OneCode 3.0 快速视图在 DDD 领域模型中的应用研究
  • 「Linux命令基础」管理文件
  • 【动态规划 | 多状态问题】动态规划求解多状态问题
  • 7. 传输层协议 TCP