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. 树莓派的媒体播放软件omxplayer

    树莓派中的CPU性能较差,而GPU较强大.omxplayer是专门针对树莓派的GPU的播放器.( made by Edgar (gimli) Hucek from the XBMC/Kodi proj ...

  2. 嵌入式Linux软件工程师面试题一

    题一,同步和异步有啥区别? 题二,TCP与UDP有啥区别? 题三,进程和线程有啥区别? 题一答案: 同步(Sync):所有的操作都做完,才返回给用户.这样用户在线等待的时间太长,给用户一种卡死了的感觉 ...

  3. hadoop之 exceeds the limit of concurrent xcievers处理

    dfs.datanode.max.transfer.threads: 默认 4096 < 2.0之前该参数为dfs.datanode.max.xcievers >解释:Specifies ...

  4. FineUI 3升级4.1.1时，SingleClickExpand属性改什么了？ （树控件单击展开）

    private Tree InitTreeMenu(List<Menu> menus) { Tree treeMenu = new Tree(); treeMenu.ID = " ...

  5. WPF ListView 简单的拖拽实现(转)

    首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...

  6. ES(5): ES Cluster modules settings

    ES cluster 提供了针对不同模块的参数设置,可通过修改集群上各个节点的elasticsearch.yml文件,也可在集群运行时通过api接口来更新(https://www.elastic.co ...

  7. VS2010程序调试

    http://blog.csdn.net/kingzone_2008/article/details/8133048 调试初识及实例.

  8. <<APUE>> 编译方法

    /********************************************************************************第0种-最简单实用********** ...

  9. Qt 资源文件

    以下演示如何在Qt Creator使用QIcon加载一张 png 图片: 在工程上点右键,选择“添加新文件…”,在 Qt 分类下选择“Qt 资源文件”: 点击“选择…”按钮,打开“新建 Qt 资源文件 ...

  10. bzoj 3413: 匹配

    Description Input 第一行包含一个整数n(≤100000). 第二行是长度为n的由0到9组成的字符串. 第三行是一个整数m. 接下来m≤5·10^4行,第i行是一个由0到9组成的字符串 ...