Js的无限分级树

最新推荐文章于 2021-01-13 19:26:02 发布
最新推荐文章于 2021-01-13 19:26:02 发布
阅读量222 收藏
点赞数
分类专栏： 常用算法 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangwt100/article/details/84040931
版权

本文为转载只为方便学习

<html>
<head>
</head>
<body>
<ul id=”side_menu”>
<li><a href=”#”>[-] 一级菜单</a>
<ul>
<li><a href=”#”>[-] 二级菜单</a>
<ul>
<li><a href=”#”>[-] 三级菜单</a></li>
<li><a href=”#”>[-] 三级菜单</a></li>
</ul>
</li>
<li><a href=”#”>[-] 二级菜单</a></li>
</ul>
</li>
</ul>
<body>
<script type=”text/javascript”>
/*=======================树状菜单开始=========================*/
//该树状菜单由catge原创,有任何疑问和BUG请联系QQ:965496 Blog:catge.blogbus.com
//该菜单支持无限级数,增加级数方法:三级时level赋值5,以后每增加一级level值增2
//该例CSS样式表已经定义到5级样式,
//套用该函数只需在树状菜单根节点上使用id=”side_menu”,列表需使用UL
/*==========================================================*/
var level = 5;
var n = level;


//判断该对象是否包含于side_menu中
function isInSideMenu(obj){
if(n){ n–;
if(obj.getAttribute&&obj.getAttribute(”id”)==”side_menu”){n = level;return true;}
if(obj.nodeType==9){n = level;return false;}//超过当前文档树结构时返回false
else{return isInSideMenu(obj.parentNode);}
}
n = level;
return false;
}
//菜单折叠效果函数
function foldMenu(){
if(this.nextSibling&&this.nextSibling.nextSibling){
if(this.nextSibling.nextSibling.style.display==”block”){
this.nextSibling.nextSibling.style.display =”none”;
this.innerHTML = this.innerHTML.replace(”-”,”+”);
}else{
this.nextSibling.nextSibling.style.display =”block”;
this.innerHTML = this.innerHTML.replace(”+”,”-”);
}
}else{
this.innerHTML = this.innerHTML.replace(”+”,”-”);
}
}
//初始化树状菜单
function intSideMenu(){
var as = document.getElementsByTagName(”a”);
var uls = document.getElementsByTagName(”ul”);
var sidemenuUL = document.getElementById(”side_menu”);
for(var i=0;i<as.length;i++){
if(isInSideMenu(as[i])){
as[i].οnclick= foldMenu;
as[i].innerHTML = as[i].innerHTML.replace(”-”,”+”);
}
}//给所有树状菜单内的a绑定foldMenu函数
for(var j=0;j<uls.length;j++){
if(isInSideMenu(uls[j]))uls[j].style.display =”none”;//初始化隐藏树状菜单
}
sidemenuUL.style.display = “block”;//显示根菜单
}


intSideMenu();
/*====================//树状菜单结束==========================*/
</script>
</html>

jiangwt100
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js无限级菜单树
11-14
javascript ,jquery就够了无需太麻烦的库,简洁美观,只需传入json对象，即可生成无限级菜单
js无限级分类源码,无限分类,树型菜单,分类,
08-10
无限分类,树型菜单,分类,无限级分类JS源码
javascript 无限分类
fareast_mzh的博客
08-04 257
* 根据php无限分类实现js版本的   /** * 根节点 parentid=0, 每个节点都有id, parentid字段 * @param items * @returns {*} */ function getTree(items) { "use strict"; var children = new Map(); items.forEach(f...
js无限分级 树_JS无限级树
weixin_35976993的博客
12-31 171
无限级树形菜单#A1 td { vertical-align: top; }#A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; }#A1 td.bj , #A1 td.kg { width: 24; }#A1 a:link , #A1 a: visited { color: #cc0080; text-...
JS当中的无限分类递归树
weixin_30655569的博客
08-26 278
列表转换成树形结构方法定义： //javascript 树形结构 function toTree(data) { // 删除 所有 children,以防止多次调用 data.forEach(function(item) { delete item.children; }); // 将数据存储为 以 id 为 ...
jstree创建无限分级树的方法【基于ajax动态创建子节点】
10-21
总的来说，创建jstree无限分级树的关键在于正确地设计数据库结构，编写能够动态获取子节点的服务器端代码，以及合理配置jstree的客户端选项。通过这种方式，你可以构建出一个响应式且可扩展的树形视图，用户可以根据...
JS写的一个无限分级树
08-01
"JS写的一个无限分级树"就是一个利用JavaScript实现的可以无限扩展层级的树结构组件。这种组件通常用于展示具有层级关系的数据，并提供交互功能，如展开/折叠节点、搜索、拖放等。 首先，我们需要理解树的基本概念...
jstree创建无限分级树的方法【基于ajax动态创建子节点】.docx
01-20
jstree 创建无限分级树的方法基于ajax动态创建子节点 jstree 是一个基于 JavaScript 的树形控件，可以用来创建复杂的树形结构。今天，我们将讨论如何使用 jstree 创建无限分级树，并基于 AJAX 动态创建子节点。 ...
js javascript 无限级菜单
07-05
无限级菜单允许用户在多个层次之间导航，这意味着菜单项可以有子菜单，这些子菜单也可以有它们自己的子菜单，以此类推，形成无限级别的结构。在HTML中，我们通常使用`<ul>`和`<li>`元素来创建这样的树形结构。 1. *...
js无限级分类递归
05-16
在原有的基础上进行二次修改，通过ajax请求，获取json数组，迭代json数组生成多层级的数据字典。当前例子中数据源为模拟的json数据。当然该方法是支持无限级父子关系。修改之前的源码均来自网上，本人只是对当前做了整合和修改。当前你所有的记录中需要包含id和parentId，也就是有父子关系即可。你的数据源必须是一维的json数组。zNodes=[ {id:1,pId:0,name:"AAA"}, {id:11,pId:1,name:"AAA1"}, {id:12,pId:1,name:"AAA2"}, {id:13,pId:1,name:"AAA3"}, {id:2,pId:0,name:"BBB"}, {id:21,pId:2,name:"BBB1"}, {id:22,pId:2,name:"BBB2"}, {id:23,pId:2,name:"BBB3"}, {id:3,pId:0,name:"CCC"}, {id:31,pId:3,name:"CCC1"}, {id:32,pId:3,name:"CCC2"}, {id:33,pId:3,name:"CCC3"}, {id:34,pId:31,name:"CCCCx"}, {id:35,pId:31,name:"CCCCy"}, {id:36,pId:31,name:"CCCCz"} ];
JS多级联动下拉列表(不限级数)
01-10
oselect.js 原生JS写的多级联动下拉列表，联动级数可以自定义，不限级数。可用作省、市、区联动，或其他的多级分类选择。使用方法请参考demo。
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
Android 多级部门树（支持无限级），支持部门级别多选
03-14
需要的同学，绝对物有所值，不会让同学们失望
jQuery多级折叠展开树形菜单代码
01-23
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件，数据封装在data.js里面，直接修改调用即可。
原生JS无限级树形菜单（兼容各浏览器）
01-10
原生JS写的无限级树形菜单(包含文件：otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
js无限分级 树_js版本的无限分类 树形数据 格式化(配合递归)
weixin_42342626的博客
01-13 115
function genTree(list) {var temptree = [], tree = [], items = [];for (var i in list) {if (!temptree[list[i].did]) {var trow = {id: ‘z‘ + list[i].did,did: list[i].did,fid: list[i].fid,text: list[i].tex...
jquery,tree无限级树形菜单+简单实用案例
fulerbakesi
06-01 228
jquery,tree无限级树形菜单+简单实用案例 我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来，方便以后调用。记录下来，希望给新手们提供帮助。要记得导入jquery.js tree.js 哦 &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;%@ taglib p...
无限树型菜单分类
最后一个NPE
04-08 435
有这么样一个需求：将以下二维记录转成一个树型菜单 很明显，结果将是森林。 那么这里提供一个通用算法，来实现菜单的转换。 首先，将所有记录读入： List<Department> departments = departmentMapper.selectAllDepartment(); 其次，使用一个哈希表，将各部门id与部门实例进行映射： Map<In...
通用树形类+无限级分类
weixin_33979363的博客
04-24 88
<?php // +--------------------------------------------------------------------------------------------------- // | Before finding the right people, the only need to do is to make yourself goo...
决策树训练橘子分级python
最新发布
06-12
要使用决策树对橘子进行分级，可以使用Python中的scikit-learn库。以下是实现的步骤： 1. 导入需要的库。 ``` import numpy as np import pandas as pd from sklearn.tree import DecisionTreeClassifier ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值