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 ...
随机推荐
- .NetCore~C#6的一些新特性
回到目录 在进行.netCore平台后,由于它的版本在.net4.6,C#6之后,所以它的语法也有一些新的特性,主要表现在以下几个方面 只读属性初始化 static string Hello => ...
- 在Linux安装配置Tomcat 并部署web应用 ( 三种方式 )
系统版本:centos6.5版本 java版本:1.7 一.准备工作 1.java -version 检查是否有java环境,没有则需要去安装并配置到环境变量中. 2.下载tomcat包,下载地址:h ...
- AllPairs运用遇到的问题及解决办法分享
前些天用AllPairs自动生成了交互式测试用例,中间遇到的问题困扰了一天,最后解决了.现在分享下解决过程 首先,D\AllPairs是我的ALLPairs安装目录,C盘桌面test.txt是我写的测 ...
- The first day,I get a blogs!!
我拥有了自己的博客,很happy! 今天学习了kvm,虽然命令行界面比较枯燥,还好不算太难,在大家的热心帮助下我创建了一个虚拟机!!
- [信息安全] 3.HTTPS工作流程
[信息安全]系列博客:http://www.cnblogs.com/linianhui/category/985957.html 0. 简单回顾 在前面两篇博客中介绍了密码相关的一些基本工具,包括(对 ...
- bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询
bootstrap-table自带搜索框感觉有点丑,我们可以把搜索功能单独拉出来放到页面的某一个位置. 首先我们看一下官方演示: 如果你感觉集成的检索框不太好看,而且我们也不想让搜索框和列表放到一块去 ...
- HDU-4787 GRE Words Revenge 解题报告
这是我之前博客里提到的一道AC自动机的练手题,但是要完成这道题,我之前博客里提到的东西还不够,这里总结一下这道题. 这道题不是一般的裸的AC自动机,它的询问和插入是交叉出现的所以用我之前写的板子不大合 ...
- net 将手机号码中间的数字替换成星号
Regex.Replace(link.user_tel, "(\\d{3})(\\d{5})(\\d{3})", "$1*****$3")
- 【整理】01. jQuery.Form.js 用法分析
前言: 为什么使用JQuery.From.js,因为原生<form>表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数. jQuery.form.js是一个f ...
- acdsee-pro-8 英文版
目前中文版acdsee pro 8不支持破解,只能选择英文版,然后汉化. 但是英文版并不好找,我在这里分享一下. 下载地址:http://pan.baidu.com/s/1boNZxQf 同时附上注册 ...