`
huangyongxing310
  • 浏览: 496437 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

JS过滤树数据

 
阅读更多 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <!--<script type="text/javascript" src="vue.min.js"></script>-->


  <script type="text/javascript"
    src="vue.min.js"></script>
  <link rel="stylesheet"
    href="index.css">
  <script src="index.js"></script>


</head>
<body>

<div id="app">


</div>

<script type="text/javascript">

  var menu = [];

  var node0 = {
    id: 'test1',
    code: 'code',
    name: 'name1',
    state: 'open/close',
    ico: 'ico',
    parentId: 0,
    checked: 'true/false',
    attributes: {},
    children: []
  };
  var node1 = {
    id: 'test',
    code: 'code',
    name: 'name1',
    state: 'open/close',
    ico: 'ico2',
    parentId: 0,
    checked: 'true/false',
    attributes: {},
    children: []
  };

  var node2 = {
    id: 3,
    code: 'code',
    name: 'name1',
    state: 'open/close',
    ico: 'ico',
    parentId: 0,
    checked: 'true/false',
    attributes: {},
    children: [node0]
  };

  var node3 = {
    id: 3,
    code: 'code',
    name: 'name1',
    state: 'open/close',
    ico: 'ico',
    parentId: 0,
    checked: 'true/false',
    attributes: {},
    children: [node1]
  };

  var node4 = {
    id: 4,
    code: 'code',
    name: 'name1',
    state: 'open/close',
    ico: 'ico',
    parentId: 0,
    checked: 'true/false',
    attributes: {},
    children: [node1]
  };
  var node5 = {
    id: 5,
    code: 'code',
    name: 'name1',
    state: 'open/close',
    ico: 'ico',
    parentId: 0,
    checked: 'true/false',
    attributes: {},
    children: [node3, node2]
  };
  node3

  menu.push(node5);
  menu.push(node4);

  console.info(JSON.stringify(menu));

  var menuTest = filterByName(menu, '3');
  console.info("menuTest == " + JSON.stringify(menuTest));

  function filterByName(menu, name) {
    var menuNew = [];
    for (var i = 0; i < menu.length; i++) {
      var nodeNew = undefined;
      var node = menu[i];
      var childrenNode = node.children;

      var childrenMenu = [];
      if (childrenNode) {
        if (childrenNode.length > 0) {
          childrenMenu = filterByName(childrenNode, name);
        }
      }

      if (childrenMenu) {
        if (childrenMenu.length > 0) {
          nodeNew = new Object();
          nodeNew = nodeFillNewFromOld(node, nodeNew);
          nodeNew.children = childrenMenu;
        } else {
          if (checkNodeEquals(node, name)) {
            nodeNew = new Object();
            nodeNew = nodeFillNewFromOld(node, nodeNew);
          }
        }
      }
      if (nodeNew) {
        menuNew.push(nodeNew);
      }
    }

    return menuNew;
  }

  function nodeFillNewFromOld(oldNode, newNode) {
    newNode.id = oldNode.id;
    newNode.code = oldNode.code;
    newNode.name = oldNode.name;
    newNode.state = oldNode.state;
    newNode.ico = oldNode.ico;
    newNode.parentId = oldNode.parentId;
    newNode.checked = oldNode.checked;
    newNode.attributes = oldNode.attributes;
    newNode.children = undefined;

    return newNode;
  }

  function checkNodeEquals(node, name) {
    if (node.name.indexOf(name) != -1) {
      return true;
    } else {
      return false;
    }

    //    if (node.id == name) {
    //      return true;
    //    } else {
    //      return false;
    //    }
  }


</script>
</body>
</html>
分享到：
| VueJS 基础
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 树形结构数据遍历条件判断删除对应数据.pdf

    在JavaScript编程中，处理树形结构数据是一种常见的需求，特别是在数据可视化、文件系统管理或组织层级结构等场景。树形结构数据通常包含嵌套的数组，每个元素代表一个节点，可能有子节点（children）属性。`...

    JSTree(js写的树形菜单，支持加载10000节点以上)

    **JSTree：高效处理大数据量的JavaScript树形菜单组件** 在Web开发中，树形菜单是一种常见的数据展示形式，用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库，专为构建功能丰富的交互式树形菜单...

    jquery ztree实现模糊查询功能,给树上的结点添加过滤器

    这个方法允许我们在用户输入关键词后，实时过滤树中的节点，只显示与关键词匹配的子节点。 要实现模糊查询，首先需要在HTML中设置一个输入框供用户输入查询关键字，并监听其`keyup`事件。当用户输入时，触发模糊...

    树结点过滤 拼或者汉字都可以

    在JavaScript编程中，处理树结构的数据时，常常需要进行节点过滤操作，以便根据特定条件筛选出我们需要的部分。"树结点过滤 拼或者汉字都可以 TreeFilter"这个主题正是关于如何在树形结构中实现过滤功能，不论是通过...

    JS树 集合 目录树 二十多个

    这些JS目录树实现的差异可能在于它们的性能、可定制性、动画效果、是否支持拖放操作、是否支持搜索和过滤等功能。通过研究和比较这些实现，你可以根据实际项目需求选择或定制合适的解决方案。 总的来说，理解和掌握...

    一个漂亮的目录树代码（JS版）

    这个“一个漂亮的目录树代码（JS版）”是一个JavaScript实现的目录树组件，它可以帮助开发者创建美观且交互性强的文件或目录结构。下面我们将深入探讨这个话题。 首先，目录树是一种以树形结构展示文件系统或逻辑...

    js动态树合集（好用）

    JavaScript 动态树是一种在网页应用中常用的交互式数据展示方式，它允许用户以树状结构来组织和操作数据。这种技术在各种场景下都非常实用，例如文件管理系统、组织架构展示、导航菜单等。本资源“js动态树合集”...

    几个非常好的js树

    dhtmlxGrid是一款强大的JavaScript数据网格组件，它提供了丰富的功能，如数据排序、分页、过滤、编辑等。这个组件可以处理大量数据，并支持多种数据源。在压缩包中出现的`dhtmlxgrid_v10_pro_60724.zip`可能包含了...

    JavaScript Dtree 最经典的JS目录树

    JavaScript DTree是一种基于JavaScript实现的目录树控件，它在Web应用中被广泛用于展示层次结构数据，如文件系统、组织结构或者网站导航。DTree以其简洁高效、可定制化的特点，深受开发者喜爱。在这个话题中，我们将...

    原生js实现无限目录树.zip

    本项目“原生js实现无限目录树”提供了一种解决方案，它涵盖了两种实现方式：一次性加载所有数据和异步加载下级数据。下面我们将深入探讨这两种实现方式以及它们在实际应用中的价值。 首先，一次性加载所有数据的...

    javascript 写的 树形结构( 递归方法 )(普通写法跟对象写法)

    在JavaScript编程中，树形结构是一种非常常见的数据结构，它模拟了自然界中的树，由节点（也称为顶点）和边组成。在这个场景下，我们讨论的是如何使用递归方法来构建和操作树形结构，无论是普通的写法还是基于对象的...

    EXTJS过滤树

    EXTJS过滤树是一种在EXTJS框架中实现的高级特性，主要用于增强树形组件的功能，让用户能够更高效地浏览和操作大量的层次数据。在EXTJS中，树形组件（TreePanel）通常用于展示具有层级关系的数据，例如组织结构、文件...

    JavaScript实现树形菜单

    JavaScript是一种广泛应用于网页和...综上所述，JavaScript实现树形菜单需要理解数据结构、DOM操作、事件处理和性能优化等多个方面的知识。通过不断实践和学习，你可以创建出功能强大且用户体验良好的树形菜单组件。

    js 实现combox 树选择

    8. **用户交互优化**：为了提升用户体验，可以添加搜索功能，允许用户在输入框中输入关键词过滤树中的节点。 在实际项目中，可能会使用库或框架，如jQuery、Vue.js或React.js，它们提供了便利的API和生命周期方法，...

    JS后台管理树形菜单代码.rar

    "JS后台管理树形菜单代码.rar" 是一个包含JavaScript实现的树形菜单插件，适用于后台管理场景。这个压缩包提供了实现这种功能的代码示例，帮助开发者快速构建出美观且高效的树状菜单。 首先，我们来详细了解一下...

    树形控件范例JS生成的树形组件

    `js`目录下的JavaScript文件则包含实现树形控件逻辑的代码。这些文件可能会引入一些库，如jQuery或Vue.js，来简化DOM操作和事件处理。 对于样式，`images`目录可能包含了一些图标资源，如展开/折叠箭头，用于美化树...

    Javascript 树形结构示例

    此外，JavaScript中的闭包和高阶函数特性使得我们可以轻松地实现对树形结构的高级操作，例如对树节点进行映射、过滤或者组合。 在Java中，树形结构的实现方式类似，只是语法和类库略有不同。Java通常使用类和继承来...

    基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染.zip

    "基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染"这个项目，就是针对这一需求，将经典的zTree库与Vue.js相结合，为开发者提供了一个强大且高效的解决方案。 zTree是一个基于JavaScript的开源树形插件，...

    JavaScript将服务端平行数据转换成树形菜单形式

    - 可以增加搜索、过滤和排序功能，使得用户可以更方便地查找和管理树中的数据。 - 为树形菜单添加展开/折叠、拖放、右键菜单等交互特性，提升用户体验。 通过以上步骤，我们就能利用JavaScript将服务端返回的平行...

Magicbox
Global site tag (gtag.js) - Google Analytics