纯JS实现无限极分类

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
    //引入Jquery
  5.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
  6.     <style type="text/css">
  7.         .one{
  8.             background: red;
  9.  
  10.         }
  11.  
  12.         .two{
  13.             background-color: green;
  14.             margin-left: 30px;
  15.         }
  16.  
  17.         .three{
  18.             background-color: yellow;
  19.             margin-left: 60px;
  20.         }
  21.  
  22.         li{
  23.             list-style: none;
  24.             border: 1px red solid;
  25.             margin-top:10px;
  26.             width: 200px;
  27.         }
  28.  
  29.     </style>
  30. </head>
  31. <body>
  32.  
  33.     <div id="add">
  34.  
  35.         <!-- <li class="one">上衣</li>
  36.         <li class="two">男装</li>
  37.         <li class="three">男西装</li> -->
  38.  
  39.     </div>
  40.  
  41. </body>
  42. <script type="text/javascript">
    //首先定义一个数组，分类是按照父级分类pid来判断的
  43.     var arr=[
  44.     {id:1,name:"上衣",pid:0},
  45.     {id:2,name:"裤子",pid:0},
  46.     {id:3,name:"鞋子",pid:0},
  47.     {id:9,name:"电子",pid:0},
  48.     {id:4,name:"男装",pid:1},
  49.     {id:5,name:"男皮衣",pid:4},
  50.     {id:6,name:"男西装",pid:4},
  51.  
  52.     {id:7,name:"休闲裤",pid:2},
  53.  
  54.     {id:8,name:"手机",pid:9},
  55.  
  56.     ]

  57. //用的是3层foreach循环
  58.  
  59. arr.forEach(function(value, index, array) {
  60.   // console.log(value.name+"-----"+index+"----"+array);
  61.   if (value.pid==0) {
  62.       // console.log(value.name);
    　　　　//如果是顶级分类的话，就用class=one的li标签
  63.       var one="<li class='one'>"+value.name+"</li>";
  64.       $("#add").append(one);
  65.  
  66.           arr.forEach(function(value1,index1){
  67.  
  68.                       if(value1.pid==value.id){
    　　　　　　　　　　　　//如果是二级分类,就用class=two 的li标签
  69.                                   var two="<li class='two'>"+value1.name+"</li>";
  70.                               $("#add").append(two);
  71.                           arr.forEach(function(value2,index2){
  72.  
  73.                               if(value2.pid==value1.id){
    　　　　　　　　　　　　//如果是三级分类,就用class=three的li标签
  74.                                       var three="<li class='three'>"+value2.name+"</li>";
  75.                               $("#add").append(three);
  76.  
  77.                               }
  78.                           })
  79.  
  80.                       }
  81.  
  82.           })
  83.   }
  84. });
  85.  
  86. </script>
  87. </html>

无限极分类的JS实现的更多相关文章

  1. js实现无限极分类

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来 ...

  2. thinkphp5.0无限极分类及格式化输出

    首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的p ...

  3. sqlalchemy tree 树形分类 无限极分类的管理。预排序树，左右值树。sqlalchemy-mptt

    简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...

  4. PHP 商城无限极分类

    无限极分类,用的是递归,在外部调用fen()方法即可 index是刚开始寻找的顶级分类,suo是为了在前端展示的时候缩进 ,$suo=){ 一个数组用来返回的 $t=[]; 这是查询数据库的所有内容 ...

  5. php无限极分类以及递归(thinkphp)

    php无限极分类: 无限极分类重点在于表的设计: 1在model中: class CatModel extends Model{ protected $cat = array(); public fu ...

  6. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现之方法二：加入缓存机制

    在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Cachi ...

  7. PHP无限极分类

      当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...

  8. PHP无限极分类，多种方法|很简单，这里说的很详细，其它地方说的很不好懂

    当你学习php无限极分类的时候,大家都觉得一个字"难"我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究.   到网上一搜php无限极分类,很多,但好多都是一 ...

  9. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现

    今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了: 首先创建节点类(我给它取名:AdminUserTree): /// & ...

随机推荐

  1. 21天学通C++_Day1

    被阿里实习生的第一轮电话面试刷掉以后,幡然醒悟,发现以前学习的C++基础一点都不扎实.为了把基础打扎实,重新学习一遍:为了让自己不放弃,也顺便可以把当天学到的东西记录下来,开始了写博客. 学习书籍:& ...

  2. Dreamweaver_CS6安装与破解

    Adobe Dreamweaver是一款非常好用的web前端设计工具,这里详细讲解CS6版本的安装及破解步骤.经过测试,CS5版本也可以使用本经验中共享的破解补丁进行破解. 工具/原料 Dreamwe ...

  3. SSH项目配置数据源的方法（jndi）

    1.在tomcat6.0/conf/context.xml加入以下代码 [xhtml] view plain copy     <Resource name="jdbc/oracleD ...

  4. 中 varStatus的属性简介

    varStatus是<c:forEach>jstl循环标签的一个属性,varStatus属性.就拿varStatus="status"来说,事实上定义了一个status ...

  5. Robot Framework接口测试（4）

    现在我们已经做好了进行接口测试的必要准备:1.拼接发送的报文:2.发送报文的方法.现在我们实现RF上的接口测试. 我们先对发送的方法进行一下封装: 1.拼接报文方法: #coding : utf-8 ...

  6. UIActivityViewController

    //UIImage *imageToShare = [UIImage imageNamed:@"iosshare.jpg"]; //NSURL *urlToShare = [NSU ...

  7. 洛谷 P1292 倒酒

    题目描述 Winy是一家酒吧的老板,他的酒吧提供两种体积的啤酒,a ml和b ml,分别使用容积为a ml和b ml的酒杯来装载. 酒吧的生意并不好.Winy发现酒鬼们都非常穷.有时,他们会因为负担不 ...

  8. sublime text3 中设置默认浏览器,并且设置快捷键

    1.打开packageControl   对应快捷键  command + shift + p 2.输入install package 3.安装插件 SideBarEnhancements 4.安装了 ...

  9. assembly 需要 unload 和 update 的时候怎么办?

    我正在开发公司的业务组件平台,组件池的灵活性要求很高,业务组件都是可以立即更新和及时装配的;目前完成这些功能,有待测试.用appDomain.unload 拆卸assembly 可以,只是用起来比较麻 ...

  10. PHP Tools for VS2017 key/破解 [搬运]

    看看结果 搬运地址 :  (自己敲吧...) 这里面破解的只有一年 时间可以在文中提供的 ------------------------------------------------------- ...