1. function main(keywords,data){
  2. function fn(arr){
  3. var flag = false;
  4. for(var i = 0;i <arr.length;i++){
  5. var item = arr[i];
  6. if(item.children.length > 0){
  7. var res = fn(item.children);
  8. if(res){
  9. item.isHidden = false;
  10. if(!item.open){
  11. item.open = true;
  12. }
  13. }
  14. }
  15. if(item.isHidden === false){
  16. flag = true;
  17. }
  18. }
  19. return flag;
  20. }
  21.  
  22. function deal(arr,arr1){
  23. arr.map(function(item){
  24. if(item.children.length > 0){
  25. deal(item.children,arr1);
  26. }
  27. delete item.children;
  28. arr1.push(item);
  29. })
  30. }
  31.  
  32. function createTree (originArr, pid, indexId, parentId) {
  33. var tree = [];
  34. for (var i = 0; i < originArr.length; i++) {
  35. var item = originArr[i];
  36. if (item[parentId] == pid) {
  37. item.children = createTree(originArr, item[indexId], indexId, parentId);
  38. tree.push(item);
  39. }
  40. }
  41. return tree;
  42. }
  43. //var keywords = '成都镇';
  44. data.map(function(item,index){
  45. keywords = keywords.trim();
  46. if(keywords != ''){
  47. if(item.name.indexOf(keywords) > -1){
  48. item.isHidden = false;
  49. } else {
  50. item.isHidden = true;
  51. }
  52. }else{
  53. item.isHidden = false;
  54. }
  55. });
  56. var result = createTree(data,0,'id','parentId');
  57. fn(result);
  58.  
  59. var arr1 = [];
  60. deal(result,arr1);
  61. var arr2 = arr1.filter(function(item){
  62. return item.isHidden == false
  63. });
  64. // console.log(arr2);
  65. var idArrs = [];
  66. var pidArrs = [];
  67. var arr4 = [];
  68. arr2.map(function(item){
  69. if(idArrs.indexOf(item.id) < 0 ){
  70. idArrs.push(item.id);
  71. }
  72. if(pidArrs.indexOf(item.parentId) < 0 ){
  73. pidArrs.push(item.parentId);
  74. }
  75. });
  76. // idArrs
  77.  
  78. idArrs.map(function(item1){
  79. if(pidArrs.indexOf(item1)<0 && arr4.indexOf(item1) < 0){
  80. arr4.push(item1)
  81. }
  82. });
  83. for (var i = 0; i < arr4.length; i++) {
  84. var item = arr4[i];
  85. var result1 = createTree(data,item,'id','parentId');
  86. deal(result1,arr2)
  87. }
  88. var finalRes = createTree(arr2,0,'id','parentId');
  89. return finalRes;
  90. }
  91. var data = [
  92. { id: 1, parentId: 0, name: '四川' },
  93. { id: 2, parentId: 0, name: '贵州' },
  94. { id: 3, parentId: 0, name: '云南' },
  95. { id: 4, parentId: 0, name: '江苏' },
  96.  
  97. { id: 5, parentId: 1, name: '成都' },
  98. { id: 6, parentId: 2, name: '贵州' },
  99. { id: 7, parentId: 3, name: '昆明' },
  100. { id: 8, parentId: 4, name: '苏州' },
  101.  
  102. { id: 9, parentId: 5, name: '成都县1' },
  103. { id: 10, parentId: 5, name: '成都县2' },
  104. { id: 11, parentId: 5, name: '成都县3' },
  105. { id: 12, parentId: 5, name: '成都县4' },
  106. { id: 13, parentId: 5, name: '成都县5' },
  107.  
  108. { id: 14, parentId: 6, name: '贵州县1' },
  109. { id: 15, parentId: 6, name: '贵州县2' },
  110. { id: 16, parentId: 6, name: '贵州县3' },
  111.  
  112. { id: 17, parentId: 7, name: '昆明县1' },
  113. { id: 18, parentId: 7, name: '昆明县2' },
  114. { id: 19, parentId: 7, name: '昆明县3' },
  115.  
  116. { id: 20, parentId: 8, name: '苏州县1' },
  117. { id: 21, parentId: 8, name: '苏州县2' },
  118. { id: 22, parentId: 8, name: '苏州县3' },
  119. { id: 23, parentId: 8, name: '苏州县4' },
  120.  
  121. { id: 24, parentId: 9, name: '成都镇1' },
  122. { id: 25, parentId: 10, name: '成都镇2' },
  123.  
  124. { id: 26, parentId: 24, name: '成都村11' },
  125. { id: 27, parentId: 24, name: '成都村12' },
  126. { id: 28, parentId: 24, name: '成都村13' }
  127. ];
  128. var re = main("成都镇",data);
  129. console.log(JSON.stringify(re,null,2));

  

  1. [
  2. {
  3. "id": 1,
  4. "parentId": 0,
  5. "name": "四川",
  6. "isHidden": false,
  7. "open": true,
  8. "children": [
  9. {
  10. "id": 5,
  11. "parentId": 1,
  12. "name": "成都",
  13. "isHidden": false,
  14. "open": true,
  15. "children": [
  16. {
  17. "id": 9,
  18. "parentId": 5,
  19. "name": "成都县1",
  20. "isHidden": false,
  21. "open": true,
  22. "children": [
  23. {
  24. "id": 24,
  25. "parentId": 9,
  26. "name": "成都镇1",
  27. "isHidden": false,
  28. "children": [
  29. {
  30. "id": 26,
  31. "parentId": 24,
  32. "name": "成都村11",
  33. "isHidden": true,
  34. "children": []
  35. },
  36. {
  37. "id": 27,
  38. "parentId": 24,
  39. "name": "成都村12",
  40. "isHidden": true,
  41. "children": []
  42. },
  43. {
  44. "id": 28,
  45. "parentId": 24,
  46. "name": "成都村13",
  47. "isHidden": true,
  48. "children": []
  49. }
  50. ]
  51. }
  52. ]
  53. },
  54. {
  55. "id": 10,
  56. "parentId": 5,
  57. "name": "成都县2",
  58. "isHidden": false,
  59. "open": true,
  60. "children": [
  61. {
  62. "id": 25,
  63. "parentId": 10,
  64. "name": "成都镇2",
  65. "isHidden": false,
  66. "children": []
  67. }
  68. ]
  69. }
  70. ]
  71. }
  72. ]
  73. }
  74. ]

js 生成树以及关键字搜索生成树的更多相关文章

  1. js 模拟百度关键字搜索与跳转

    测试效果: css样式: ul{ display:none; } html代码: <input type="text" id="text" /> & ...

  2. vue.js(11)--案例--关键字搜索列表

    关键字搜索品牌案例 (1)页面布局 <div class="app"> <div class="panel panel-primary"> ...

  3. js中this关键字测试集锦

    参考:阮一峰<javascript的this用法>及<JS中this关键字详解> this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在 ...

  4. XE3随笔18:实例 - 解析 Google 关键字搜索排名

    同上例类似, 通过 'http://clients1.google.cn/complete/search?&q=' + "关键字" 可以获取 Google 的关键字搜索排名 ...

  5. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  6. JS 中 this 关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...

  7. swift - 3D 视图,截图,关键字搜索

    1.xib 上的 3D效果 按钮 2. import UIKit //1.导入框架 import MapKit class ViewController: UIViewController { @IB ...

  8. JS中的关键字和保留字

    JavaScript中不能作为变量名的关键字和保留字总结: 1.js中的关键字: break case catch continue default delete do else finally fo ...

  9. js获取页面所有搜索条件

    <div class="search">        产品简码:@Html.TextBox("ProCode", "")    ...

随机推荐

  1. CentOS7 字体安装卸载

    CentOS7 默认安装有 Fonts 程序, 所以能直接双击打开字体文件, 并且可以直接点击上图的 Install 按钮安装字体.采用这种安装方法,字体会被安装在 ~/.local/share/fo ...

  2. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

  3. 双端队列 C. Vasya and String

    High school student Vasya got a string of length n as a birthday present. This string consists of le ...

  4. [NOI2014]购票——斜率优化+树链剖分+线段树

    建议到UOJ上去交 题解 一眼\(DP\),先把转移方程写出来 设\(dp[i]\)为从点\(i\)出发到点\(1\)的最小费用,那么存在转移 \[f[i]=min\{f[j]+(d[i]-d[j]) ...

  5. CF1009F Dominant Indices——长链剖分优化DP

    原题链接 \(EDU\)出一道长链剖分优化\(dp\)裸题? 简化版题意 问你每个点的子树中与它距离为多少的点的数量最多,如果有多解,最小化距离 思路 方法1. 用\(dsu\ on\ tree\)做 ...

  6. [Algorithm] Chunk Array

    // --- Directions// Given an array and chunk size, divide the array into many subarrays// where each ...

  7. parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。

    parent([expr]) 概述 取得一个包含着所有匹配元素的唯一父元素的元素集合.大理石构件 你可以使用可选的表达式来筛选. 参数 exprStringV1.0 用来筛选的表达式 示例 描述: 查 ...

  8. Cogs 746. [网络流24题] 骑士共存(最大独立集)

    [网络流24题] 骑士共存 ★★☆ 输入文件:knight.in 输出文件:knight.out 简单对比 时间限制:1 s 内存限制:128 MB 骑士共存问题 «问题描述: 在一个n*n个方格的国 ...

  9. Win10 下载 masmplus

    一.下载: masmplus链接: http://www.aogosoft.com/masmplus/

  10. Web安全(白帽子讲)之第一章

    安全问题的本质是信任的问题,并是一个持续的过程. 安全三要素 Confidentiality:机密性-----要求保护数据内容不能泄密 Integrity:完整性-----要求保护数据内容的完整,没有 ...