zTree理解和简单Demo(转)
zTree是利用 jQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。整个zTree的页面显示核心
代码是。
- <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;">$(document).ready(function () {
- zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);}
- );
- </span></span>
<span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;">$(document).ready(function () { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);} );
</span></span>
解释:#treeDemo是html用于显示的zTree容器。
Setting 是JavaScript脚本中用于定义树的显示结构样式。
zNodes 用于填充Setting中定义的树的数据源。
个人理解:zTree的实现就是用setting把树的模型结构定义好,然后用zNodes当数据源,把数据浇灌到这个树
结构中,最后用这个被填满的树印在html中的zTree容器中,用于显示出来。
zTree的实现思路是这样的:
1. 在HTML页面定义一个zTree容器,也就是我们所说的<div>。
- <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><body>
- <form id="form1" runat="server">
- <div>
- <ul id="treeDemo" class="ztree"></ul>
- </div>
- </form>
- </body>
- </span></span>
<span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><body>
<form id="form1" runat="server">
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</form>
</body>
</span></span>
2.在javascript中进行setting的配置。
简单来说就是我们想要的树的样式、事件、访问路径、有无勾选、有无连线等属性。
3. 给zNodes赋值。
zNodes是树的全部节点数据集合,采用json对象组成的数据结构。
备注:当然这一切都要建立在引用了相应的js 和CSS。
zTree v3.5.21 下载地址:http://www.ztree.me/v3/demo.PHP#_101
【Demo】
- <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="树结构.tree" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>ZtreeDemo</title>
- <link href="Script/zTree/css/demo.css" rel="stylesheet" />
- <link href="Script/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
- <script src="Script/zTree/js/jquery-1.4.4.min.js"></script>
- <script src="Script/zTree/jquery.ztree.core-3.5.js"></script>
- <script language="JavaScript">
- //进行setting设置;
- var setting = {
- treeNodeKey: "id", //在isSimpleData格式下,当前节点id属性
- treeNodeParentKey: "pId", //在isSimpleData格式下,当前节点的父节点id属性
- showLine: true, //是否显示节点间的连线
- checkable: true //每个节点上是否显示 CheckBox
- };
- //进行zNodes的设置,对它进行赋值,也可以从后台获取,为方便在这里采用直接赋值;
- var zNodes = [
- {
- name: "父节点1", open: true, children: [
- { name: "子节点1" }, { name: "子节点2" }]
- },
- {
- name: "父节点2", open: true, children: [
- { name: "子节点1" }, { name: "子节点2" }]
- }
- ];
- //页面加载后,将zNodes数据放到setting设置的树结构中,显示在html中id=treeDemo的容器中。
- $(document).ready(function () {
- zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <ul id="treeDemo" class="ztree"></ul>
- </div>
- </form>
- </body>
- </html>
- </span></span>
<span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="树结构.tree" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ZtreeDemo</title><link href="Script/zTree/css/demo.css" rel="stylesheet" />
<link href="Script/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="Script/zTree/js/jquery-1.4.4.min.js"></script>
<script src="Script/zTree/jquery.ztree.core-3.5.js"></script>
<script language="JavaScript"> //进行setting设置;
var setting = {
treeNodeKey: "id", //在isSimpleData格式下,当前节点id属性
treeNodeParentKey: "pId", //在isSimpleData格式下,当前节点的父节点id属性
showLine: true, //是否显示节点间的连线
checkable: true //每个节点上是否显示 CheckBox
};
//进行zNodes的设置,对它进行赋值,也可以从后台获取,为方便在这里采用直接赋值;
var zNodes = [
{
name: "父节点1", open: true, children: [
{ name: "子节点1" }, { name: "子节点2" }]
},
{
name: "父节点2", open: true, children: [
{ name: "子节点1" }, { name: "子节点2" }]
}
];
//页面加载后,将zNodes数据放到setting设置的树结构中,显示在html中id=treeDemo的容器中。
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</form>
</body>
</html>
</span></span>
效果:
zTree理解和简单Demo(转)的更多相关文章
- Django实战(一)之简单Demo
菜鸟教程上Django安装可供参考: 参考链接: http://www.runoob.com/django/django-install.html 菜鸟教程上如果不行的话,下面博客网址可以供参考 Li ...
- 设计模式之单例模式的简单demo
/* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...
- Spring的简单demo
---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...
- 使用Spring缓存的简单Demo
使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...
- Managed DirectX中的DirectShow应用(简单Demo及源码)
阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...
- angular实现了一个简单demo,angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- Solr配置与简单Demo[转]
Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...
- 二维码简单Demo
二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...
- android JNI 简单demo(2)它JNI demo 写
android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...
随机推荐
- 利用workbench将excel数据导入到MySQL中
数据导入的方式(csv,txt之类) 在MySQL中,数据导入的方式有两种方式 通过第三方客户端导入(workbench) 通过mysql client 方式导入 通过mysql clinet的导入方 ...
- JavaScript+canvas 绘制多边形
效果图: <body> <canvas id="square" width="500"></canvas> <canv ...
- DotNetCore跨平台~问题~NETCoreAPP, Version=v1.0' compatible with one of the target runtimes: 'win10-x64
回到目录 新建console项目之后,编译程序出现以下错误: Can not find runtime target for framework '.NETCoreAPP, Version=v1.0' ...
- MySQL存储写入性能严重抖动分析
案例描述: 通过iostat发现存储的写性能长期维持在10MB左右,而且因为写性能差已经导致数据库性能变差: 两个小时以后,iostat发现系统的写性能已经能够到100MB以上,数据库性能也恢复正常. ...
- 机器学习之支持向量机(SVM)
支持向量机 百度百科(基本看不懂):http://baike.baidu.com/link?url=Z4MU6AYlf5lOX7UGHVYg9tBvxBGOkriPtNt0DixmscnMz06q5f ...
- linux DNS 问题
今天准备爬虫51job时候,发现ping不通外网了,ping 了一下IP,都是OK的,只是host不通. 呵呵,就一DNS问题,好的.第一步,开始检查配置文件 cat /etc/sysconfig/n ...
- HashSet TreeSet 源码
1 HashSet 1.1 父类 java.lang.Object 继承者 java.util.AbstractCollection<E> 继承者 java.util.AbstractSe ...
- 基于.NET CORE微服务框架 -谈谈surging的服务容错降级
一.前言 对于不久开源的surging受到不少.net同学的青睐,也受到.net core学习小组的关注,邀请加入.NET China Foundation以方便国内.net core开源项目的推广, ...
- sqlserver的触发器练习实例
触发器的概念:它是由事件驱动的,就像java中的监听,当某个事件发生了,就会做一些工作. 下面直接上干货,创建insert触发器.delete触发器.DDL触发器和如何查看触发器定义 1.创建三个表学 ...
- 机器学习 —— 基础整理(五)线性回归;二项Logistic回归;Softmax回归及其梯度推导;广义线性模型
本文简单整理了以下内容: (一)线性回归 (二)二分类:二项Logistic回归 (三)多分类:Softmax回归 (四)广义线性模型 闲话:二项Logistic回归是我去年入门机器学习时学的第一个模 ...