功能说明:

实现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.pswp.cn/pingmian/91227.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/91227.shtml
英文地址,请注明出处:http://en.pswp.cn/pingmian/91227.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【腾讯云】EdgeOne网站安全防护的配置方法 防范盗刷流量 附恶意IP和UA黑名单

经过上个月的前车之鉴&#xff0c;我摸索出一套针对腾讯云EdgeOne《付费版》的安全配置模板&#xff0c;仅供各位站长参考 配置方法 一、在EdgeOne控制面板页面&#xff0c;点击要配置的域名。 二、进入后&#xff0c;点击安全防护-WEB防护-自定义规则&#xff0c;按图所示添加…

白玩 一 记录retrofit+okhttp+flow 及 kts的全局配置

先回忆下flow吧&#xff01; flow是啥 Flow 是 Kotlin 协程框架中的一个异步数据流处理组件&#xff0c;专为响应式编程设计&#xff0c;适用于需要连续或异步返回多个值的场景&#xff0c;如网络请求、数据库查询、传感器数据等 1 ‌异步流&#xff08;Asynchronous Stream…

犯罪现场三维还原:科技助力刑侦变革

在刑侦领域&#xff0c;犯罪现场的准确还原对于案件侦破起着至关重要的作用。传统的现场记录方式&#xff0c;如拍照、绘图等&#xff0c;虽然能获取一定信息&#xff0c;但难以全面、直观地呈现现场全貌&#xff0c;容易遗漏关键细节&#xff0c;且在后期分析和信息传达上存在…

go-admin 构建arm镜像

目录 1、 go-admin Dockerfile 2、docker build go-admin 3、settings.yml 4、go-admin-ui Dockerfile 5、docker build go-admin-ui 6、go-admin.yaml 7、go-admin-ui.yaml 1、 go-admin Dockerfile # 构建阶段:使用 Go 1.24 版本(支持远程调试) FROM golang:1.24-…

深入浅出:C++ STL简介与学习指南

目录 前言 STL的版本演变 STL六大组件 STL的重要性 如何学习STL STL的缺陷 总结 前言 什么是STL&#xff1f; STL&#xff08;Standard Template Library&#xff0c;标准模板库&#xff09;是C标准库的核心组成部分&#xff0c;它不仅是一个可复用的组件库&#xff0c;更是一…

Mysql事务原理

脏读(Dirty Read) 某个事务已更新一份数据&#xff0c;另一个事务在此时读取了同一份数据&#xff0c;由于某些原因&#xff0c;前一个进行了RollBack&#xff0c;则后一个事务所读取的数据就会是不正确的。 不可重复读(Non-repeatable read) 在一个事务的两次查询之中数据不一…

小红书笔记详情API指南

一、引言小红书作为中国领先的社交电商平台&#xff0c;拥有超过4.8亿用户(2025年Q2数据)&#xff0c;其开放平台已成为品牌营销与数据挖掘的重要渠道‌1。通过笔记详情API获取数据&#xff0c;可以帮助商家、品牌方和数据分析人员了解用户反馈、市场趋势和消费需求‌。这些数据…

VS+Qt中使用QCustomPlot绘制曲线标签(附源码)

在qt中我们常常会使用数据来绘制曲线&#xff0c;常用的的绘制方法用QCutomPlot、QChart和QPrinter。有时我们会根据需要在曲线进行二次绘制&#xff0c;包括对曲线打标签&#xff0c;显示某个点的值等功能。本文主要为大家介绍在QCustomPlot中使用QCPItemTracer和QCPItemText绘…

Spring Boot项目生产环境部署完整指南

在Spring Boot应用开发完成后&#xff0c;如何将其稳定、高效地部署到生产环境是每个开发者都需要掌握的关键技能。本文将详细介绍Spring Boot项目的多种部署方案&#xff0c;从传统部署到现代化容器部署&#xff0c;选择最适合的部署策略。 1. 部署前的准备工作 1.1 项目打包优…

微信小程序中实现页面跳转的方法

微信小程序中页面跳转主要有两种方式&#xff1a;声明式导航&#xff08;通过组件实现&#xff09;和编程式导航&#xff08;通过API实现&#xff09;。两种方式适用于不同场景&#xff0c;以下详细说明。一、声明式导航&#xff08;navigator组件&#xff09;通过小程序内置的…

从0开始学linux韦东山教程Linux驱动入门实验班(7)

本人从0开始学习linux&#xff0c;使用的是韦东山的教程&#xff0c;在跟着课程学习的情况下的所遇到的问题的总结,理论虽枯燥但是是基础。本人将前几章的内容大致学完之后&#xff0c;考虑到后续驱动方面得更多的开始实操&#xff0c;后续的内容将以韦东山教程Linux驱动入门实…

国内AI IDE竞逐:腾讯CodeBuddy、阿里通义灵码、字节跳动TRAE、百度文心快码

国内AI IDE竞逐&#xff1a;腾讯CodeBuddy、阿里通义灵码、字节跳动TRAE、百度文心快码 随着人工智能技术的不断发展&#xff0c;各大科技公司纷纷推出自家的AI IDE&#xff0c;推动软件开发进入全新的智能化时代。腾讯的 CodeBuddy IDE、阿里云的 通义灵码 AI IDE、字节跳动的…

git rebase使用教程 以及和merge的区别

Merge和Rebase概念概述 rebase 和 merge 相似&#xff0c;但又不完全相同&#xff0c;本质上都是用来合并分支的命令&#xff0c;区别如下 merge合并分支会多出一条merge commit记录&#xff0c;而rebase不会merge的提交树是非线性的&#xff0c;会有分叉&#xff0c;而rebase的…

React中的合成事件解释和理解

什么是合成事件&#xff08;Synthetic event&#xff09;?它和原生事件有什么区别?解题思路:解释合成事件&#xff0c;然后对比原生事件&#xff0c;然后再说他的优势1.一致性 在 react里面&#xff0c;这个合成事件是非常重要的&#xff0c;因为它就是为了解决浏览器之间与事…

【Python系列】使用 memory_profiler 诊断 Flask 应用内存问题

博客目录一、内存分析的重要性二、memory_profiler 基础使用安装与基本配置理解分析报告三、在 Flask 应用中使用 memory_profiler装饰视图函数使用 mprof 进行长期监控四、高级内存分析技巧精确测量代码块内存定期内存采样结合 objgraph 分析对象引用五、常见内存问题及解决方…

vue3【组件封装】超级表单 S-form.vue

最终效果 代码实现 components/SUI/S-form.vue <script lang"ts" setup> import type { FormInstance } from "element-plus";// 使用索引签名定义对象类型 type GenericObject {[key: string]: any; };const props defineProps<{Model?: Gen…

Android Studio Memory Monitor内存分析核心指标详解

Depth、Native Size、Shallow Size、Retained Size 解析 一、指标定义与对比指标定义计算逻辑重要性Shallow Size对象自身实例占用的内存基本类型字段大小 引用指针 内存对齐对象的基础内存成本Retained Size回收该对象可释放的总内存量&#xff08;含所有依赖对象&#xff0…

vue中使用wavesurfer.js绘制波形图和频谱图(支持.pcm)

新的实现方式&#xff1a;vue使用Canvas绘制频谱图 安装wavesurfer.js npm install wavesurfer.js第一版&#xff1a; 组件特点&#xff1a; 一次性加载好所有的数据&#xff1b; <template><div class"audio-visualizer-container"><div class&…

go mod教程、go module

什么是go mod go mod 是go语言的包管理工具&#xff0c;类似java 的maven&#xff0c;go mod的出现可以告别goPath&#xff0c;使用go module来管理项目&#xff0c;有了go mod账号就不需要非得把项目放到gopath/src目录下了&#xff0c;你可以在磁盘的任何位置新建一个项目 go…

150-SWT-MCNN-BiGRU-Attention分类预测模型等!

150-SWT-MCNN-BiGRU-Attention分类预测模型!基于多尺度卷积神经网络(MCNN)双向长短期记忆网络(BiGRU)注意力机制(Attention)的分类预测模型&#xff0c;matlab代码&#xff0c;直接运行使用&#xff01;1、模型介绍&#xff1a;针对传统方法在噪声环境下诊断精度低的问题&#…