https://www.cnblogs.com/shinhwazt/p/5828031.html

ztree包:https://pan.baidu.com/s/1vOgGm_elF-lF0VowoHwnOQ     密码:nvmi

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title>title</title>

    <link rel="stylesheet" type="text/css" href="../css/zTree/css/metroStyle/metroStyle.css"/>

    <script type="text/javascript" src="../script/jquery-2.0.3.min.js"></script>

    <script src="../css/zTree/js/jquery.ztree.all.js"></script>

    <style>

    	body{

    	}

    </style>

</head>

<body>

	<div>

    <ul class="ztree" id="des_school"></ul>

</div>

</body>

<script type="text/javascript">

	$(function(){

	alert(11);

        　initTree();

	});

	var setting = {

    data:{//表示tree的数据格式

        simpleData:{

            enable:true,//表示使用简单数据模式

            idKey:"id",//设置之后id为在简单数据模式中的父子节点关联的桥梁

            pidKey:"pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应

            rootId:"null"//pid为null的表示根节点

        }

    },

    view:{//表示tree的显示状态

        selectMulti:false//表示禁止多选

    },

    check:{//表示tree的节点在点击时的相关设置

        enable:true,//是否显示radio/checkbox

        chkStyle:"checkbox",//值为checkbox或者radio表示

        checkboxType:{p:"",s:""},//表示父子节点的联动效果

        radioType:"level"//设置tree的分组

    },

    callback:{//表示tree的一些事件处理函数

       // onClick:handlerClick,

        onCheck:handlerCheck

    }

}

	function initTree(){

	var data = {

    teacher:[

        {id:0,name:"张老师",sex:"男"},

        {id:1,name:"李老师",sex:"男"},

        {id:2,name:"王老师",sex:"女"}

    ],

    student:[

        {id:0,name:"学生A",sex:"男",tId:0},

        {id:1,name:"学生B",sex:"男",tId:0},

        {id:2,name:"学生C",sex:"女",tId:1},

        {id:3,name:"学生D",sex:"女",tId:1},

        {id:4,name:"学生E",sex:"男",tId:2},

        {id:5,name:"学生F",sex:"女",tId:2}

    ]

}

    var teacherList = data.teacher;

    var studentList = data.student;

    var treeData = [];

    treeData.push({id:"root",name:"学校",pId:null});

    for(var i=0,il=teacherList.length;i<il;i++){

        teacherList[i].pId = "root";

        treeData.push(teacherList[i]);

    }

    for(var i=0,il=studentList.length;i<il;i++){

　　　　 studentList[i].id = "s"+studentList[i].id;

        studentList[i].pId = studentList[i].tId;

        treeData.push(studentList[i]);

    }

    $.fn.zTree.init($("#des_school"),setting,treeData);

}

</script>

</html>

　　

Ztree学习(-)简单例子的更多相关文章

  1. ant学习简单例子

    1.下载ant,http://ant.apache.org/ 这个网站下载,然后配置环境变量 打开dos界面,输入ant -version,如果提示命令不存在,进入到ant包装目录bin下载,再次运行 ...

  2. zTree的简单例子

    <%@ page language="java" pageEncoding="UTF-8" %> <%@ include file=" ...

  3. [转] 3个学习Socket编程的简单例子：TCP Server/Client, Select

    以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...

  4. Java-马士兵设计模式学习笔记-观察者模式-AWT简单例子

    1.AWT简单例子 TestFrame.java import java.awt.Button; import java.awt.Frame; import java.awt.event.Action ...

  5. CUDA学习，环境配置和简单例子

    根据摩尔定律,每18个月,硬件的速度翻一番.纵使CPU的主频会越来越高,但是其核数受到了极大的限制,目前来说,最多只有8个或者9个核.相比之下,GPU具有很大的优势,他有成千上万个核,能完成大规模的并 ...

  6. hadoop学习第四天-Writable和WritableComparable序列化接口的使用&&MapReduce中传递javaBean的简单例子

    一. 为什么javaBean要继承Writable和WritableComparable接口? 1. 如果一个javaBean想要作为MapReduce的key或者value,就一定要实现序列化,因为 ...

  7. zTree 学习笔记之(一)

    zTree 学习笔记之(一) 简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 到底有哪些具体的优点,可以参见官网 ...

  8. 线程和线程池的理解与java简单例子

    1.线程 (1)理解,线程是系统分配处理器时间资源的基本单元也是系统调用的基本单位,简单理解就是一个或多个线程组成了一个进程,进程就像爸爸,线程就像儿子,有时候爸爸一个人干不了活就生了几个儿子干活,会 ...

  9. EmguCV学习——简单使用

    关于EmguCV我就不多说了,是对应于OpenCV的一套net库. 公司是视觉方面的业务,我又不会c++(好想会啊,正在学习中).由于各种需求,自己觉得对c++不是特别感冒,所以选用了net下的ope ...

随机推荐

  1. setsockopt IP_ADD_MEMBERSHIP error!No such device的解决方案

    /mnt # ./onvifserver Happytime onvif server version 2.6Onvif server running at 192.168.1.10:8000crea ...

  2. mysql复制表结构create table as和like的区别

    对于MySQL的复制相同表结构方法,有create table as 和create table like 两种,区别是什么呢? create table t2 as select * from t1 ...

  3. PHP 小技巧之如何避免参数多次传递？

    开发中经常遇到函数参数传递的问题:比如 A调用B,B调用C,C调用D, A->B->C->D 而D方法可能需要一个参数,这个参数只能在A中获取(比如A是控制器方法),这个参数这样一级 ...

  4. Oracle 10g下emctl start dbconsole 报错：OC4J Configuration issue 问题解决

    http://blog.sina.com.cn/s/blog_95b5eb8c0100x4a7.html http://blog.csdn.net/sz_bdqn/article/details/17 ...

  5. msp430学习笔记-IO及低功耗

    引用:http://bbs.ednchina.com/BLOG_ARTICLE_3013511.HTM MSP430F149有6个8位的IO口,其中P1,P2口占两个中断向量,共可以接16个中断源.还 ...

  6. [转]Java. SqlServer 使用

    public void add(Emp emp) throws Exception { String connectionUrl = "jdbc:sqlserver://localhost: ...

  7. 常用命名_html

    以下为于页面模块的常用命名 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrappe ...

  8. Python软件开发规范

    bin  整个程序的执行路口    start.py conf 配置文件     setting.py lib   库  模块与包    common.py    sql.py core  核心逻辑  ...

  9. [UE4]编程师外挂Visual Assist X

    Visual Assist X是一款非常好的Microsoft Visual Studio插件,可以支持Microsoft Visual Studio 2003,Microsoft Visual St ...

  10. 如何使用沙箱测试单笔转账到支付宝账号（php版） https://openclub.alipay.com/read.php?tid=1770&fid=28

    说明:   本帖是利用支付宝沙箱测试电脑网站支付接口   测试环境:Apache2.4.23 +php 5.6.25   沙箱环境测试正式环境请修改网关为下方值   复制代码 1 正式环境网关:htt ...