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 ...
随机推荐
- 利用python的requests和BeautifulSoup库爬取小说网站内容
1. 什么是Requests? Requests是用Python语言编写的,基于urllib3来改写的,采用Apache2 Licensed 来源协议的HTTP库. 它比urllib更加方便,可以节约 ...
- Pandas常用数据结构
Pandas 概述 Pandas(Python Data Analysis Library)是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的数 ...
- 死磕 java线程系列之终篇
(手机横屏看源码更方便) 简介 线程系列我们基本就学完了,这一个系列我们基本都是围绕着线程池在讲,其实关于线程还有很多东西可以讲,后面有机会我们再补充进来.当然,如果你有什么好的想法,也可以公从号右下 ...
- python之装饰器的两种写法
上一篇文章介绍了 装饰器的概念.现在讲一下在程序中怎么来写装饰器.上代码: def X(fun): def Y(b): print(b) fun() return Y def test(): prin ...
- 自己实现 aop 和 spring aop
上文说到,我们可以在 BeanPostProcessor 中对 bean 的初始化前化做手脚,当时也说了,我完全可以生成一个代理类丢回去. 代理类肯定要为用户做一些事情,不可能像学设计模式的时候创建个 ...
- JavaScript-原型对象与原型链
原型对象 1.每个对象一定会有一个原型对象 2.原型对象实际是构造实例对象的构造器中的一个属性,只不过这个属性是个对象 3.这个原型对象中的属性与方法,都会被对象实例所共享(类似python中的类方法 ...
- centos6的mysql安装
1.安装mysql服务端 yum install mysql-server yum install mysql-devel 2.下载mysql的压缩包 wget http://dev.m ...
- 在VMware CentOS7挂载系统光盘搭建本地仓库
1.软件准备: 安装VMware环境,在这里我使用的是VMware15 一个虚拟机系统,在这里我使用的是CentOS7(版本不同可能会有一点出入,但是应该相差不大) 在这里还有一个前提是已经建立好了y ...
- 03-MyBatis拦截器机制
目录 MyBatis拦截器介绍 拦截器的使用 拦截器介绍及配置 源码分析 总结 本文转载自MyBatis拦截器原理探究 MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽 ...
- linux系统LAMP环境部署
一.安装虚拟机 二.安装CentOS7 注意:以下安装,用的root权限. 三.安装Apache 1.安装 yum -y install httpd 2.开启apache服务 systemctl st ...