zTree入门

zTree 简介

• zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
• zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载。
• 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀。
• 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器。
• 支持 JSON 数据。
• 支持静态 和 Ajax 异步加载节点数据。
• 支持任意更换皮肤 / 自定义图标（依靠css）。
• 支持极其灵活的 checkbox 或 radio 选择功能。
• 提供多种事件响应回调。
• 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟。
• 在一个页面内可同时生成多个 Tree 实例。
• 简单的参数配置实现 灵活多变的功能。

zTree基本使用

一. js/css导入

下载地址

<!-- 样式文件  -->
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<!-- js核心包 -->
<!--  zTree v3.x 有 3 个 js 文件，一个 核心包 ( jquery.ztree.core-3.x.js )，两个扩展包 -- 复选框功能包 ( jquery.ztree.excheck-3.x.js ) & 编辑功能包 ( jquery.ztree.exedit-3.x.js )-->
<script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>

二、编写html页面

页面创建zTree容器，容器 className 设置为 “ztree”。

<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>

初始化zTree

/**
 * setting 配置 
 */
var setting = {
	view: {
		addDiyDom: null, //用于在节点上固定显示用户自定义控件,默认null.
       	dblClickExpand: false,//双击节点 切换 / 不切换 展开状态,默认true.
       	showLine: true,//设置 zTree 是否显示节点之间的连线,默认值：true
       	fontCss:{'color':'black','font-weight':'bold'},//个性化文字样式
       	selectedMulti: true //设置是否允许同时选中多个节点,默认值true.
	},
    check:{//使用此属性需要引入excheck-3.x.js扩展包
    	/** 勾选 checkbox 对于父子节点的关联关系。
    	 *	JSON说明：
      	 *		Y 属性定义 checkbox 被勾选后的情况； 
      	 *		N 属性定义 checkbox 取消勾选后的情况； 
      	 *		"p" 表示操作会影响父级节点； 
      	 *		"s" 表示操作会影响子级节点。
      	 *		默认值：{ "Y": "ps", "N": "ps" }
   	     */
       chkboxType: { "Y": "ps", "N": "ps" }，
       chkStyle: "checkbox", 	//勾选框类型(checkbox 或 radio）,默认值："checkbox"
       enable: true 	//是否显示勾选框
    },
    edit:{//使用此属性需要引入exedit-3.x.js扩展包
         enable: true, //设置 zTree 是否处于编辑状态,默认值: false.
         editNameSelectAll: true, //节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态,默认值: false
         showRemoveBtn : true,//设置是否显示删除按钮,默认值：true.
         showRenameBtn : true,//设置是否显示编辑名称按钮,默认值：true.
         removeTitle : "remove",//删除按钮的 Title 辅助信息,默认值："remove".
         renameTitle : "rename"//编辑名称按钮的 Title 辅助信息,默认值："rename".
     },
     data: {
         simpleData: {//简单数据模式
             enable:true, //是否采用简单数据模式 (Array),默认值: false.
             idKey: "id", //节点数据中保存唯一标识的属性名称,默认值："id".
             pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称,默认值："pId".
             rootPId: null //用于修正根节点父节点数据，即 pIdKey 指定的属性值,默认值："null ".
         }
     },
     callback: { //回调函数
          beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
     }
};

/** 
 * treeNode 节点数据 
 */
var zTreeNodes = [
	{
		"name":"网站导航",	//节点名称
		"open":true,		//记录 treeNode 节点的 展开 / 折叠 状态。
		"children": [		//节点的子节点数据集合。
			{ 
				"name":"google",	 //节点名称
				"url":"http://g.cn", //节点链接的目标 URL
				"target":"_blank" 	 //设置点击节点后在何处打开url。
			}
		]
	}
];
	
/**
 *	ztree初始化   
 *	@param: $("#treeDemo")  zTree容器
 *	@param: setting  zTree 的配置数据
 *	@param: zTreeNodes  zTree 的节点数据
 */
$.fn.zTree.init($("#treeDemo"), setting, zTreeNodes);