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

功能说明:

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

  • 20
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现表格拖拽排序可以使用HTML5中的drag和drop事件,以及JavaScript的相关操作。以下是一个示例代码: HTML部分: ```html <table id="sortable-table"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>国籍</th> </tr> </thead> <tbody> <tr draggable="true"> <td>1</td> <td>张三</td> <td>25</td> <td>中国</td> </tr> <tr draggable="true"> <td>2</td> <td>李四</td> <td>30</td> <td>美国</td> </tr> <tr draggable="true"> <td>3</td> <td>王五</td> <td>28</td> <td>英国</td> </tr> </tbody> </table> ``` JavaScript部分: ```javascript // 获取表格表格行 var table = document.getElementById('sortable-table'); var rows = table.querySelectorAll('tr'); // 设置表格行的拖放事件监听 rows.forEach(function(row) { row.addEventListener('dragstart', dragstart); row.addEventListener('dragenter', dragenter); row.addEventListener('dragover', dragover); row.addEventListener('dragleave', dragleave); row.addEventListener('drop', drop); row.addEventListener('dragend', dragend); }); var dragSrcEl = null; function dragstart(e) { dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } function dragenter(e) { this.classList.add('over'); } function dragover(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; } function dragleave(e) { this.classList.remove('over'); } function drop(e) { if (e.stopPropagation) { e.stopPropagation(); } if (dragSrcEl != this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } function dragend(e) { rows.forEach(function(row) { row.classList.remove('over'); }); } ``` 在上述代码中,通过获取表格表格行,然后为每一行设置拖放事件监听。当拖动某一行时,会触发对应的事件处理函数,进行相应的操作。 具体实现过程如下: 1. 在拖动开始时,记录下当前拖动的表格行(即dragSrcEl),同时设置拖放效果为move,将当前行的innerHTML设置为拖动的数据(text/html); 2. 当拖动进入其他表格行时,添加over类,用于样式的变化; 3. 在拖动过程中,防止浏览器默认行为,同时设置拖放效果为move; 4. 当拖动离开某个表格行时,移除over类; 5. 当拖放完成时,如果拖动的行不是当前行,则交换两行的innerHTML; 6. 最后,移除所有表格行的over类。 通过以上实现,即可实现简单的表格拖拽排序功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值