jquery树形结构
<div class="tree_content">
<div class="tree_node">
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
<div class="div_inline tree_node_parent">
<input type="checkbox" class="tree_node_parent_checkbox">父节点1
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox">子节点1<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点2<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点3<br>
</div>
</div>
</div>
<div class="tree_node">
<!-- 切换子目录隐藏或显示的按钮 -->
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
<div class="div_inline tree_node_parent">
<input type="checkbox" class="tree_node_parent_checkbox">父节点2
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox">子节点1<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点2<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点3<br>
</div>
</div>
</div>
<div class="tree_node">
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
<div class="tree_node_parent div_inline">
<input type="checkbox" class="tree_node_parent_checkbox">父节点3
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox">子节点1<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点2<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点3<br>
</div>
</div>
</div>
</div>
.div_inline {
display:inline;
}
/* 设置子节点属性 */
.tree_node_child {
margin-left:50px;
}
// 页面加载完成后调用
$(function(){
// 为所有的父节点添加点击事件
$(".tree_node_parent_checkbox").click(function(){
// 获取父节点是否选中
var isChange = $(this).prop("checked");
if(isChange){ // 如果选中,则父节点下的所有的子节点都选中
// 获取当前checkbox节点的兄弟节点下的所有的checkbox子节点选中
$(this).next().find(".tree_node_child_checkbox").prop("checked", true);
}else{ // 未选中,取消全选
// 获取当前checkbox节点的兄弟节点下的所有的checkbox子节点选中
$(this).next().find(".tree_node_child_checkbox").removeAttr("checked");
}
});
// 为所有的子节点添加点击事件
$(".tree_node_child_checkbox").click(function () {
// 获取选中的节点的父节点下的所有子节点选中的数量
var length = $(this).parent().find(".tree_node_child_checkbox:checked").length;
// 判断当前结点是否选中
if($(this).prop("checked")){ // 选中
// 如果当前节点选中后,所有的选中节点数量1,选中父节点
if(length == 1){
// 选中父节点
$(this).parent().prev().prop("checked", true);
}
}else{ // 节点未选中
if(length == 0){
// 取消父节点的选中状态
$(this).parent().prev().removeAttr("checked");
}
}
}); // 为所有的切换按钮添加点击事件
$(".tree_node_toggle_button").click(function () {
// 获取需要隐藏或显示的节点
var $toggle_node = $(this).parent().next().find(".tree_node_child");
$toggle_node.toggle(); // 切换隐藏或显示
// 切换按钮的显示
if($toggle_node.is(":visible")){
$(this).val("-");
}else{
$(this).val("+");
}
});
});
jquery树形结构的更多相关文章
- jQuery 树形结构
强大的jquery.ztree树形菜单插件支持多种树形菜单导航 http://www.17sucai.com/pins/2259.html 演示: http://www.17sucai.com/pin ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- 5JS树形结构菜单和jQuery版
第一版JS版HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- salesforce 零基础学习(七十)使用jquery table实现树形结构模式
项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...
- salesforce 零基础学习(七十)使用jquery tree实现树形结构模式
项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- 用jquery-easyui中的combotree实现树形结构的选择
用jquery-easyui中的combotree实现树形结构的选择 需求:实现一个树形节点的选择,要求默认父节点都折叠,父节点前的checkbox不显示,子节点显示checkbox,且父节点不可选择 ...
- MVC3+EF4.1学习系列(十)----MVC+EF处理树形结构
通过前几篇文章 我们处理了 一对一, 一对多,多对多关系 很好的发挥了ORM框架的做用 但是 少说了一种 树形结构的处理, 而这种树形关系 我们也经常遇到,常见的N级类别的处理, 以及经常有数据与类别 ...
- CSS实现树形结构 + js加载数据
看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: li { position: relative; padding: 5px 0; margin:0 ...
随机推荐
- Codeforces 游记
早就对这个比赛平台有所耳闻(事实上,之前打过一场div2惨的一批……)今天去打了一场div3. 首先还是吐槽一下这个毛子时区的比赛时间,从十点三十五到零点三十五……这种时间要不是在家根本没法打嘛…… ...
- VirtualBox6安装CentOS7设置静态IP
安装virtualbox后安装centos7, 这里就不在赘述了, 网上有很多教程 先关闭虚拟机, 按照如下设置配置网络 这里需要使用双网卡, 我们在开启第二个网卡, 如下所示 之后开启虚拟机, 进行 ...
- 小白学 Python(20):迭代器基础
人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...
- 基于 ThinkPHP5 + Bootstrap 的后台开发框架 FastAdmin
FastAdmin是一款基于 ThinkPHP5 + Bootstrap 的极速后台开发框架. 主要特性 基于Auth验证的权限管理系统 支持无限级父子级权限继承,父级的管理员可任意增删改子级管理员及 ...
- unittest加载测试用例名称必须以test开头,是否可以定制化
前几天,在一个群里,一个人问了,这样一个问题.说他面试遇到一个面试官,问他,为啥unittest的测试用例要用test 开头,能不能定制化.他不知道为啥. 看到这个题目,我回答当然可以了,可以用l ...
- html5不能播放视频的方法
html5不能播放视频的方法H5不能播放视频的方法 格式工厂转换成 AVC 注意音频流 采样率和比特率 设置低一点 不然播放会卡住 还有点击播放必须要click 不要用touchstart没效果的
- jdk8 函数式编程概念
yls 2019/11/7 函数式接口 如果一个接口只有一个抽象方法,那么该接口就是函数式接口 如果我们在某接口上声明了FunctionalInterface注解,那么编译器就会按照函数式接口的定义来 ...
- Javascript模块化开发2——Gruntfile.js详解
一.grunt模块简介 grunt插件,是一种npm环境下的自动化工具.对于需要反复重复的任务,例如压缩.编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.grunt模块根据 ...
- Xshell选中的同时把内容复制到剪贴板
1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制
- C# VI: 删除字符串中指定字符的几种方法
本文基于Stackoverflows上以下几个Question: Fastest way to remove chars from string (http://stackoverflow.com/q ...