<!--不支持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>
分享到：
相关推荐
目录数管理功能 1、对目录树实现 增，删，改，查 功能 ...2、实现目录树的展示（采用Jquery + ajax 可以参考开源代码，但不能直接使用开源代码，须要自己实现） 3、树形目录用ajax实现异步加载，不限级别。
主要介绍了jquery实现的树形目录,涉及jquery针对页面元素及鼠标事件的相关操作技巧,需要的朋友可以参考下
在实现的时候也会有很多的方法，例如可以用extjs，jquery treeview等一些js开发包。 但是在开发的时候我种想找个例子来参考下，发现有很多这样的例子，包括extjs和jquery treeview的官方也有，但结合java后台实现的...
主要为大家详细介绍了jQuery zTree插件快速实现目录树，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
内容索引:脚本资源,jQuery,树形菜单,目录树 这是一个自写的jQuery Tree目录树，支持无限级分类，异步加载数据，通过这个小程序可以了解一下jQuery动态加载数据的技巧，目录树菜单效果如上图示。
本文主要分享了jQuery实现文档树效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
主要介绍了jQuery仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本
本文实例讲述了JQuery实现简单的复选框树形结构图。分享给大家供大家参考，具体如下： 这是自己写的简单树形结构图，实现的功能有： 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的...
数据表-树表 它将与结合在一起，然后实现了具有DataTables和jQuery树形表功能的Tree显示。
2.左侧目录树同时包括本地的所有驱动器 3.显示某段时间内的访问最频繁的目录（即动态的快捷方式） 4.对文件的属性进行手工编辑（对文件添加注释，例如“已经阅读”、“需要定时处理”、“需要定期备份”等） 5.对...
经过努力 最终 实现了 树形目录，当然不能和 JQuery zTree 的功能想比 但是最少我认为从性能和实用性上已完全够用了 通过 Ajax 的 JSON 方法 实现 新增 修改 删除 最后发个小广告 本人承接各种 ERP 网站 以及各种...
利用递归实现无限极目录展示，可点击展开和收起，基于jquery
$ = layui.jquery; form = layui.form; //获取节点数据 getTreeData(); }); function getTreeData() { $.ajax({ url : path+/RoleController/getResourceTree.do, type : post, dataType : json, data :{ roleId:...
JTree 树形菜单插件包下载，在网页上快速实现树控菜单的一个小插件，功能相对完善，本次更新功能：加入treeNodes(数组形式)，通过treeNodes可以对指定的子树进行收缩和展开功能，查找指定节点的功能。加入这个功能...
前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。 ztree官方文档：...
界面美化、目录树,jquery实现登陆、注册的验证，以及实现图片轮回播放的效果，登陆密码admin，密码123
树形列表菜单的数据组织形式一般有两种：一种是一次性向服务器请求所有节点的数据，一种是先请求根目录的节点，当用户点击该节点时，再去请求该节点的子叶节点的数据。这里我们的需求是第一种。 树形菜单是我们经常...