当前位置: 首页 > 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.lryc.cn/news/605464.html

相关文章:

  • 动态规划Day5学习心得
  • python的异步、并发开发
  • (C++)C++类和类的方法(基础教程)(与Python类的区别)
  • C++提高编程学习--模板
  • 【硬件-笔试面试题】硬件/电子工程师,笔试面试题-50,(知识点:TCP/IP 模型)
  • 磁盘IO优先级控制对美国服务器存储子系统的调优验证
  • 02 基于sklearn的机械学习-KNN算法、模型选择与调优(交叉验证、朴素贝叶斯算法、拉普拉斯平滑)、决策树(信息增益、基尼指数)、随机森林
  • 【动态规划 | 多状态问题】动态规划求解多状态问题
  • YOLO---01目标检测基础
  • windows环境下MySQL 8.0 修改或重置密码
  • Mybatis分页查询当前页数据条数大于实际返回的数据条数
  • 7.5将模块分离到不同的文件中
  • 【JEECG】BasicTable单元格编辑,插槽添加下拉组件样式错位
  • 跳跃表可视化深度解析:动态演示数据结构核心原理
  • Docker-01.Docker课程介绍
  • 分层解耦(Controller,Service,Dao)
  • 从映射到共生:元宇宙、物联网与AI的智能融合生态图谱
  • nav2--安装/教程
  • 如何保证数据库的持久性与一致性:从 Linux 磁盘缓存策略到 MySQL 的设计
  • [SKE]使用gmssl库实现AES、SM4、DES、RSA、3DES_EDE和3DES_EEE算法的加密/解密参考模型
  • GitPython01-依赖排查
  • 8. 网络层
  • Linux系统编程Day1-- 免费云服务器获取以及登录操作
  • 【25届数字IC秋招总结】面试经验12——海康威视
  • LeetCode 面试经典 150_数组/字符串_轮转数组(6_189_C++_中等)(额外数组;转置)
  • DIV 指令概述
  • kali Linux 2025.2安装教程(解决安装失败-图文教程超详细)
  • web服务器nginx
  • RNN、LSTM、Transformer推荐博文
  • Spring AI 海运管理应用