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. jsfl读取xml,图片，并生成swf

    var newdoc = fl.createDocument(); var doc = fl.getDocumentDOM(); var URI = fl.browseForFolderURL(&qu ...

  2. tomcat源码阅读之Catalina和Bootstrap解析

    一.Cataling类分析: 1.Catalina类是启动类,用于启动或者关闭Server对象,它包含一个Digester对象,用于解析tomcat配置文件:conf/server.xml;调用pro ...

  3. hadoop零基础入门之DKH安装准备

    前几天去参加了一个线下的聚会,参加聚会的基本都是从事互联网工作的.会上有人提到了区块链,从而引发了一场关于大数据方面的探讨.我也是从去年才正式接触大数据,一直在学习hadoop.相信接触过hadoop ...

  4. 【jmeter】jmeter测试网站QPS

    上一节中,我们了解了jmeter的一此主要元件,那么这些元件如何使用到性能测试中呢.这一节创建一个简单的测试计划来使用这些元件.该计划对应的测试需求. 1)测试目标网站是fnng.cnblogs.co ...

  5. WPF Demo7

    没有Path/Source的数据绑定 本地local资源用法 namespace Demo9 { public class Student { private string name; public ...

  6. wkhtmltopdf+itext实现html生成pdf文件的打印下载(适用于linux及windows)

    目中遇到个根据html转Java的功能,在java中我们itext可以快速的实现pdf打印下载的功能,在itext中我们一般有以下三中方式实现 配置pdf模板,通过Adobe Acrobat 来设置域 ...

  7. 安全测试chicklist

  8. AWS CLI以及AWS S3 SYNC命令行使用

    1.到AWS的IAM创建用户,并且获取到访问密钥 ID 和私有访问密钥.下载密钥并保存. 2.到http://docs.amazonaws.cn/cli/latest/userguide/instal ...

  9. Protocol Buffer Basics: Python

    原文https://developers.google.com/protocol-buffers/docs/pythontutorial Protocol Buffer Basics: Python ...

  10. Scrapy爬取人人网

    Scrapy发送Post请求 防止爬虫被反主要有以下几个策略 动态设置User-Agent(随机切换User-Agent,模拟不同用户的浏览器信息) 禁用Cookies(也就是不启用cookies m ...