wdTree树树节点选中后只显示相关联的节点

最新推荐文章于 2024-08-21 09:00:39 发布

yynan555

最新推荐文章于 2024-08-21 09:00:39 发布

阅读量405

点赞数

分类专栏： js tdtree tree 文章标签： js 数据结构 javascript

本文链接：https://blog.csdn.net/yynan555/article/details/107642322

版权

本文介绍了一个JavaScript实现的场景，当在wdTree树形结构中选择节点后，如何只显示与所选节点相关联的其他节点。通过递归遍历所有节点，调整每个节点的选中状态，并利用wdTree的数据结构进行重新渲染，以达到预期的显示效果。

摘要由CSDN通过智能技术生成

场景

需要完成选择树中的某个或某些节点后, 只显示出关联的节点

结果

实现

数据结构(使用wdtree要求的结构)

实现思路

通过递归的方式遍历所有节点并得到所有需要的节点, 过程中需要对每个节点的checkbox的三个状态进行修改(包括: 不选, 部分选中, 全部选中), 将获取到的数据结构进行wdTree重新渲染, 达到显示效果

/**
 * 得到需要显示的节点
 * @param $nodes wdTree 的 data数据结构
 * @param $relation 相关联的所有节点ID ['1_11', '2_13', '3_14']
 * @param $checkboxed 选中的所有节点ID 格式如: ['1_11', '2_13']
 * @retuen [
 * 	all_count 当前所有的节点
 * 	select_count 选中的节点数量
 *  childs nodes数据结构(wdTree)
 * ]
 */
function getNeedShowNodes($nodes, $relation,$checkboxed)
{
    var all_count = 0;
    var select_count = 0;
    var childs = [];
    if (Ar