Z-tree实例（一）——简单实例

wjiaoling136

浏览: 931614 次
性别:
来自: 北京

最近访客更多访客>>

747017186

chajinglong

1017401036

温开水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

z-tree

最近弄的项目中有用到z-tree就趁机研究一下，都是一些官方的小例子，这里记录一下，以后用的时候可以直接用。

1、标准模式：基本页面和引入的文件与官网demo相同：

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>z-tree实例，标准模式</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
	
<style type="text/css">
.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>

<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
	<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>

Z-tree结构中用到的JS:

<SCRIPT type="text/javascript">
	var setting = {
		async:{
			
		},
		edit: {
		     //editNameSelectAll:true,
			enable:false,//是否能够编辑，默认为false，设置为true时表示可以编辑，false不能编辑，不能重命名、删除和添加
			removeTitle:"删除",//删除按钮提示信息
			renameTitle:"重命名",//重命名按钮提示信息
			showRemoveBtn:true,//表示 显示 / 隐藏 删除按钮,默认为true
			showRenameBtn:true//表示 显示 / 隐藏 重命名按钮,默认为true
			},
			data: {
				keep: {
					parent: true,//true / false 分别表示 锁定 / 不锁定 父节点属性,如果设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态，否则就是基本节点状态。
					leaf:false//true / false 分别表示 锁定 / 不锁定 叶子节点属性,默认为false,如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点。

				},
				key: {
					url: "xUrl"
				}
			},
			view:{
				/*
				fontCss:{//个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
					color:"red", //设置全部字体为红色
					fontSize:"18px",//修改字体大小无效，因为css文件中有相关设置，需要修改css文件，且其他设置如行高、图片大小也需要进行相应设置，比较麻烦
					fontWeight:"bold"
				},
				*/
				fontCss:getFont,//字体样式函数
				nameIsHTML: true,//设置 name 属性是否支持 HTML 脚本,默认为false
				showTitle:true,//显示或隐藏提示信息，默认为true
				showIcon:showIconForTree,//显示或隐藏图标，默认为true
				showLine:true//显示或隐藏连接线，默认为true
			}
		};

		var zNodes =[
			{ name:"父节点1 - 展开", open:true,
			iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png",//打开时使用图标
			iconClose:"../../../css/zTreeStyle/img/diy/1_close.png",//关闭时使用图标（两个属性必须一起使用，否则无效）
				children: [
					{ name:"父节点11 - 折叠", iconSkin:"pIcon01",//iconSkin：自定义图标
						children: [
							{ name:"叶子节点111"},
							{ name:"叶子节点112"},
							{ name:"叶子节点113"},
							{ name:"叶子节点114"}
						]},
					{ name:"父节点12 - 折叠",
					font:{"font-weight":"bold","font-style":"italic","color":"red"},//自定义样式
						children: [
							{ name:"叶子节点121"},
							{ name:"叶子节点122"},
							{ name:"叶子节点123"},
							{ name:"叶子节点124"}
						]},
					{ name:"<span style='color:blue;margin-right:0px;font-weight:bold'>父节点13</span><span style='color:red;margin-right:0px;font-weight:bold'>- 没有子节点</span>"//名称设置为html脚本，前提条件是view中需要设置nameIsHTML的属性为true，否则无效
					, isParent:true,
					}
				]},
			{ name:"父节点2 - 折叠",
				icon:"../../../css/zTreeStyle/img/diy/3.png",//打开关闭时图标相同
				children: [
					{ name:"父节点21 - 展开", open:true,
						children: [
							{ name:"叶子节点211"},
							{ name:"叶子节点212"},
							{ name:"叶子节点213"},
							{ name:"叶子节点214"}
						]},
					{ name:"父节点22 - 折叠",
						children: [
							{ name:"叶子节点221"},
							{ name:"叶子节点222"},
							{ name:"叶子节点223"},
							{ name:"叶子节点224"}
						]},
					{ name:"父节点23 - 折叠",
						children: [
							{ name:"叶子节点231"},
							{ name:"叶子节点232"},
							{ name:"叶子节点233"},
							{ name:"叶子节点234"}
						]}
				]},
			{ name:"父节点3 - 没有子节点", isParent:true}

		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});

	//字体样式修改
	function getFont(treeId, treeNode)  {
		//有样式使用原来的样式，没样式使用新样式
		//若使用新样式，1级节点蓝色并加粗，其他的为常规黑色
		return treeNode.font ? treeNode.font : 
		treeNode.level == 0 ? {"color":"blue","font-weight":"bold"} : {'color':'black'};
		;
	}
	//图标显示情况修改:三级节点不显示图标
	function showIconForTree(treeId,treeNode){
		return treeNode.level!=2;//level的值从0开始
		//return !treeNode.isParent;父级节点不显示图标
	}
		
</SCRIPT>

2、简单模式：

<SCRIPT type="text/javascript">
	var setting = {
		data: {
			simpleData: {
				enable: true,//是否使用简单数据模式，默认为false,如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
				idKey:"id",//节点数据中保存唯一标识的属性名称，默认值id，开启简单数据模式时有效
				pIdKey:"pId",//节点数据中保存其父节点唯一标识的属性名称。默认值pId，开启简单数据模式时有效
				rootPId:0//用于修正根节点父节点数据，即 pIdKey 指定的属性值,默认值为null，开启简单数据模式时有效
			}
		}
	};

	var zNodes=[
	{"id":1,"pId":0,"name":"河北",open:true,isParent:true,
	 //节点链接的目标URL,类似于A标签中href属性，编辑模式 (setting.edit.enable = true) 下此属性功能失效（在非简单模式下使用时好像也无效）
        url:"http://www.baidu.com",
        //设置点击节点后在何处打开 url。[treeNode.url 存在时有效]。同超链接target属性: "_blank", "_self"或 其他指定窗口名称省略此属性，则默认为 "_blank"(在新窗口中打开)
	target:"_blank"
	},
	{"id":2,"pId":1,"name":"石家庄",open:true},
	{"id":21,"pId":2,"name":"化皮镇"},
	{"id":22,"pId":2,"name":"承安镇"},
	{"id":23,"pId":2,"name":"正莫镇"},

	{"id":3,"pId":1,"name":"邯郸",url:"http://www.baidu.com",target:"_self"},
	{"id":4,"pId":1,"name":"保定"},
	{"id":5,"pId":1,"name":"沧州"},

	{"id":6,"pId":0,"name":"河南",open:true,isParent:true},
	{"id":7,"pId":6,"name":"郑州"},
	{"id":8,"pId":6,"name":"开封"},
	{"id":9,"pId":6,"name":"洛阳"},
	{"id":10,"pId":6,"name":"南阳"},

	{"id":11,"pId":0,"name":"山东",open:false,isParent:true},
	{"id":12,"pId":11,"name":"济南"},
	{"id":13,"pId":11,"name":"济宁"},
	{"id":14,"pId":11,"name":"淄博"},
	{"id":15,"pId":11,"name":"德州"},

	{"id":16,"pId":0,"name":"山西",open:false,isParent:true},
	{"id":17,"pId":16,"name":"太原"},
	{"id":18,"pId":16,"name":"大同"},
	{"id":19,"pId":16,"name":"朔州"},
	{"id":20,"pId":16,"name":"阳泉"}
	]

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});
</SCRIPT>

分享到：

z-tree实例（二）——异步加载 | SQL Server中的Datediff函数

2015-05-07 11:15
浏览 6176
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Z-tree实例（一）——简单实例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Z-tree实例（一）——简单实例

评论

发表评论

相关推荐

Z-tree实例（六）——连接线、图标、字体样式

Z-tree实例（五）——复选框

Z-tree实例（四）——父节点展开、折叠

Z-tree实例（三）——callback与重新加载、追加

z-tree实例（二）——异步加载

最近访客更多访客>>