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", "") ...
随机推荐
- CentOS7 字体安装卸载
CentOS7 默认安装有 Fonts 程序, 所以能直接双击打开字体文件, 并且可以直接点击上图的 Install 按钮安装字体.采用这种安装方法,字体会被安装在 ~/.local/share/fo ...
- Graphic系统综合练习案例-绘制饼状图
这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...
- 双端队列 C. Vasya and String
High school student Vasya got a string of length n as a birthday present. This string consists of le ...
- [NOI2014]购票——斜率优化+树链剖分+线段树
建议到UOJ上去交 题解 一眼\(DP\),先把转移方程写出来 设\(dp[i]\)为从点\(i\)出发到点\(1\)的最小费用,那么存在转移 \[f[i]=min\{f[j]+(d[i]-d[j]) ...
- CF1009F Dominant Indices——长链剖分优化DP
原题链接 \(EDU\)出一道长链剖分优化\(dp\)裸题? 简化版题意 问你每个点的子树中与它距离为多少的点的数量最多,如果有多解,最小化距离 思路 方法1. 用\(dsu\ on\ tree\)做 ...
- [Algorithm] Chunk Array
// --- Directions// Given an array and chunk size, divide the array into many subarrays// where each ...
- parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parent([expr]) 概述 取得一个包含着所有匹配元素的唯一父元素的元素集合.大理石构件 你可以使用可选的表达式来筛选. 参数 exprStringV1.0 用来筛选的表达式 示例 描述: 查 ...
- Cogs 746. [网络流24题] 骑士共存(最大独立集)
[网络流24题] 骑士共存 ★★☆ 输入文件:knight.in 输出文件:knight.out 简单对比 时间限制:1 s 内存限制:128 MB 骑士共存问题 «问题描述: 在一个n*n个方格的国 ...
- Win10 下载 masmplus
一.下载: masmplus链接: http://www.aogosoft.com/masmplus/
- Web安全(白帽子讲)之第一章
安全问题的本质是信任的问题,并是一个持续的过程. 安全三要素 Confidentiality:机密性-----要求保护数据内容不能泄密 Integrity:完整性-----要求保护数据内容的完整,没有 ...