<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleTree</title>
<style type="text/css">
.leaf{
list-style-image:url(treeimgs/st_node.gif);
list-style-position:outside;
}
.nodeclose{
list-style-image:url(treeimgs/st_icon.png);
list-style-position:outside;
background:url(treeimgs/st_folder.gif);
background-repeat:no-repeat;
padding:0px 20px;
}
.nodeopen{
list-style-image:url(treeimgs/st_icon_open.png);
list-style-position:outside;
background:url(treeimgs/st_folder_open.gif);
background-repeat:no-repeat;
padding:0px 20px;
}
li a{ text-decoration:none;}
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
jQuery.fn.extend({
SimpleTree:function( isOpen,options){
var option = $.extend( options );
option.tree = this;
initLeafStyle();
showTree(isOpen);
addBrandEvent();
addLeafEvent();
return this ;
// 树枝 添加事件
function addBrandEvent(){
var branches = $('ul').prev('li');
$.each(branches,function(){
$(this).click(function(){
dealBranch(this);
});
})
}
//树叶添加事件
function addLeafEvent(){
var lis = $('div[class="st_tree"]').find('li');
$.each(lis ,function(){
if( $(this).next('ul').length==0 ){
$(this).click(function(){
if($(this).find('a').attr("href")){
//alert($(this).find('a').attr("href")) ;
window.location.href=$(this).find('a').attr("href");
}
});
};
});
}
// li 为branch ,如果树枝展开就关闭 如果关闭就展开
function dealBranch( branch ){
if($(branch).hasClass('nodeclose') ){
$(branch).removeClass();
$(branch).addClass('nodeopen');
$(branch).next('ul').show();
}else{
$(branch).removeClass();
$(branch).addClass('nodeclose');
$(branch).next('ul').hide();
}
}
//展示 整个树
function showTree(isOpen){
if(!isOpen || isOpen=='') isOpen='open';
if(isOpen=='open' ){
//起始状态展开
openAllTree();
}else{
//起始状态 关闭
closeAllTree();
}
}
//收起整个树
function closeAllTree(){
$('ul').prev('li').addClass('nodeclose');
closeAllTreeAction();
}
function closeAllTreeAction(){
var branches = $('li').siblings('ul');
$.each(branches,function(){
$(this).hide();
})
}
//展开整个树
function openAllTree(){
openAllTreeAction();
//更换分支节点的样式
$('ul').prev('li').addClass('nodeopen');
}
//叶子节点初始化
function initLeafStyle(){
var lis = $('div[class="st_tree"]').find('li');
$.each(lis ,function(){
if( $(this).next('ul').length==0 ){
$(this).addClass('leaf');
};
});
}
// 更换 叶子节点的样式
function openAllTreeAction(){
var branches = $('li').siblings('ul');
$.each(branches,function(){
$(this).show();
})
}
}
});
});
$(function(){
var tree = $('.st_tree').SimpleTree( );
function closeTree( ){
tree.closeAllTree();
}
})
</script>
</head>
<body>
<button onclick="closeTree()">折叠树</button>
<div class="st_tree">
<ul>
<li><a href="#" ref="hyjm">欢迎界面</a></li>
<li><a href="#" ref="xtgl">系统管理</a></li>
<ul show="true">
<li><a href="#" ref="yhgl">用户管理</a></li>
<li><a href="#" ref="rzck">日志查看</a></li>
</ul>
<li><a href="#" ref="ckgl">仓库管理</a></li>
<ul>
<li><a href="#" ref="kcgl">库存管理</a></li>
<li><a href="#" ref="shgl">收货管理</a></li>
<li><a href="#" ref="fhgl">发货管理</a></li>
<ul>
<li><a href="#" ref="yhgl">用户管理</a></li>
<li><a href="#" ref="rzck">日志查看</a></li>
<li><a href="http://www.baidu.com" ref="rzck">百度</a></li>
</ul>
</ul>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
"VUE自定义树形结构组件.zip"这个压缩包包含了一个实现这一功能的示例项目。让我们深入探讨其中涉及的关键知识点。 1. **Vue.js**: Vue.js是一个轻量级的前端JavaScript框架，它允许开发者通过声明式的方式构建用户...
在IT领域，自定义树形结构控件是一种常见的需求，特别是在UI设计和数据展示中。树形控件能够以层次化的形式展现数据，方便用户进行导航和操作。本篇文章将详细探讨如何创建一个自定义的任意层级树形控件，重点讲解...
本文将详述“自定义树形列表控件”的设计与实现，以及涉及到的相关技术点。 首先，我们要理解树形控件（TreeView）和列表控件（ListView）的基本概念。树形控件通常用于展示层次结构数据，它由节点组成，节点可以有...
"牛的控件 自定义树形多级目录表单TREEVIEW TREEVIEW菜单栏自定义级别导航 自定义菜单栏 源代码"这个标题及描述提到了几个关键知识点，主要涉及到Windows应用程序开发，尤其是使用如.NET Framework或WinForms、WPF等...
在小程序开发中，自定义树结构组件是一项重要的技术任务，它能够帮助用户以直观的方式浏览和操作层级化信息。以下将详细阐述小程序中自定义树结构组件的相关知识点。 一、树结构基础 树结构由节点（Node）和边...
`可自定义树节点的Tree组件`是一个专为满足这种需求而设计的功能强大的工具。它允许开发者根据具体项目的需求来定制树形结构的节点展示，提升用户体验并优化数据管理。在本文中，我们将深入探讨这个组件的工作原理、...
本篇文章将深入探讨如何在Flex环境中自定义实现一个具备展开、收缩功能的多级目录树形结构。 首先，让我们理解`Flex`布局。Flex布局，全称为Flexible Box，是一种用于容器中元素的布局模型，旨在提供更好的灵活性，...
"CTreeData自定义树控件"就是一个这样的实例，它允许开发者根据特定需求定制Windows应用程序中的树形视图。树控件通常用于显示层级结构的数据，如文件系统、组织架构或者项目任务等。下面我们将详细探讨这个自定义树...
JavaScript自定义树形工具是一种在Web开发中常用于组织和展示层次结构数据的组件。它以其灵活、可扩展和交互性强的特点，广泛应用于文件系统、组织结构、菜单导航等场景。这款工具允许开发者根据需求自定义其样式、...
在本文中，我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库，常用于构建富客户端应用程序，它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...
自定义树形结构组件—TreeView TreeView控件用来显示信息的分级视图，如同Windows里的资源管理器的目录。TreeView控件中的各项信息都有一个与之相关的Node对象。TreeView显示Node对象的分层目录结构，每个Node对象...
在Android开发中，构建自定义树形结构是一种常见的需求，特别是在展示层级关系或者导航菜单时。本示例“自定义树结构.zip”提供了一个详细实现多级树以及全选和反选功能的案例，名为“树结构-CustomTreeViewDemo”。...
本教程将重点讲解如何制作透明按钮以及自定义树形控件（CTreeCtrl）的控件前面的符号，用三角箭头替换传统的“+”和“-”按钮。我们将使用CButtonST控件来实现透明按钮，并自定义CTreeCtrl的行为。 首先，让我们...
基于Vue自定义树形tableCard是一项常见的任务，尤其在数据展示和管理时。在这个项目中，我们可能需要实现一个可扩展、交互性强的表格组件，它能够展示层级结构的数据，并且允许用户进行筛选、排序和操作。 首先，...
【标题】：“自定义树Tree” 在IT领域，"自定义树Tree"通常是指在软件开发中，根据特定需求创建的、具有个性化功能的树形数据结构。这种数据结构模仿了自然界中的树，由节点（或称为顶点）和边组成，其中每个节点...
创建自定义树组件，我们需要继承Ext.tree.Panel类，并覆盖或扩展其默认配置和方法。 2. **模型（Model）与存储（Store）**：树数据通常存储在EXT的数据存储组件（如Ext.data.TreeStore）中，它负责管理数据的加载、...
自定义树形容器
**zTree 3.5 Radio/Checkbox 自定义树形组件详解** zTree 是一款基于 jQuery 的强大树形插件，广泛应用于网页中的数据展示、菜单导航等场景。在 zTree 3.5 版本中，它提供了丰富的功能，包括单选（Radio）和复选...
3. **自定义树形控件**： - **QTreeWidget和QTreeWidgetItem**：Qt提供的标准树形控件，可以用来展示分层结构的数据，如QQ的好友列表。 - **自定义QAbstractItemModel**：如果你需要更灵活的控制树形数据结构，...
自定义树形组件通常包括以下几个步骤： 1. **创建数据模型**：首先，定义一个数据模型来存储树形结构的数据。每个节点包含其文本、是否展开、子节点列表等属性。例如，可以创建一个名为`TreeNode`的QML类型，包含`...