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

功能说明:

实现JVxeTable表格拖拽排序功能

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


参数配置:

提示:

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

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

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

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

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


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

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


JVxeTable配置:

javascript 复制代码
<JVxeTable
   ref="tableRef1"
   toolbar
   dragSort
   sortKey="orderNum"
   :sortBegin="3"
   rowSelection
   :maxHeight="580"
   :columns="table1.columns"
   :dataSource="table1.data"
/>

数据库增加排序字段:

提示:

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


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


查询SQL增加order_num排序:

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

java 复制代码
<select id="selectByMainId" parameterType="java.lang.String" resultType="org.jeecg.modules.mmes.entity.item">
	SELECT * 
	FROM  item
	WHERE
		main_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"

javascript 复制代码
<JVxeTable
   ref="tableRef1"
   toolbar
   dragSort
   sortKey="orderNum"
   :sortBegin="3"
   dragSortFixed="none"
   rowSelectionFixed="none"
   rowSelection
   :maxHeight="580"
   :columns="table1.columns"
   :dataSource="table1.data"
/>
相关推荐
劫大大2 分钟前
前端页面导出pdf功能,完美解决分页截断问题,添加页眉页脚
前端·vue.js
冒泡的肥皂5 分钟前
数据库最近学到的小知识(一
数据库·后端·架构
拾光拾趣录8 分钟前
前端面试真题深度解析:闭包、数组操作与 Promise 机制
前端·面试
小小小小宇11 分钟前
react中 baseQueue 和 baseUpdate所起的作用
前端
脑袋大大的22 分钟前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
coding随想26 分钟前
深入浅出HTML5 CSS类扩展:getElementsByClassName和classList属性
前端·css·html5
程序视点29 分钟前
电脑硬件检测必备!图吧工具箱11年免费良心软件!100+免费工具合集
前端·windows·后端
IguoChan36 分钟前
话一话职场PUA
后端
随笔记40 分钟前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app