/**
* 生成树结构
* @param {Object} obj 传入树的数据,格式为json
* [{"id":1035,"text":"车辆监测","children":[{"id":1036,"text":"实时监测","children":[]},{"id":1093,"text":"车辆查询","children":[]},{"id":1071,"text":"未识别车辆校对","children":[]}]},
*/
function cnznjtTree(o){
var s = "";
terr(o);
function terr(obj){
var obj1;
for(var i=0;i<obj.length;i++){
var o= obj[i];
if(obj[i].children &&obj[i].children !=[] && obj[i].children != '[]' && obj[i].children.length != 0 ){
s += '<div class="treeCheck" style="width:170px;"><label onclick="treeOpen(this)">' +
'<image class="imgjz" onclick="treeOpen(this)" src="cnznjt_images/jia.png"></label>' +
'<input name="role.funId" type="checkbox" id="'+o.id+'" value="'+o.id+'" onclick="selAll(this)"/>'+o.text+'<div style="margin-left:10px;display:none;">';
obj1 = obj[i].children;
terr(obj1);
s += '</div></div>'
}else{
s += '<span class="treeSpanCnznjt" style="cursor:pointer;margin-left:10px;width:170px;"><image class="imgjz spanTreePoint" src="cnznjt_images/bullet_blue.png"/><input type="checkbox" onclick="selAll(this)" name="role.funId" id="'+o.id+'" value="'+o.id+'"/>'+o.text+'</span><br/>'
}
}
}
return s;
}
/**
* 展开树
* @param {Object} treeDom 点击节点dom
*/
function treeOpen(treeDom){
var showImage=treeDom.parentNode.children[0];
if(treeDom.parentNode.children[2]){
var hideDiv=treeDom.parentNode.children[2].style;
if(hideDiv.display == 'none'){
hideDiv.display = 'block';
showImage.innerHTML= '<image class="imgjz" src="cnznjt_images/jian.png">';
}else{
hideDiv.display = 'none';
showImage.innerHTML= '<image class="imgjz" src="cnznjt_images/jia.png">';
}
}
}
/**
* 全选或者反选下级
* @param {Object} dom 上级dom
*/
function selAll(dom){
var dv = dom.parentNode;
var spanLength = $(dv.children[2]).contents("span").length;
var divLength = $(dv.children[2]).contents("div").length;
var ckeckedFlag = $(dom).attr("checked");
if(spanLength!=0||divLength!=0){
if(ckeckedFlag=='checked'){
$(dv.children[2]).find(':checkbox').attr("checked","checked");//选中上级,下级选中
}else{
$(dv.children[2]).find(':checkbox').attr("checked",false);//取消选中上级,取消下级选中
}
}
if(dv.parentNode){
parentCheck(dv);
}
}
/**
* 根据下级反选上级
* @param {Object} obj 选中dom
* @return {TypeName}
*/
function parentCheck(obj){//判断下级是否选中,递归判断上级选中情况
var i = 0,j = 0;
var checkObj = $(obj).find(":checkbox");
var checkLength = checkObj.length;
if(obj){
var _obj = obj.parentNode;
for(var l=0;l<checkLength;l++){
if($(checkObj[l]).attr("checked")=="checked"){
i++;
break;
}else{
j++;
}
}
if(i>0){
if($(_obj).children(":checkbox").attr("checked")){
return;
}
$(_obj).children(":checkbox").attr("checked",true);
}else if(checkLength==j){
$(_obj).children(":checkbox").attr("checked",false);
}else{
return;
}
parentCheck(_obj);
}
}
分享到:
相关推荐
《jQuery实现超简单树节点详解》 在网页开发中,数据的展示往往需要有层次结构,比如组织架构、目录层级等,这时候树形结构就显得尤为重要。jQuery(简称jq)作为一个强大的JavaScript库,提供了丰富的API来帮助...
本文将详细讲解如何使用JavaScript和HTML(通过div元素)来创建一个简单的树形结构。 首先,我们需要理解树的基本概念。在计算机科学中,树是一种非线性的数据结构,由节点(或称为顶点)和连接这些节点的边组成。...
【标题】"简单树形导航demo"所涉及的知识点主要集中在构建树形数据结构和用户界面的呈现上。树形导航是一种常见的用户交互元素,它用于组织和展示具有层级关系的数据,例如文件系统、网站菜单或者组织架构。在这个...
在Java中,我们可以使用类和对象的概念来实现一个简单的树。本篇文章将详细探讨如何用Java语言编写一个简单的树,以及相关的关键概念。 首先,我们需要理解树的基本概念。树是由节点(或称为顶点)和边构成的非线性...
本文将详细讲解如何创建一个“最简单树形下拉菜单”,以及实现这个功能所需的关键技术。 首先,我们需要理解树形下拉菜单的基本构成。这种菜单通常由一个父节点(主菜单项)和多个子节点(次级菜单项)组成。当用户...
本主题聚焦于一个基于jQuery实现的简单树形菜单,这是一种轻量级且高效的方法,适用于各种Web应用。 jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画以及Ajax交互。利用jQuery,我们可以快速...
这个项目“JSP+Mysql实现的简单树形结构”就是一个典型的例子,它结合了Java服务器页面(JSP)和MySQL数据库来创建一个直观的数据展示方式。以下是关于这个项目的详细知识点: 1. **JSP(Java Server Pages)**:...
【单选多选简单树形框架dtree】是一种在网页界面上实现的交互式组件,主要用于展示层次结构的数据,如组织架构、文件目录等。它提供了单选和多选功能,使得用户能够方便地在树状结构中进行选择操作。在前端开发中,...
在这个项目中,"Eclipse编写的简单树结构"可能是一个使用Java语言实现的示例,展示了如何在Eclipse环境下构建和操作树形数据结构。 树结构由节点(或称为顶点)和边组成,每个节点可以有零个或多个子节点。在Java中...
本篇将详细讲解如何使用Java实现一个简单的树结构,包括树节点类`treeNode`、树类`tree`以及相关的操作方法。 首先,我们来看`treeNode`类的实现。`treeNode`代表树中的一个节点,它可以存储任意类型的数据,这里用...
本文将详细讲解基于不变矩空间信息的简单树动态规划双目立体匹配方法。 首先,不变矩是一种描述图像形状特征的数学工具,它不受图像平移、旋转或缩放的影响。常见的不变矩包括Hu矩,它们能够对图像的对称性、旋转性...
Ext简单树在浏览器中的显示效果不好 Ext简单树在浏览器中的显示效果不好
这个源码可能是为了帮助开发者理解和实现一个简单的树形菜单,使得用户可以通过展开和折叠节点来探索多级结构的信息。 首先,我们需要了解Java中的树形数据结构。在Java Swing库中,`javax.swing.tree`包提供了处理...
最简单的树 -- 标准 JSON 数据 1、setting 配置信息说明 普通使用,无必须设置的参数 与显示相关的内容请参考 API 文档中 setting.view 内的配置信息 name、children、title 等属性定义更改请参考 API 文档中 ...
在这个主题中,我们将深入探讨一个使用JavaScript实现的简单树形结构源代码。 首先,我们需要理解树的基本概念。一棵树由节点(也称为顶点)和边组成,每个节点可以有零个或多个子节点,除了根节点,其他节点都有且...
但是最近公司需要做一个带复选框的树形结构,并且最关键的是要嵌入到JSP页面中,传递的数据不是用JSON传递的,是直接通过后端跳JSP页面的方式来的,所以就没有用网上的插件,就自己写了一下简单的实现。
本教程将详细讲解如何实现一个简单且兼容IE浏览器的树形菜单。 首先,我们需要理解树形菜单的基本构成。通常,树形菜单由节点组成,每个节点可以有子节点,形成一棵多级的树。节点可以是文字、图标或两者结合,通过...
本节我们将深入探讨如何实现一个简单的树形结构,并将其应用于网站后台管理。 首先,我们需要理解树形结构的基本概念。树形结构是一种非线性的数据结构,它由节点(或称为顶点)和边构成,每个节点可以有零个或多...