js 生成树以及关键字搜索生成树
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 生成树以及关键字搜索生成树的更多相关文章
- js 模拟百度关键字搜索与跳转
测试效果: css样式: ul{ display:none; } html代码: <input type="text" id="text" /> & ...
- vue.js(11)--案例--关键字搜索列表
关键字搜索品牌案例 (1)页面布局 <div class="app"> <div class="panel panel-primary"> ...
- js中this关键字测试集锦
参考:阮一峰<javascript的this用法>及<JS中this关键字详解> this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在 ...
- XE3随笔18:实例 - 解析 Google 关键字搜索排名
同上例类似, 通过 'http://clients1.google.cn/complete/search?&q=' + "关键字" 可以获取 Google 的关键字搜索排名 ...
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- JS 中 this 关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...
- swift - 3D 视图,截图,关键字搜索
1.xib 上的 3D效果 按钮 2. import UIKit //1.导入框架 import MapKit class ViewController: UIViewController { @IB ...
- JS中的关键字和保留字
JavaScript中不能作为变量名的关键字和保留字总结: 1.js中的关键字: break case catch continue default delete do else finally fo ...
- js获取页面所有搜索条件
<div class="search"> 产品简码:@Html.TextBox("ProCode", "") ...
随机推荐
- Linux磁盘及文件系统管理1
RHCSA认证中的东西: Linux系统管理包括的内容有: 磁盘分区及文件系统管理 RAID LVM 网络属性管理 程序包管理 sed and awk 进程查看和管理 内核管理(编译和安装) 系统启动 ...
- PAT Basic 1085 PAT单位排行 (25 分)
每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜.本题就请你实现这个功能. 输入格式: 输入第一行给出一个正整数 N(≤),即考生人数.随后 N 行,每行按下列格式给出一个考生的信息: 准 ...
- Java 扫描微信公众号二维码,关注并自动登录网站
https://blog.csdn.net/qq_42851002/article/details/81327770 场景:用户扫描微信公众号的二维码,关注后自动登录网站,若已关注则直接登录. 逻辑: ...
- (四)关于java.lang.IllegalMonitorStateException异常说明
1.异常原因及解释 首先你要了解这个异常为什么会抛出,这个异常会在三种情况下抛出:1>当前线程不含有当前对象的锁资源的时候,调用obj.wait()方法;2>当前线程不含有当前对象的锁资源 ...
- hive优化实战
2019年1月8日,付哥给了我一份公司以前的一份SQL优化方案文档.十分感谢.记录了许多在公司以前优化的案例. -------------------------------------------- ...
- 05 django组件:contenttype
1.django组件:contenttype 组件的作用:可以通过两个字段让表和N张表创建FK关系 1.专题课,学位课 如何关联 过期时间?? 方法1:分别创建 专题课--过期时间表 .学位课--过期 ...
- 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
在微信小程序开发中,当在CSS中使用背景图片格式为png时就会出现: 只要把png格式改掉就可以或者在<image/>标签里面写,我实测用JPG格式和把图片转成base64是没问题的.
- (九)文档和视图,Invalidate,数据库编程
一.文档视图结构 文档类(CDocument):存储加载(读写)数据视图类(CView):显示和修改数据 1)单文档 a)文档模板:把框架窗口.文档.视图关联在一起b)文档类(CDocument): ...
- HDU 1512 Monkey King(左偏堆)
爱争吵的猴子 ★★☆ 输入文件:monkeyk.in 输出文件:monkeyk.out 简单对比 时间限制:1 s 内存限制:128 MB [问题描述] 在一个森林里,住着N只好斗的猴子.开始,他们各 ...
- CodeForces 754C Vladik and chat ——(xjbg)
虽然是xjbg的题目,但是并不很好做. 题意不难理解.读入有点麻烦.做法是先正着推每段对话的?可能是谁说的,然后反过来选择即可.正推时,其中vis数组表示谁已经被用过了,cnt表示该组当前可以选择几个 ...