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. 【转】每天一个linux命令（59）：rcp命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/14/2958685.html rcp代表“remote file copy”(远程文件拷贝).该命 ...

  2. Angular 4 模板表单校验

    1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSub ...

  3. mySQL 教程 第5章 插入 更新与删除数据

    使用SQL Manager管理工具连接到schoolDB.由于三张表都设置了主键,因此,以下练习中插入的记录,主键不能重. 插入数据 1. 练习:为表的所有字段插入数据 为表中所有字段插入数据,可以不 ...

  4. kibana 与 grafana

    Kibana 和 Grafana 是两个开源工具,能可视化和推断大量日志数据内的趋势.Kibana 是一个分析和可视化平台,它可以让你浏览.可视化存储在Elasticsearch集群上排名靠前的日志数 ...

  5. java web程序 String的valueOf方法总集

    在代码中用到类型转换的时候,是一个字符,然后当用户在网页中输入的是字符串, 字符转换成字符串的方法是: String.valueOf(char c);就好了 这样在写验证码的时候,网页端的就是字符串形 ...

  6. PHP简单查询界面

    <html> <style type='text/css'> table {border-collapse:collapse;} td {border:solid 1px #d ...

  7. 1012 The Best Rank （25 分）

    1012 The Best Rank (25 分) To evaluate the performance of our first year CS majored students, we cons ...

  8. 用两条命令看出你买的H3C光模块是否是正品

    display transceiver manuinfo interfacedisplay transceiver interface从下文可以看出 1/0/26 1/0/27 2/0/26三个端口的 ...

  9. ubuntu 16.04 LTS 安装 teamviewer 13

    背景介绍 由于需要做现场的远程支持,经协商后在现场的服务器上安装TeamViewer 以便后续操作. 本来以为很简单的一件事,谁知却稍微费了一番周折  :( 记录下来,希望提醒自己的同时也希望能够帮到 ...

  10. golang web框架 beego 学习 （二） router and controller

    1 Router和Controller的常用配置 beego.Router("/user/admin", &controllers.UserController{}) // ...