树节点—点击事件 — 根据节点名字，递归加载项

最新推荐文章于 2023-01-11 16:12:26 发布
原创 最新推荐文章于 2023-01-11 16:12:26 发布 · 497 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#递归加载树

本文介绍了一种基于树节点的检查项加载机制，通过递归方式实现在特定节点下加载检查项，并确保所有相关子项正确展开。该机制包括根据节点名字加载检查项、递归加载一级和二级检查项，以及确保父节点展开的功能。

#region树节点 —点击事件 — 根据节点名字加载检查项

    /// <summary>
    /// 根据节点名字加载检查项
    /// </summary>
    /// <param name="PersonName">节点的名字</param>
    /// <param name="checkProjects">检查项成员链表</param>
    public void CheckEmployee(string PersonName, List<CheckProject> checkProjects)
    {
    
        _Checks = checkProjects
        TreeNode[] treeNode = treeView.Nodes.Find(PersonName, true);
        for (int i = 0; i < treeNode.Length; i++)
        {
            //在所选节点加载检查项
            LoadChecks(treeNode[i]);
            //展开检查项
            treeNode[i].ExpandAll();
            //让其父节点展开
            IsPrate(treeNode[i]);
        }
        
    }
    /// <summary>
    /// 递归 让其父节点展开
    /// </summary>
    /// <param name="tn"></param>
    public void IsPrate(TreeNode tn)
    {
        if (tn.Parent!=null)
        {
            tn.Parent.Expand();
            IsPrate(tn.Parent);
        }
        
    }
    #endregion

    #region 对选中节点进行检查项的递归加载
    /// <summary>
    /// 一级检查项的递归加载
    /// </summary>
    /// <param name="tn"></param>
    public void LoadChecks(TreeNode tn)
    {
        foreach (CheckProject checkitem in _Checks)
        {
            //一级检查项
            if (!tn.Nodes.ContainsKey(checkitem.CheckProjectName))
            {
                TreeNode tn1 = new TreeNode();
                tn1.Name = checkitem.CheckProjectName;
                tn1.Text = checkitem.CheckProjectName;

                tn.Nodes.Add(tn1);
                SecondLoadChecks(tn1);
            }
        }
    }
    /// <summary>
    /// 二级检查项递归加载
    /// </summary>
    /// <param name="tn"></param>
    public void SecondLoadChecks(TreeNode tn)
    {
        foreach (CheckProject item in _Checks)
        {
            if (item.CheckProjectName == tn.Name)
            {
                TreeNode tn1 = new TreeNode();
                tn1.Text = item.Sub_CheckProject;
                tn1.Name = item.Sub_CheckProject;
                tn.Nodes.Add(tn1);
                SecondLoadChecks(tn1);
            }
        }

    }

#endregion

js获取html页面节点方法(递归方式)
10-26
总结来说，这段代码展示了如何使用JavaScript的递归方法来遍历HTML页面的DOM树，统计Element节点的数量，并收集这些节点的标签名。这样的技术在前端开发中非常常见，特别是在需要处理和操作页面内容时。通过理解这个...
网页上的树节点的制作源代码，生成多个树节点
09-15
通过监听用户的点击事件，可以改变树节点的状态（展开/折叠）。可以使用DOM操作（如`addEventListener`、`removeChild`、`appendChild`）来实现节点的增删改查，以及`style.display`切换显示状态。 4. **递归函数**...
C# TreeView控件中的nodemouseclick事件
云海唯C的专栏
05-10 8528
<br />nodemouseclick有两种响应<br />1：响应单击扩展符"+" 如果不想对该扩展符响应，利用一个判断语句即可解决，代码如下<br />private void tvMain_NodeMouseClick(object sender, TreeNodeMouseClickEventArgs e)<br />{<br />          if (e.Node.Bounds.Contains(e.Location))<br />         { //add your code<br
tree的点击事件
zhongzhihua
05-09 816
xml 代码 &lt;?xml version="1.0"?&gt;      &lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;      &lt;window id="treeRDF" title="RDF Tree"    
extjs TreeNode单击事件
东亮博客
01-16 6633
Tree中的子节点通常要设置不同的响应事件，实现这种方法有一种原理，就是添加click侦听事件，也就是listener，其实很简单，有两种方式可以实现： 1、TreePanel.addListener(‘click’ ,ClickFn);就是TreePanel的侦听，ClickFn就是你自定义的响应函数名，用来响应click事件 2、就是在声明子节点值的时候加上listener属性，如下面简单
树的创建及点击事件Java
qq_36594703的博客
06-03 786
import java.awt.BorderLayout; import java.nio.file.Paths; import javax.swing.JFrame; import javax.swing.JTree; import javax.swing.event.TreeSelectionEvent; import javax.swing.event.TreeSelectionListe
如何给miniui的树形设置点击事件
weixin_45966674的博客
12-24 3188
其实我觉得miniui本身是有一些不合理性的，导致他在项目中经常引发一下没必要的问题，但项目用什么框架也不是我们能决定的不是吗？可是树形主要是一种导航控件，但官方文档对选中节点的叙述相当模糊，如果用户选中节点而不能触发效果，这个树形写出来就没什么意义了。这样用户点击任何一个节点都会触发gitName方法，如果有判断具体点的是哪一个节点那括号里的参数(e)就好了。miniui的树形是通过div相互嵌套为结构的，外观还是挺精美的，就是问题有点多。这是我的ui树形，大家可以用于参考。
java、js中实现无限层级的树形结构方法(类似递归)
10-21
`group`函数用于根据父节点ID对树数据进行分组，方便后续遍历。`getDom`函数是一个递归函数，用于构建HTML结构，展示树形结构。当调用`new treeMenu(zNodes).init(0)`时，它会生成根节点（pId为0）及其所有子节点的...
java 实现动态改变树形结构中主节点的名称
12-23
根据提供的文件信息，我们可以分析并总结出以下关于“Java实现动态改变树形结构中主节点的名称”的相关知识点： ### 一、理解树形结构 在计算机科学中，树形结构是一种常用的数据组织形式，它将数据组织成类似于树...
精选资源
Android 多级菜单、树形菜单的实现 ，类似左边是树，右边展开节点
01-07
监听点击事件，当用户点击某个菜单项时，更新右侧内容。 4. **事件处理**： - 为`ExpandableListView`设置点击监听器，当点击一个菜单项时，获取其对应的`MenuItem`对象，然后更新右侧内容区域。可以通过替换`...
wdTree事例
02-05
wdTree 权限赋值 tree 树形列表
目录树加载并绑定右键点击事件
weixin_30825199的博客
07-07 383
1 using System.Collections; 2 using System.Drawing; 3 using System.IO; 4 using System.Linq; 5 using System.Windows.Forms; 6 7 namespace menuTreeWITHrightMouseClick 8 { 9 public...
C#树节点常用操作
风，停了
04-21 1534
1 鼠标点击节点复选框判断 1.1 复选框鼠标点击判断 private void tvw_MouseDown(object sender, MouseEventArgs e) { TreeViewHitTestInfo info = tvw.HitTest(e.Location); if (info != null && info.Location == TreeViewHitTestLocations.StateImage) { System.Console.WriteLine("
js 树结构数据的递归操作
良_123的专栏
01-11 2889
一般用于因后端给的数据字段不够完善，类型不正确，需要前端进行处理树数据。一般用于手动设置vue/react的UI库中的树的展开节点。一般用于前端做树的查询功能。
C#之在treeview中鼠标点击的所选的节点触发事件
weixin_30641465的博客
07-14 4315
一、背景 如下图所示，我想实现通过鼠标点击treeview的根节点，然后在文本框控件中显示鼠标点击的节点号。 二、程序实现 因为是要通过鼠标点击才发生的事情，所以这属于一个事件，需要触发才行，刚开始不知道这个事件，一直在网上复制别人的代码，发现点击鼠标一直触发不了。需要在treeview控件的属性窗口上有个闪电的标志，代表的是事件，去设置这个触发的事件。如下图所示： 然后在NodeMouseC...
C# 为TreeView中的子节点添加单击事件
热门推荐
白永辉的专栏
12-20 1万+
文章名字为单击事件，实际上双击等事件的操作类似 说明： (1) TreeView中的Nodes[] 本身是没有单击、双击事件的，但是TreeView本身这些事件都有； (2) TreeView中有一个属性：SelectedNode，该属性可以获取或设置当前选中的节点； 因此，结合点(1)和(2)，就可以做出一个类似于TreeView中的子节点单击事件 实例代码： (1) 为TreeVi
[js] Promise.all 多接口请求、递归节点查找（js 根据name查找tree中值）、渲染性能代码优化
qq_34450741的博客
05-10 969
说明：可直接cv代码到控制台 F12 运行 一、Promise.all 多接口请求，所有请求完成后打印所有请求结果 // 定义接口路径 const url = [100, 200, 300, 400, 500, 600, 700, 800, 900, 2000] // 模拟请求 function request(u) { return new Promise(resolve => { setTimeout(() => { if (u === 500 || u === 700) {
使用递归遍历DOM元素（父元素下的所有子元素）
寒江点雪
03-08 4289
案例：js代码段： &lt;script&gt; // 遍历指定元素下所有的子元素 function loadTree(parent, callback) { for (var i = 0; i &lt; parent.children.length; i++) { // 遍历第一级子元素 var child = ...
js递归及其应用
weixin_43190804的博客
05-26 1856
递归的概念 函数内部不断调用自身。递归函数的使用要注意函数终止条件避免死循环(一般都要写一个结束的条件)； //在递归的过程中会出错 // Maximum call stack size exceeded // 内存溢出：超过了最大的堆栈大小 递归两个要素 1.递归的边界——找到出口，在什么情况下跳出递归 2.递归的逻辑——找到入口，什么情况下重复调用自己，调用自己做什么 递归应用场景: 深拷贝 菜单树 遍历 DOM 树 1.经典案例1 ： 求和 求 1-100 的和 function sum(n)
为什么点击树节点也会触发change事件
最新发布
08-12
<think>我们提供的代码中，子组件（BridgeCascader）使用了el-cascader组件，并且设置了checkStrictly为true（可以选择任意一级）。但是，在树形结构中，点击父节点（公司节点）也会触发change事件，这可能不是我们期望的行为（我们期望只有选择桥梁叶子节点才触发）。 原因分析： 在Element UI的级联选择器中，即使设置了`checkStrictly: true`（即可以选择任意一级），点击非叶子节点（比如公司节点）也会触发change事件，并返回该节点的值（公司名称）。但我们的业务逻辑中，桥梁选择应该只选择具体的桥梁（叶子节点），公司节点只是作为分组。 解决方案： 我们可以通过设置`props.emitPath`为`false`（已经设置）和利用`change-on-select`（已废弃）或`expandTrigger`（控制展开方式）并不能直接解决。Element UI的Cascader组件在点击非叶子节点时，如果设置了`checkStrictly`为true，那么点击非叶子节点也会选中该节点。 但我们希望只有叶子节点才能被选中并触发change事件，可以通过以下两种方式之一： 方式一：在handleChange方法中判断选中的节点是否是叶子节点（即桥梁节点），如果不是，则不触发change事件（或者重置选择）。 方式二：在数据源中，只给叶子节点设置value（即桥梁节点有value，公司节点不设置value）。但是Element UI要求每个节点都有value，所以此方式不可行。 因此，我们采用方式一：在子组件的handleChange方法中，判断选中的节点是否是叶子节点（通过是否存在children来判断，或者通过我们自定义的数据结构）。但是注意，我们的数据中，公司节点（非叶子节点）有children，桥梁节点（叶子节点）没有children。 修改子组件的handleChange方法： 步骤： 1. 在handleChange中，我们不仅需要value，还需要知道选中的节点对象。但el-cascader在change事件中只返回value（或value数组），不返回节点对象。所以我们需要自己根据value去查找节点。 2. 我们可以通过value（桥梁编码）去查找节点，如果该节点是叶子节点（没有children），则触发change事件；否则，我们忽略这次选择（并重置选中的值）。 但是，这样会有问题：当用户点击公司节点时，我们无法直接通过value（公司名称）来获取节点对象（因为我们没有存储value到节点的映射），而且公司节点的value是公司名称，桥梁节点的value是桥梁编码。 因此，我们需要调整数据结构，在构建选项时，为每个节点添加一个type字段（'company'或'bridge'），然后在handleChange中根据value判断类型（但注意，公司名称和桥梁编码可能重复，所以不可靠）。 另一种做法：在节点对象中存储一个标志，比如isLeaf。我们在构建桥梁节点时，设置isLeaf为true，公司节点不设置（或设置isLeaf为false）。然后，在handleChange中，我们根据value查找节点，并判断该节点的isLeaf属性。 具体实现： 1. 在loadBridges方法中，构建桥梁节点时添加isLeaf属性： ```javascript const bridgeOption = { value: bridge.bridgeCode, label: bridge.bridgeName, bridgeName: bridge.bridgeName, companyName: companyName, fullData: bridge, isLeaf: true // 标记为叶子节点 }; ``` 公司节点不添加isLeaf属性（或者设置为false）： ```javascript const companyOption = { value: companyName, label: companyName, children: [], isLeaf: false // 非叶子节点 }; ``` 2. 在handleChange方法中，根据value查找节点，并判断是否是叶子节点： ```javascript handleChange(value) { // 根据value查找节点（注意：公司节点的value是公司名称，桥梁节点的value是桥梁编码） const node = this.findNodeByValue(value); if (node && node.isLeaf) { // 只有叶子节点才触发 this.$emit("input", value); // ... 其他逻辑（如获取运营单位等） this.$emit("change", this.getBridgeInfo(value)); } else { // 非叶子节点，重置选择（清空） this.selectedValue = ''; this.$emit("input", ''); // 可以提示用户必须选择具体桥梁 this.$message.warning('请选择具体桥梁'); } }, ``` 3. 实现findNodeByValue方法（递归查找）： ```javascript findNodeByValue(value, nodes = this.bridgeOptions) { for (const node of nodes) { if (node.value === value) { return node; } if (node.children) { const found = this.findNodeByValue(value, node.children); if (found) return found; } } return null; } ``` 4. 注意：由于公司节点和桥梁节点的value在不同的层级，且值类型可能相同（虽然概率低），所以此方法是可行的。 但是，这个方案有一个问题：当数据量很大时，递归查找可能会有性能问题。不过，桥梁数据量通常不会很大。 另外，我们还需要在重置选择后，更新级联选择器的显示（清空选择）。由于我们设置了v-model（selectedValue），所以当我们将selectedValue设置为空时，级联选择器会清空。 完整修改后的子组件方法： 注意：由于我们可能同时需要桥梁节点的信息（如公司名称），所以即使判断为叶子节点，也需要通过节点获取公司名称等信息。 因此，在handleChange中，我们使用节点对象来构建bridgeInfo。 调整后的handleChange方法： ```javascript handleChange(value) { const node = this.findNodeByValue(value); if (!node) { // 没有找到节点，清空 this.selectedValue = ''; this.$emit("input", ''); return; } if (node.isLeaf) { this.selectedValue = value; this.$emit("input", value); // 构建桥梁信息 const companyName = node.companyName; // 桥梁节点存储了公司名称 const bridgeInfo = { bridgeCode: value, companyName: companyName, bridgeName: node.bridgeName }; if (this.returnFullObject) { bridgeInfo.fullData = node.fullData; } this.$emit("change", bridgeInfo); } else { // 非叶子节点，重置 this.selectedValue = ''; this.$emit("input", ''); this.$message.warning('请选择具体桥梁'); } }, ``` 这样，当用户点击公司节点（非叶子节点）时，选择会被清空，并提示用户选择具体桥梁。 注意：由于级联选择器在点击非叶子节点时，会展开子节点，同时会触发change事件（因为选中了非叶子节点），然后我们立即将其清空，所以用户会看到选择器被清空。这可能会造成一些交互上的困惑，但符合我们的业务要求（必须选择叶子节点）。 另外，我们也可以考虑在级联选择器的配置中禁止选择非叶子节点，但Element UI没有直接提供这样的选项。所以上述方法是一个可行的解决方案。 但是，还有一种更简单的方式：设置`props`的`checkStrictly`为`false`（即只能选择叶子节点），这样用户点击非叶子节点时不会选中，只会展开。但是这样用户就不能通过点击非叶子节点来选中整个分组（我们本来就不希望这样），所以这符合我们的需求。但是，注意：`checkStrictly`为`false`时，只能选择叶子节点，非叶子节点不可选。所以，我们只需要将`checkStrictly`设为`false`即可。 因此，我们可以尝试： 将`cascaderProps`中的`checkStrictly`改为`false`，这样用户只能选择叶子节点（桥梁节点），点击公司节点只会展开，不会选中，也就不会触发change事件。 修改： ```javascript cascaderProps: { value: "value", label: "label", children: "children", checkStrictly: false, // 改为false，只能选择叶子节点 emitPath: false }, ``` 这样，当用户点击公司节点（非叶子节点）时，级联选择器不会选中，也不会触发change事件。那么我们的handleChange方法就只会在选择叶子节点时触发。 所以，我们不需要前面的复杂判断，只需要修改这个配置项即可。 但是，注意：在级联选择器中，当`checkStrictly`为`false`时，我们无法选择非叶子节点（即公司节点），这正是我们想要的。而且，我们之前设置`checkStrictly`为`true`是为了可以任意选择一级，但我们现在的要求是只能选择叶子节点，所以设置为`false`是合理的。 因此，解决方案非常简单：将`checkStrictly`改为`false`。 但是，我们之前设置`checkStrictly`为`true`可能是为了能够直接选择公司（但业务上不允许），现在业务要求只能选择桥梁，所以改为false即可。 所以，请修改子组件中`cascaderProps`的`checkStrictly`为`false`。 这样，当用户点击公司节点时，不会触发change事件，只有点击桥梁节点才会触发。 因此，我们不需要修改handleChange方法，也不需要添加isLeaf标记。 总结：将`checkStrictly`设为`false`，问题解决。 注意：在Element UI文档中，`checkStrictly`为`false`时，只能选择叶子节点。 所以，请检查你的级联选择器配置，确保`checkStrictly`为`false`。 但是，我们之前的代码中已经设置`checkStrictly: true`，这是问题的根源。将其改为`false`即可。 修改后的子组件数据： ```javascript cascaderProps: { value: "value", label: "label", children: "children", checkStrictly: false, // 修改这里 emitPath: false }, ``` 这样，点击树节点（非叶子节点）就不会触发change事件了，只有选择叶子节点才会触发。 所以，请尝试这个简单的修改。 注意：如果之前设置`checkStrictly: true`是为了其他目的（比如允许选择任意一级），那么现在业务要求只能选择桥梁（叶子节点），所以应该设为false。 因此，最终解决方案：将`checkStrictly`改为`false`。</think>在 Element UI 的 Cascader 级联选择器中，点击树节点会触发 `change` 事件的原因主要有以下几点： ### 根本原因分析 1. **默认行为设计**： - Cascader 组件默认将每个节点（包括父节点）视为可选择项 - 当 `checkStrictly: true` 时，允许选择任意层级节点（包括非叶子节点） 2. **事件触发机制**： ```javascript cascaderProps: { checkStrictly: true, // 允许选择任意节点 emitPath: false // 只返回最后选中的值 } ``` - 当用户点击**任何节点**（包括公司节点）时，组件都会触发 `change` 事件 - 即使是非叶子节点（公司节点），也会被当作有效选择 ### 解决方案：限制只能选择叶子节点 #### 方法一：配置级联选择器属性（推荐） ```javascript cascaderProps: { value: "value", label: "label", children: "children", checkStrictly: true, emitPath: false, // 新增：设置只能选择叶子节点 leafOnly: true } ``` #### 方法二：在 change 事件中过滤非叶子节点 ```javascript handleChange(value) { // 查找选择的节点 const node = this.findNodeByValue(value); // 只处理叶子节点 if (node && node.isLeaf) { this.$emit("input", value); const companyName = this.bridgeUnitMap[value]; this.$emit("change", { bridgeCode: value, companyName }); } else { // 非叶子节点选择：重置选择并提示 this.selectedValue = ''; this.$message.warning('请选择具体桥梁'); } }, // 辅助方法：根据值查找节点 findNodeByValue(value, nodes = this.bridgeOptions) { for (const node of nodes) { if (node.value === value) return node; if (node.children) { const found = this.findNodeByValue(value, node.children); if (found) return found; } } return null; } ``` #### 方法三：在数据中标记叶子节点 ```javascript // 加载桥梁时标记节点类型 async loadBridges() { // ... bridges.forEach(bridge => { const bridgeOption = { value: bridge.bridgeCode, label: bridge.bridgeName, isLeaf: true // 标记为叶子节点 }; // ... }); for (const companyName in res) { const companyOption = { value: companyName, label: companyName, isLeaf: false // 标记为非叶子节点 }; // ... } } ``` ### 最佳实践建议 1. **UI 提示优化**： ```html <el-cascader :props="{ ...cascaderProps, expandTrigger: 'hover' // 鼠标悬停展开，减少误点击 }" /> ``` 2. **禁用非叶子节点选择**： ```javascript cascaderProps: { // ... checkStrictly: false // 禁止选择非叶子节点 } ``` 3. **视觉区分**： ```css /* 非叶子节点样式 */ ::v-deep .el-cascader-node:not(.is-leaf) { color: #999; cursor: default; } ``` ### 总结 点击树节点会触发 `change` 事件是因为 Cascader 组件默认将所有节点视为可选元素。通过设置 `leafOnly: true` 或在 `change` 事件中过滤非叶子节点，可以确保只有具体的桥梁节点会触发业务逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值