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. RAC5——11gR2以后GI进程的变化

    参考文档: 11gR2 Clusterware and Grid Home - What You Need to Know (Doc ID 1053147.1)诊断 Grid Infrastructu ...

  2. MySQL的Join使用

    在MySQL(以5.1为例)中,表连接的语法可以参见MySQL官方手册:MySQL官方手册-JOIN 在查询中,连接的语法类似 SELECT select_expr FROM table_refere ...

  3. js操作cookie(转载：经测试可用)

    /***js操作cookie,star***/ function addCookie(objName,objValue,objsec){//添加cookie  var str = objName + ...

  4. 快速接入PHP微信支付

    微信支付是微信开发中坑最多的一个功能,本文旨在帮助有开发基础的人快速接入微信支付,如果要详细了解微信支付,请看微信支付的开发文档. 再说把开发文档搬到这里来就没必要了.想要快速跑通微信支付的可以继续查 ...

  5. 关于 ake sure class name exists, is public, and has an empty constructor that is public

    解决方法:自定义的fragment最好有一个Public的参数为空的构造函数,若需要传入一个参数,可以使用下面的方法 public FileViewFragment(){ } public stati ...

  6. 全局 SqlConnection

    class SqlHelper { public static SqlConnection conn; public static SqlConnection Open(string connStr) ...

  7. tomcat 加载顺序 web.xml文件详解

    一. 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Se ...

  8. python selenium-4自动化测试模型

    1.线性测试 特点:每一个脚本都是完整且独立的,可以单独执行. 缺点:用例的开发与维护成本很高 2.模块化驱动测试 特点:把重复的操作独立成公共模块,提高测试用例的可维护性 示例:将搜索封装到func ...

  9. [UE4]让AI跑起来

    让AI由静止状态变成跑步状态,做法跟玩家角色走路一样. 一.创建1D混合动画 二.在AI角色关联的动画蓝图中使用第一步创建的混合动画

  10. PHP 序列化变量的 4 种方法

    摘自: PHP 序列化变量的 4 种方法 http://www.iteye.com/news/25668