zTree:一个依靠 jQuery 实现的多功能 “树插件”

官方网站:

http://www.treejs.cn/v3/main.php#_zTreeInfo

使用方式:

步骤1、文件准备

将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录,并且保证相对路径正确

步骤 2、编写 html 页面

按照以下代码,制作 html 页面,访问试试看吧,注意:

1) "<!DOCTYPE html>" 是必需的

2) zTree 的容器 className 别忘了设置为 "ztree"

3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的。

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<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.core-3.x.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"test1", open:true, children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
      initTree: function() {//初始化权限
var viewSelf = this;
$.fn.zTree.init($("#treeDemo"), {
async: {
enable: true,
url:$$ctx + "/menuMng/findFirstMenuList"
},
data: {
simpleData: { enable: true, idKey: "id", pIdKey: "pid"},
key: { name: "name" }
},
check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }},
callback: {
onAsyncSuccess: function() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
// treeObj.expandAll(true);//全不展开
}
}
}); $.fn.zTree.init($("#treeDemo_dashboard"), {
async: {
enable: true,
url:$$ctx + "/menuMng/findDashboardMenuList"
},
data: {
simpleData: { enable: true, idKey: "id", pIdKey: "pid"},
key: { name: "name" }
},
check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }},
callback: {
onAsyncSuccess: function() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo_dashboard");
// treeObj.expandAll(true);//全不展开
}
}
}); },
上一篇:e.currentTarget


下一篇:Android中使用开源框架Fresco处理图片