2、ztree+springmvc

最新推荐文章于 2021-03-02 12:44:40 发布

nickfover

最新推荐文章于 2021-03-02 12:44:40 发布

阅读量912

点赞数

本文链接：https://blog.csdn.net/nickfover/article/details/41891037

版权

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

ztree.me

http://www.ztree.me/v3/main.php#_zTreeInfo

1、标准的json数据：

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> 
	<link rel="stylesheet" href="css/demo.css" type="text/css"> 
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>   
	<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script> 
	<script language="JavaScript">  
	var setting = {	};
	var zNodes =[
		{ name:"父节点1 - 展开", open:true,
			children: [
				{ name:"父节点11 - 折叠",
					children: [
						{ name:"叶子节点111"},
						{ name:"叶子节点112"},
						{ name:"叶子节点113"},
						{ name:"叶子节点114"}
					]},
				{ name:"父节点12 - 折叠",
					children: [
						{ name:"叶子节点121"},
						{ name:"叶子节点122"},
						{ name:"叶子节点123"},
						{ name:"叶子节点124"}
					]},
				{ name:"父节点13 - 没有子节点", isParent:true}
			]},
			{ name:"父节点2- 没有子节点", isParent:true}

	];

	$(document).ready(function(){
		$.fn.zTree.init($("#tree"), setting, zNodes);
	});
</script>  
  </head>
  <body>
     <div>  
        <ul id="tree" class="ztree"></ul>  
    </div>  
  </body>

将数据放在 zNodes 中，通过页面自启 $(document).ready(function(方法加载json数据；这里是严格的json格式；

2，通过id,pId设置树枝位置(pId指父节点id)：

	var setting = {
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =[
			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
			{ id:11, pId:1, name:"子节点11"},
			{ id:12, pId:1, name:"子子节点12"}
			
		];

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

3、带url的树枝：

var zNodes =[
			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
			{ id:2, pId:1, name:"zTree Home", url:"http://www.baidu.com"},
			{ id:3, pId:1, name:"zTree in Google", url:"http://code.google.com/p/jquerytree/", target:"_blank"},
			{ id:4, pId:1, name:"zTree in Iteye", url:"http://ztreeapi.iteye.com/", target:"_blank"},
			{ id:5, pId:1, name:"Nothing...", url:"", target:"_blank", click:"alert('我是不会跳转的...');"}
			];

url 属性用于设置页面跳转的路径;target 属性用于设置页面跳转的窗口目标;click 属性用于设置简单的 onClick 事件

4、异步加载数据，这是使用最多的：

我这里使用springmvc,使用异步加载，必须设置 setting.async 中的相关属性:enable,url,autoParam

dataFilter：是对ajax返回数据的验证，autoParam[]异步加载时，将属性名称作为参数，制作成 Array 即可，如autoParam: ["id", "pId"]；

#未完

nickfover

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、ztree+springmvc

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件兼容 IE、FireFox、Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成和 Ajax 异步加载两种方式支持多种事件响应及反馈支持 Tree 的节点移动、编辑、删除支持任意更换皮肤 / 个性化图标（依靠css）支持极其灵活的 check
复制链接

扫一扫