用easyui DataGrid编辑树形资料

easyui显示编辑树形资料有TreeGrid元件,但是这个元件的vue版本和react版本没有分页功能。virtual scroll功能也表现不佳。

我用DataGrid来处理。要解决的问题点:

(1)如何显示成树形。即,子节点如何有缩进。

先计算好每个节点的层级level,然后template中设置缩进大小。

<template v-slot:body="{row,column,rowIndex}"><div v-Droppable="{dragEnter:onDDKeyDragEnter,drop:onDDKeyDrop}"v-Draggable="{row:row,proxy:$refs.DDKeyDragProxy,revert:true,axis:'v',dragStart:onDDKeyDragStart,dragEnd:onDDKeyDragEnd,drag:onDDKeyDrag}"@click="onDDKeyClick"><span class='tree-indent' :style='{width:(row.acroStates.level*16).toString()+"px"}'></span><span v-if="row.children && row.children.length>0" :class="getDDKeyExpanderClass(row)" @click="onRowToggle($event,row)"></span><span v-else class='tree-indent'></span><span class='tree-title'>{{row[column.field]}}</span></div>
</template>

(2)如何展开和收拢节点。

展开收拢时,计算好每个节点的isVisual属性,通过DataGrid的filter来显示和隐藏。

expandRowRules:[{field:'isVisual',op:'equal',value:true
}],......
<DataGrid :filterRules="expandRowRules">
......
toggleRow(row){if (row.acroStates.state=='open') row.acroStates.state='closed';else row.acroStates.state='open';let root=row;function scanNodes(parent,children){   for(let i=0;i<children.length;i++){let node=children[i];node.isVisual=root.acroStates.state=='open' && parent.acroStates.state=='open';if (node.children) scanNodes(node,node.children);}}if (row.children) scanNodes(row,row.children);
},
......
onRowToggle(e,row){//console.log('toggle',e,row);//this.finishEditing();util_treePlain.toggleRow(row);this.$refs.tree.doFilter();//取消冒泡,使其不触发cellclick事件e.cancelBubble=true;e.preventDefault();e.stopPropagation();
},

(3)排序时如何保持节点的上下级层级关系。

节点按同级排序,按深度优先扫描树形节点,把节点一个个加入到平面的数组中。

expandTree2Plain(treeRows){let rows=[];function scanNodes(nodes,level){for(let i=0;i<nodes.length;i++){let node=nodes[i];if (!node.acroStates){node.acroStates={state:'open'}}node.acroStates.level=level;node.acroStates.index=rows.length;node.isVisual=node.acroStates.state=='open';rows.push(node);if (node.children){scanNodes(node.children,level+1);}}}scanNodes(treeRows,0);return rows;
},
sortTree2Plain(treeRows,sorts){let rows=[];function scanNodes(nodes){if (sorts && sorts.length>0){nodes.sort(function(a,b){let r;let v1=a[sorts[0].field];          let v2=b[sorts[0].field];if (v1==null||v1==undefined) v1='';if (v2==null||v2==undefined) v2='';if (sorts[0].field=='SortNumber'){if (v1=='') v1=-1;else v1=parseInt(v1);if (v2=='') v2=-1;v2=parseInt(v2);}if (v1<v2) r=-1;else if (v1==v2) r=0;else r=1;if (sorts[0].order=='desc') r=-r;return r;});}for(let i=0;i<nodes.length;i++){let node=nodes[i];node.acroStates.index=rows.length;rows.push(node);if (node.children) scanNodes(node.children);}}scanNodes(treeRows);//console.log(rows);return rows;
},

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/46196.shtml

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

相关文章

clickhouse-监控配置

一、概述 监控是运维的一大利器&#xff0c;要想运维好clickhouse,首先就要对其进行监控&#xff0c;clickhouse有几种监控数据的方式&#xff0c;一种是系统本身监控&#xff0c;一种是通过exporter来监控&#xff0c;下面分别描述一下 二、系统自带监控 我下面会对监控做一…

【学习日记】【FreeRTOS】时间片的实现

前言 本文以野火的教程和代码为基础&#xff0c;对 FreeRTOS 中时间片的概念作了解释&#xff0c;并且给出了实现方式&#xff0c;同时发现并解决了野火教程代码中的 bug。 一、时间片是什么 在前面的文章中&#xff0c;我们已经知道任务根据不同的优先级被放入就绪列表中不…

计算机竞赛 python的搜索引擎系统设计与实现

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python的搜索引擎系统设计与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;5分创新点&#xff1a;3分 该项目较为新颖&#xff…

【.net MVC】 EXCEL 导入

Excel导入 首先是前端页面 导入首先需要选择文件&#xff0c;这时会出现第一个易错问题&#xff1a;不同的浏览器保护机制&#xff0c;会将选择文件的路径进行保护&#xff0c;类似”C:\\fakepath\\文件名“&#xff0c;这样的文件路径肯定是不能获取正确的文件进行操作。 当…

1、攻防世界第一天

1、网站目录下会有一个robots.txt文件&#xff0c;规定爬虫可以/不可以爬取的网站。 2、URL编码细则&#xff1a;URL栏中字符若出现非ASCII字符&#xff0c;则对其进行URL编码&#xff0c;浏览器将该请求发给服务端&#xff1b;服务端会可能会先对收到的url进行解码&#xff0…

深度解读波卡 2.0:多核、更有韧性、以应用为中心

本文基于 Polkadot 生态研究院整理&#xff0c;有所删节 随着波卡 1.0 的正式实现&#xff0c;波卡于 6 月 28 日至 29 日在哥本哈根举办了年度最重要的会议 Polkadot Decoded 2023&#xff0c;吸引了来自全球的行业专家、开发者和爱好者&#xff0c;共同探讨和分享波卡生态的…

ByteV“智农”平台--数字乡村可视化

“智农”平台基于自主可控的数字孪生技术、物联网技术、大数据技术&#xff0c;构建全流程的新型农业一体化管理平台&#xff0c;围绕产运销管理全流程&#xff0c;实现生产->存储->包装->运输->销售的全链条管理。融合农业数据管理、农业数据预警显示、多维数据综…

达梦数据库8用户管理以及忘记sysdba密码修改办法

达梦数据库8用户管理&达梦数据库v8忘记sysdba密码&#xff0c;修改办法。 达梦数据库8用户管理1.创建用户的语法:2.锁定/解锁用户3.修改用户的密码&#xff08;同样要符合密码策略PWD_POLICY&#xff09;4.修改用户默认表空间5.删除用户6.同样地可以使用DM管理工具进行创建…

【工具】 删除Chrome安装的“创建快捷方式”

创建Chrome的快捷方式&#xff0c;可以放在桌面&#xff0c;想用时双击就可以打开网页&#xff0c;比书签&#xff08;brookmark&#xff09;结构化管理更方便。 但是&#xff0c;安装一时爽&#xff0c;卸载有问题。 如果用 windows 控制面板\所有控制面板项\程序和功能 卸载…

Facebook 应用未启用:这款应用目前无法使用,应用开发者已得知这个问题。

错误&#xff1a;Facebook 应用未启用:这款应用目前无法使用&#xff0c;应用开发者已得知这个问题。应用重新启用后&#xff0c;你便能登录。 「应用未经过审核或未发布」&#xff1a; 如果一个应用还没有经过Facebook的审核或者开发者尚未将应用发布&#xff0c;那么它将无法…

java学习004

常用数据结构对应 php中常用的数据结构是Array数组&#xff0c;相对的在java开发中常用的数据结构是ArrayList和HashMap&#xff0c;它们可以看成是array的拆分&#xff0c;一种简单的对应关系为 PHPJAVAArray: array(1,2,3)ArrayListlArray: array(“name” > “jack”,“…

BC99 序列中整数去重

描述 输入n个整数的序列&#xff0c;要求对这个序列进行去重操作。所谓去重&#xff0c;是指对这个序列中每个重复出现的整数&#xff0c;只保留该数第一次出现的位置&#xff0c;删除其余位置。 输入描述 输入包含两行&#xff0c;第一行包含一个正整数n&#xff08;1 ≤ n…

vue项目打包成exe文件

1. 获取electron-quick-start demo git clone https://github.com/electron/electron-quick-start2. 安装依赖包 npm install 或 npm i // 安装依赖时可能会遇到node版本的问题&#xff0c;需要切换node版本的可以先看下nvm&#xff0c;简单易操作3. 打包项目&#xff08;需要…

[Linux] 性能分析

1. 中断 cat /proc/softirqs

基于YOLOv8模型和PCB电子线路板缺陷目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型PCB电子线路板缺陷目标检测系统可用于日常生活中检测与定位PCB线路板瑕疵&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检…

算法leetcode|72. 编辑距离(rust重拳出击)

文章目录 72. 编辑距离&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;二维数组&#xff08;易懂&#xff09;滚动数组&#xff08;更加优化的内存空间&#xff09; go&#xff1a;c&#xff1a;python&a…

Java Word转PDF(直接转和以图片形式转)、PDF转图片、图片转PDF

在淘宝上找了一家写代码的店铺写了一个工具类&#xff0c;再参考网上的代码&#xff0c;改了改 用到的类库&#xff1a; <!-- https://mvnrepository.com/artifact/org.apache.pdfbox/fontbox --><!--word转pdf--><dependency><groupId>com.documents4…

Qt中如何在qml文件中使用其他的qml文件并创建对象

如果想使用其他的qml文件直接创建对象&#xff0c;必须先这样导入其qml文件并as成别名&#xff0c;才可以创建对象并使用它。 一、导入qml文件&#xff0c;例如&#xff1a; import "CameraConfig.qml" as CameraConfig import "CameraDevelopView.qml" a…

内网穿透实战应用-windows搭建WebDAV服务,并内网穿透公网访问【无公网IP】

windows搭建WebDAV服务&#xff0c;并内网穿透公网访问【无公网IP】 文章目录 windows搭建WebDAV服务&#xff0c;并内网穿透公网访问【无公网IP】1. 安装IIS必要WebDav组件2. 客户端测试3. cpolar内网穿透3.1 打开Web-UI管理界面3.2 创建隧道3.3 查看在线隧道列表3.4 浏览器访…