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>。

[html] view plain copy

print?

<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】

[html] view plain copy

print?

<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>
&lt;link href="Script/zTree/css/demo.css" rel="stylesheet" /&gt;
&lt;link href="Script/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /&gt;
&lt;script src="Script/zTree/js/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
&lt;script src="Script/zTree/jquery.ztree.core-3.5.js"&gt;&lt;/script&gt;
&lt;script language="JavaScript"&gt;
   
    //进行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>

效果：

posted @ 2017-08-15 18:24 星朝阅读(672) 评论(0) 编辑收藏举报

刷新页面返回顶部

星朝

zTree理解和简单Demo（转）

公告