最简单的无线分类,无限树形菜单解决方案

    JS版本

  整体思路就是:不管多少层级,每层都需要添加子类进去,写个递归函数寻找子类即可

    var data = [
                {"txt":"成都",
                 "key":"成都",
                 "val":"",
                 "parentKey":"四川",
                 "index":1,

                },

                {"txt":"雅安",
                 "key":"雅安",
                  "val":"",
                  "parentKey":"四川",
                  "index":1,

                },
                {"txt":"四川",
                 "key":"四川",
                 "val":"",
                 "parentKey":"",
                  "index":0,

                 },

                 {"txt":"崇州",
                     "key":"崇州",
                     "val":"",
                     "parentKey":"成都",
                      "index":1,

                     },

                ];

    function addChildNode(pk){
      for (var x in data){
             if(data[x].parentKey==pk){
                 addChildNode(data[x].key);
                 console.log("我是"+data[x].parentKey+"的:"+data[x].txt);
             }
        }
    }

    $.each(data,function(name,value) {
        if(value.index==0){
            //console.log(value);
            addChildNode(value.key);
        }

    });
    

原文地址:https://www.cnblogs.com/cfas/p/8494405.html

时间: 2024-10-12 00:44:42

最简单的无线分类,无限树形菜单解决方案的相关文章

树形菜单解决方案推荐

zTree 介绍 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web显示.权限管理等等. zTree 是开源免费的软件(MIT 许可证).在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大. zTree 的特点 ● zTree v3.0 将核心代码按照功能进行了分割,不需要

WEB开发中前后台树形菜单的展示设计

在WEB开发中经常需要进行树形菜单的展示,本例通过不同角度的总结了如下三种实现方式: 通过JS的递归实现前端菜单DOM的动态创建 通过JSP的include指令结合JSTL表达式语言递归实现菜单的展示 通过扩展JSP的标签在后端实现菜单的DOM节点并响应给前端展示 针对第一种方法,可以采用JS的相关组件,或者使用JS的递归调用将服务端相应的数据组装成DOM节点内容,动态添加到菜单的Container中,网上的例子较多,在此不再赘述,本例就后两种方案进行讲解. 通过JSP的include指令结合J

jquery,tree无限级树形菜单+简单实用案例

jquery,tree无限级树形菜单+简单实用案例 我在项目中用到产品类别的树形.各种地方都要用. 我就封装起来,方便以后调用. 记录下来,希望给新手们提供帮助.要记得导入jquery.js  tree.js 哦 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri=&quo

一个基于jQuery的简单树形菜单

在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够展开或关闭节点.另外,它还必需要求浏览器在兼容模式下才能正常使用(这个项目中使用的 easyUI 是 1.2.2 版本,新版的 Tree 不存在该问题),很是不方便. 想修改又无从下手,所以有单独写一个简单的树形菜单的想法,趁下班的时间,抽空写了一个简单的J

EasyUI+zTree实现简单的树形菜单切换

使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--导入eas

jsTree树形菜单分类

这里我演示的jsTree是基于ABP框架 ,展示部分代码,话不多说首先看效果如: 1:引入JS <link href="/jstree/themes/default/style.css" rel="stylesheet" /> <script src="/jstree/jstree.js"></script> 2:页面部分代码 1 <div class="row"> 2 <

简单实用的二级树形菜单hovertree

原创,欢迎评论推荐. hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://keleyi.com/jq/hovertree/hovertreegreen.htm 可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther). isCloseOther的值为false 或者 true,设为true即成为手风琴菜单. 使

[JavaScritp]构建简单的json树形菜单

json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func:function(){ alert('what do you want to do?'); } },{ tit:"二级菜单", func:function(){ alert('do what?'); }, submenu:[{ tit:"三级菜单", url:"

实用的树形菜单控件tree

 jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree jsTree是一个基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖\放节点操作.可以自己自定义创建,删除,嵌套,重命名,选择节点的规则.在这些操作上可以添加多种监听事件.  jstree  jQuery UI Widgets  FileTreePanel F