zTree的基础开发
zTree的例子
jQuery插件的使用：
树的插件使用ztree的可能很低；
ztree是在TreeView基础上发展起来的，dojo，dojo比较流行；
事件，
动态的把树从数据库中加载出来；
研究ztree的方式是从demo入手，写自己的demo；
从jquery的入口开始:
$(doucument).ready(function(){
zTree = $("#tree").zTree(setting,zNodes);
});
-----------------
这里面是ztree的方法，原型上的方法；
树追加到元素上，才可以使用；
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTree; 树对象
var demoIframe; target显示的区域
var setting = {
isSimpleData: true, //确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes(parentNode, newNodes, isSilent) 方法中输入的 newNodes 数据是否采用简单 Array 格式
treeNodeKey: "id", //设置节点唯一标识属性名称，转换数据格式时使用,例如：当 isSimpleData 设置为 true，或 调用 transformTozTreeNodes(simpleTreeNodes) 方法。
treeNodeParentKey: "pId",//设置节点的父节点唯一标识属性名称，转换数据格式时使用，例如：当 isSimpleData 设置为 true，或 调用 transformTozTreeNodes(simpleTreeNodes) 方法。
showLine: true,//设置 zTree 是否显示节点之间的连线
root:{ //zTree 数据节点的根，全部节点数据都处于 root.nodes 内。 //初始化zTree时，如果直接把节点数据放在 setting.root.nodes 内，则 zTreeNodes 参数可以省略。 //默认值：{ nodes:[] }
isRoot:true,
nodes:[] //初始化之前将数据节点放在 setting 内
}
//请注意如果修改了nodesCol 【子节点数据】属性后，初始化时 root 内的 nodes 和 zTreeNodes 数据中全部的 nodes 属性 也需要被更换为修改后的名称
};
zNodes =[
{ id:3, pId:0, name:"zTree 功能演示", open:true},
{ id:31, pId:3, name:"基本功能演示", open:true},
{ id:311, pId:31, name:"不兼容 IE6", "url":"standardDemo.html", "target":"testIframe"},
{ id:311, pId:31, name:"兼容 IE6", "url":"standardDemoForIe6.html", "target":"testIframe"},
{ id:32, pId:3, name:"check 演示", open:true},
{ id:321, pId:32, name:"CheckBox演示", "url":"checkboxDemo.html", "target":"testIframe"},
{ id:321, pId:32, name:"Radio演示", "url":"radioDemo.html", "target":"testIframe"},
{ id:33, pId:3, name:"异步加载演示", "url":"asyncDemo.html", "target":"testIframe"},
{ id:34, pId:3, name:"事件演示", "url":"eventDemo.html", "target":"testIframe"},
{ id:35, pId:3, name:"编辑演示", open:true},
{ id:351, pId:35, name:"默认编辑", "url":"editDemo.html", "target":"testIframe"},
{ id:352, pId:35, name:"编辑 & 异步加载 共存", "url":"edit&asyncDemo.html", "target":"testIframe"},
{ id:36, pId:3, name:"JS操作", "url":"jscontrolDemo.html", "target":"testIframe"},
{ id:39, pId:3, name:"大数据量演示", open:true},
{ id:391, pId:39, name:"普通加载", "url":"bigDataDemo_normal.html", "target":"testIframe"},
{ id:392, pId:39, name:"高级异步加载", "url":"bigDataDemo_super.html", "target":"testIframe"},
{ id:37, pId:3, name:"高级应用演示", open:true},
{ id:371, pId:37, name:"两棵树的数据交换", "url":"superDemo_mutilTree.html", "target":"testIframe"},
{ id:372, pId:37, name:"添加自定义控件", "url":"superDemo_diyBtn.html", "target":"testIframe"},
{ id:375, pId:37, name:"checkbox & radio 共存", "url":"superDemo_check&radio.html", "target":"testIframe"},
{ id:373, pId:37, name:"右键菜单", "url":"superDemo_rightMenu.html", "target":"testIframe"},
{ id:374, pId:37, name:"下拉菜单", "url":"superDemo_dropdownMenu.html", "target":"testIframe"},
{ id:38, pId:3, name:"皮肤演示", url:"http://baby666.cn/hunter/ztree/skinDemo.html", target:"testIframe"}
];
$(document).ready(function(){
zTree = $("#tree").zTree(setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=230px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
</TD>
</TR>
</TABLE>
</BODY>
============
$(document).ready(function(){
setting.expandSpeed = ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast";
zTree = $("#tree").zTree(setting, zNodes);
var nodes = zTree.getNodes();
zTree.selectNode(nodes[2].nodes[0].nodes[0]);
demoIframe = $("#testIframe");
});
--
当写一个json格式对象的时候， 你的value又指一个对象，这就是复杂对象；
var zNodes =[
{ name:"手机", ename:"Mobile", open:true,
nodes: [ //这里作为一个json属性，里面的值还是一个对象就代表是复杂对象
{ name:"诺基亚", ename:"Nokia",
nodes: [
{ name:"C6(音乐版)", ename:"C6(Music)"},
{ name:"X6(导航版)", ename:"X6(GPS)"},
{ name:"5230(世博版)", ename:"5230(SB)"},
{ name:"N97mini", ename:"N97mini"}
]},
{ name:"三星", ename:"Samsung",
nodes: [
{ name:"I9000(联通版)", ename:"I9000(Unicom)"},
{ name:"I9000(移动版)", ename:"I9000(China Mobile)"},
{ name:"Galaxy Naos", ename:"Galaxy Naos"},
{ name:"Fascinate", ename:"Fascinate"}
]},
{ name:"索爱", ename:"Sony Ericsson",
nodes: [
{ name:"U1i(Satio)", ename:"U1i(Satio)"},
{ name:"U5i(Vivaz)", ename:"U5i(Vivaz)"},
{ name:"X10i", ename:"X10i"},
{ name:"Aino mini", ename:"Aino mini"}
]},
{ name:"多普达", ename:"Dopod"}
]},
{ name:"电脑", ename:"Computer", open:true,
nodes: [
{ name:"硬件", ename:"Hardware",
nodes: [
{ name:"主板", ename:"Motherboard"},
{ name:"显卡", ename:"Graphics"},
{ name:"CPU", ename:"CPU"},
{ name:"内存", ename:"Memory"},
{ name:"硬盘", ename:"Hard disk"},
{ name:"音箱", ename:"Speaker"},
{ name:"机箱", ename:"Chassis"},
{ name:"电源", ename:"Power supply"}
]},
{ name:"整机", ename:"Software",
nodes: [
{ name:"联想", ename:"Lenovo"},
{ name:"戴尔", ename:"Dell"},
{ name:"方正", ename:"Founder"},
{ name:"宏基", ename:"Acer"},
{ name:"惠普", ename:"Hewlett-Packard"}
]},
{ name:"网络设备", ename:"Network",
nodes: [
{ name:"网卡", ename:"NIC"},
{ name:"交换机", ename:"Switch"},
{ name:"路由器", ename:"Router"}
]}
]},
{ name:"家电", ename:"Home Appliances", open:true,
nodes: [
{ name:"冰箱", ename:"Refrigerator", isParent:true},
{ name:"电视", ename:"TV",
nodes: [
{ name:"液晶", ename:"Liquid crystal"},
{ name:"等离子", ename:"Plasma"},
{ name:"3D", ename:"Three-dimensional"}
]},
{ name:"空调", ename:"Air conditioning"}
]}
];
-------
isSimpleData:true;
就都是简单对象，比如：
var zTreeNodes = [
{ "name":"google", "url":"http://g.cn", "target":"_blank"},
{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
];
-------
如果默认是没有子节点就成为文件节点，这时候加上一个属性isParent:true;//在数据属性中
浙公网安备 33010602011771号