功能说明:
实现JVxeTable表格拖拽排序功能
解决子表拖拽排序后,点击保存数据,未实现拖拽排序后效果
参数配置:
提示:
1.开启 dragSort 属性之后即可实现上下拖拽排序。
2.使用 sortKey 属性可以自定义排序保存的 key,默认为 orderNum。
3.使用 sortBegin 属性可以自定义排序的起始值,默认为 0。
4.sortKey 定义的字段不需要定义在 columns 中也能正常获取到值。
5.当存在 fixed 列时,拖拽排序将会失效,仅能上下排序。
sortKey:根据表内排序字段更换,这里演示默认排序字段【orderNum】
sortBegin:默认排序序号从0开始,可以单独设置排序开始值,这里演示默认从【3】开始
JVxeTable配置:
<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】
<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>
异常情况:
只能点击拖拽排序按钮,进行上一行,下一行,插入一行的情况,
异常处理方法:
【1】修改表格表格字段列的宽度调整,保证表格不出现左右滚动条即可。
【2】修改组件方式处理,请参考官方更新文档:
JVxeTable列过长(出现横向滚动条)时无法拖拽排序 · Issue #1162