tree节点的排序

本文介绍了如何使用Ext.tree.TreeSorter对从后台获取的Set集合进行排序,包括配置项详解及实际应用案例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我的tree是从后台得到的Set集合,所以顺序不稳定,所以看了一个东西比较有帮助
、Ext.tree.TreeSorter
主要配置项:
property:用于排序的节点属性名,默认为text。
dir:排序方向,可选值有asc、desc,默认为asc。
caseSensitive:是否区分大小写,默认为false。
folderSort:叶节点是否排在非叶节点之下,默认为false。
leafAttr:叶子节点在folder排序时的值,默认为leaf。
sortType:一个自定义函数用于在排序前转换节点值


我的写法是页面加载之后
var tree = Ext.getCmp("tree");
new Ext.tree.treeStoter(tree,{folderSort:true});
### 如何在 `el-tree` 组件中实现拖拽节点排序 为了实现在 `el-tree` 中的节点拖拽排序功能,可以利用该组件内置的支持属性和事件处理函数来完成这一需求。下面是一个具体的实例说明。 #### HTML 部分 定义了一个带有特定属性配置的 `<el-tree>` 标签用于渲染树形结构的数据,并启用了 `draggable` 属性以便支持节点之间的拖动操作[^2]: ```html <el-tree ref="treeCategory" :data="treeData" :default-expand-all='true' :expand-on-click-node="false" show-checkbox node-key="id" :default-checked-keys="ids" @check-change="nodeChange" check-strictly draggable @node-drop="handleDrop"> </el-tree> ``` #### JavaScript 方法部分 当发生拖放动作结束时会触发 `@node-drop` 事件,在此方法内部可以根据实际业务逻辑调整被移动后的节点位置并更新状态。这里提供了一种简单的回调函数模板作为参考: ```javascript methods: { handleDrop(draggingNode, dropNode, dropType, ev){ console.log('draggingNode:', draggingNode); console.log('dropNode:', dropNode); console.log('dropType:', dropType); // before / after / inner let curPid = null; switch(dropType){ case 'before': curPid = dropNode.parent.data.id || 0; break; case 'after': curPid = dropNode.parent.data.id || 0; break; default: curPid = dropNode.data.id; } this.$set(this.treeData, draggingNode.data.pid, curPid); // 更新服务器端数据... }, } ``` 上述代码片段展示了如何监听 `el-tree` 的 `node-drop` 事件以及相应的响应方式。通过判断 `dropType` 参数的不同取值(即放置目标相对于源项的位置),可进一步决定新父级 ID (`curPid`) 应设置为何值;最后调用 Vue 提供的状态管理工具 `$set()` 来同步前端显示的变化[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值