<!--不支持IE-->
<html>
<head><title>tree</title></head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tree_ul').find('label').click(function(){
$(this).siblings('ul').toggle();
});
$('#sel_all_cb').click(function(){
$('input[name="resourceIds"]').prop('checked',this.checked);
});
$('input[name="resourceIds"]').click(function(){
$(this).siblings('ul').find('input').prop('checked',this.checked);
if(this.checked){
$(this).parents('li').children('input').prop('checked',this.checked);
//当前选中的菜单，未选中
}else{
var temp = $(this);
var count = 1;
//有上级就循环
while(temp.parent().parent().parent().is('li')){
//看看兄弟菜单是不是都没选中，如果都没选中，那么父菜单也要设置未选中
var flag = true;
temp.parent().siblings('li').children('input').each(function(i){
if(this.checked){flag = false;}
});
temp = temp.parent().parent().prev();
if(flag){
temp.removeProp('checked');
}else{
break;
}
}
}
});
});
</script>
<body>
全选<input type="checkbox" id="sel_all_cb" value="">
<ul id="tree_ul">
<li>
<label>系统管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li>
<label>用户管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
<li>
<label>角色管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
<li>
<label>资源管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
</ul>
</li>
<li>
<label>电子商务</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>产品管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
<li><label>交易管理</label><input type="checkbox" name="resourceIds" value="">
</li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
然后，我们需要编写JavaScript代码来实现目录树的交互功能。jQuery提供了`click`事件处理程序，当用户点击节点时触发。我们可以为每个可折叠的节点添加一个点击事件，当点击时，检查该节点是否有子节点，并根据当前...
**jstree：jQuery的强力目录树插件** 在网页开发中，为了更好地展示层级结构的数据，目录树组件是不可或缺的工具。jstree是一款基于jQuery的开源插件，它提供了一种简单、灵活的方式来创建交互式的目录树结构。这款...
file-explore插件依赖于jQuery，利用其强大的功能来构建和操作DOM元素，实现目录树的动态渲染和交互。 2. **目录树结构**：file-explore采用HTML的无序列表（`<ul>`和`<li>`）来表示目录树的层级结构。每个`<li>`...
在这个项目中，"JQuery实现的树形菜单，类似邮箱功能树"是一个利用JQuery创建的互动式树状导航菜单，其设计灵感来源于常见的邮箱应用中的目录结构。 树形菜单是一种层次化的展示方式，常用于文件管理器、网站导航和...
本示例代码“jquery动态生成树”是关于如何利用jQuery和相关技术，如Struts2、treeview插件及JSON数据格式，来动态地在网页上构建一个可交互的目录树结构。 首先，让我们详细了解一下每个组件的作用： 1. **jQuery...
2. HTML渲染：将数据结构转换为可视化的HTML元素是实现目录树的下一步。可以使用`<ul>`和`<li>`标签来创建树形结构，其中每个`<li>`代表一个节点，根据是否有子节点决定是否包含展开/折叠的图标以及内嵌的`<ul>`。 ...
目录数管理功能 1、对目录树实现 增，删，改，查 功能 ...2、实现目录树的展示（采用Jquery + ajax 可以参考开源代码，但不能直接使用开源代码，须要自己实现） 3、树形目录用ajax实现异步加载，不限级别。
**jQuery 实现无限极树表格菜单详解** 在网页开发中，树形结构的展示经常用于组织和层次化数据，如目录、组织架构或层级关系的数据。jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的功能来简化网页交互。...
利用jQuery实现树形菜单，能够使开发者更高效地创建交互式的菜单系统。 首先，我们需要了解jQuery的基本概念。jQuery通过选择器选取HTML元素，然后应用方法来改变这些元素的属性或内容。例如，`$("ul li")`会选择...
通过以上步骤，我们便能成功地使用jQuery zTree插件快速实现一个具有动态数据加载、编辑功能的目录树。在实际应用中，还可以根据需求进一步定制zTree的功能，例如节点的展开收起、异步加载数据、节点拖拽等。同时，...
本资源"jquery实现无限级树形菜单特效源码.zip"显然是一个利用jQuery来构建无限级树形菜单的示例代码。这种效果常用于网站导航、数据层次展示以及文件目录结构等场景。 首先，我们来看jQuery如何处理树形菜单的基本...
本篇文章将深入探讨如何使用jQuery实现树形目录，特别是基于jQuery UI库中的`treeview`插件。 ### 1. jQuery简介 jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。它的API设计...
jQuery 文件树（jQuery.fileTree）是一款基于 jQuery JavaScript 库的插件，用于在网页中以树形结构展示文件和目录。这款插件以其简洁、高效和易于定制的特点，深受开发者喜爱，尤其适用于需要用户交互式浏览和选择...
jQuery实现的树形目录实例主要利用了jQuery库中的DOM操作和事件处理功能来构建一个交互式的网页导航菜单。以下是对这个实例的知识点详细解读： 1. jQuery基础：实例中使用了jQuery库，jQuery是一个快速、小巧、功能...
JavaScript（JS）作为一种广泛使用的客户端脚本语言，提供了多种库和插件来实现交互式的目录树视图。本文将详细介绍几种常见的JS目录树插件及其特点。 1. **jQuery Tree** jQuery Tree是一款基于jQuery的目录树...
在实现的时候也会有很多的方法，例如可以用extjs，jquery treeview等一些js开发包。 但是在开发的时候我种想找个例子来参考下，发现有很多这样的例子，包括extjs和jquery treeview的官方也有，但结合java后台实现的...
实现js动态目录树通常需要以下技术： 1. **HTML结构**：首先，需要创建一个基础的HTML结构来承载目录树的节点。这些节点通常表现为`<ul>`和`<li>`元素，其中`<li>`代表每个目录或文件，`<ul>`则表示子目录。 2. **...
本文将深入探讨如何利用jQuery实现动态加载树这一功能。 首先，我们需要理解"动态加载树"的概念。在网页设计中，树形结构通常用于表示层次关系的数据，如目录结构、组织架构等。动态加载树是指当用户滚动或点击时，...
本文将深入探讨“jQuery树形展示服务端目录结构树组件”，这是一个利用jQuery实现的功能，用于在前端展示服务器的目录结构，使得用户可以直观地浏览和操作文件系统。 首先，我们要了解的核心知识点是jQuery ...