function main(keywords,data){
function fn(arr){
var flag = false;
for(var i = 0;i <arr.length;i++){
var item = arr[i];
if(item.children.length > 0){
var res = fn(item.children);
if(res){
item.isHidden = false;
if(!item.open){
item.open = true;
}
}
}
if(item.isHidden === false){
flag = true;
}
}
return flag;
} function deal(arr,arr1){
arr.map(function(item){
if(item.children.length > 0){
deal(item.children,arr1);
}
delete item.children;
arr1.push(item);
})
} function createTree (originArr, pid, indexId, parentId) {
var tree = [];
for (var i = 0; i < originArr.length; i++) {
var item = originArr[i];
if (item[parentId] == pid) {
item.children = createTree(originArr, item[indexId], indexId, parentId);
tree.push(item);
}
}
return tree;
}
//var keywords = '成都镇';
data.map(function(item,index){
keywords = keywords.trim();
if(keywords != ''){
if(item.name.indexOf(keywords) > -1){
item.isHidden = false;
} else {
item.isHidden = true;
}
}else{
item.isHidden = false;
}
});
var result = createTree(data,0,'id','parentId');
fn(result); var arr1 = [];
deal(result,arr1);
var arr2 = arr1.filter(function(item){
return item.isHidden == false
});
// console.log(arr2);
var idArrs = [];
var pidArrs = [];
var arr4 = [];
arr2.map(function(item){
if(idArrs.indexOf(item.id) < 0 ){
idArrs.push(item.id);
}
if(pidArrs.indexOf(item.parentId) < 0 ){
pidArrs.push(item.parentId);
}
});
// idArrs idArrs.map(function(item1){
if(pidArrs.indexOf(item1)<0 && arr4.indexOf(item1) < 0){
arr4.push(item1)
}
});
for (var i = 0; i < arr4.length; i++) {
var item = arr4[i];
var result1 = createTree(data,item,'id','parentId');
deal(result1,arr2)
}
var finalRes = createTree(arr2,0,'id','parentId');
return finalRes;
}
var data = [
{ id: 1, parentId: 0, name: '四川' },
{ id: 2, parentId: 0, name: '贵州' },
{ id: 3, parentId: 0, name: '云南' },
{ id: 4, parentId: 0, name: '江苏' }, { id: 5, parentId: 1, name: '成都' },
{ id: 6, parentId: 2, name: '贵州' },
{ id: 7, parentId: 3, name: '昆明' },
{ id: 8, parentId: 4, name: '苏州' }, { id: 9, parentId: 5, name: '成都县1' },
{ id: 10, parentId: 5, name: '成都县2' },
{ id: 11, parentId: 5, name: '成都县3' },
{ id: 12, parentId: 5, name: '成都县4' },
{ id: 13, parentId: 5, name: '成都县5' }, { id: 14, parentId: 6, name: '贵州县1' },
{ id: 15, parentId: 6, name: '贵州县2' },
{ id: 16, parentId: 6, name: '贵州县3' }, { id: 17, parentId: 7, name: '昆明县1' },
{ id: 18, parentId: 7, name: '昆明县2' },
{ id: 19, parentId: 7, name: '昆明县3' }, { id: 20, parentId: 8, name: '苏州县1' },
{ id: 21, parentId: 8, name: '苏州县2' },
{ id: 22, parentId: 8, name: '苏州县3' },
{ id: 23, parentId: 8, name: '苏州县4' }, { id: 24, parentId: 9, name: '成都镇1' },
{ id: 25, parentId: 10, name: '成都镇2' }, { id: 26, parentId: 24, name: '成都村11' },
{ id: 27, parentId: 24, name: '成都村12' },
{ id: 28, parentId: 24, name: '成都村13' }
];
var re = main("成都镇",data);
console.log(JSON.stringify(re,null,2));

  

[
{
"id": 1,
"parentId": 0,
"name": "四川",
"isHidden": false,
"open": true,
"children": [
{
"id": 5,
"parentId": 1,
"name": "成都",
"isHidden": false,
"open": true,
"children": [
{
"id": 9,
"parentId": 5,
"name": "成都县1",
"isHidden": false,
"open": true,
"children": [
{
"id": 24,
"parentId": 9,
"name": "成都镇1",
"isHidden": false,
"children": [
{
"id": 26,
"parentId": 24,
"name": "成都村11",
"isHidden": true,
"children": []
},
{
"id": 27,
"parentId": 24,
"name": "成都村12",
"isHidden": true,
"children": []
},
{
"id": 28,
"parentId": 24,
"name": "成都村13",
"isHidden": true,
"children": []
}
]
}
]
},
{
"id": 10,
"parentId": 5,
"name": "成都县2",
"isHidden": false,
"open": true,
"children": [
{
"id": 25,
"parentId": 10,
"name": "成都镇2",
"isHidden": false,
"children": []
}
]
}
]
}
]
}
]

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. Django_02_创建模型

    一:ORM简介 ORM,全拼Object-Relation Mapping,中文意为对象-关系映射,是随着面向对象的软件开发方法发展而产生的. 面向对象的开发方法是当今企业级应用开发环境中的主流开发方 ...

  2. Django 外键、多对多插入数据方法

    models.py class UserInfo(models.Model): username = models.CharField(max_length=64,db_column='usernam ...

  3. 算法笔记--CDQ分治 && 整体二分

    参考:https://www.luogu.org/blog/Owencodeisking/post-xue-xi-bi-ji-cdq-fen-zhi-hu-zheng-ti-er-fen 前置技能:树 ...

  4. wkhtmltopdf 自定义字体未生效或中文乱码

    使用wkhtmltopdf控件将网页保存成pdf的过程中出现网页中有些字体,在PDF中未生效.通过网上查询结果有一种处理方式: 在网页头部的style标签中,手工指定宋体字体的本地存放位置,wkhtm ...

  5. c#使用 NServiceKit.Redis 封装 RedisHelper

    在说StackExchange.Redis 的时候说了,因为我们的项目一直.net4.0不升级,没有办法,我说的不算,哈哈,又查了StackExchange.Redis在.net4.0使用麻烦,所以选 ...

  6. diff:二进制文件内容差异比较

    在Ubuntu 18.04下验证,造冰箱的大熊猫@cnblogs 2019/7/29 假设我们需要以二进制格式比较两个文件file1.bin和file2.bin的差异,一个简单的方法是 1)先使用xx ...

  7. Spring Boot系列目录

    1.spring mvc 接口动态注入 FactoryBean ImportBeanDefinitionRegistrar ClassPathScanningCandidateComponentPro ...

  8. 【luoguP1955 】[NOI2015]程序自动分析--普通并查集

    题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变 ...

  9. jQuery系列(四):jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  10. 用Python爬虫爬取“女神吧”上的照片。

    爬取的网页链接为https://tieba.baidu.com/p/5177270774 是一个美女警花哦! 所用Python环境为:python 3.3.2   用到的库为:urllib.reque ...