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

不懂英语的程序猿2025-07-31 21:22

功能说明：

实现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"
/>