`
高军威
  • 浏览: 175920 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery-zTree树形菜单

阅读更多
Jquery-zTree 他实现的大部分的功能
使用json 作为数据源
所需jquery文件
jquery-1.4.4.min.js(或更高版本)
jquery.ztree.core-3.5.js
下面是简单的示例

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - checkbox</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">
		var setting = {
			check: {
				enable: true  //是否启用 复选框
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		var zNodes =[
			{ id:1, pId:0, name:"随意勾选 1", open:true}, //pId 的 值就是上一级的id值
			{ id:11, pId:1, name:"随意勾选 1-1", open:true},
			{ id:111, pId:11, name:"随意勾选 1-1-1"},
			{ id:112, pId:11, name:"随意勾选 1-1-2"},
			{ id:12, pId:1, name:"随意勾选 1-2", open:true},
			{ id:121, pId:12, name:"随意勾选 1-2-1"},
			{ id:122, pId:12, name:"随意勾选 1-2-2"},
			{ id:2, pId:0, name:"随意勾选 2", open:true},
			{ id:21, pId:2, name:"随意勾选 2-1"},
			{ id:22, pId:2, name:"随意勾选 2-2", open:true},
			{ id:221, pId:22, name:"随意勾选 2-2-1"},
			{ id:222, pId:22, name:"随意勾选 2-2-2"},
			{ id:23, pId:2, name:"随意勾选 2-3"}
		];
		
	
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			setCheck();
		});
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<h1>Checkbox 勾选操作</h1>
<h6>[ 文件路径: excheck/checkbox.html ]</h6>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
</BODY>
</HTML>

效果图



API下载里面有很多实用的demo
0
2
分享到:
评论
5 楼 archy123 2013-01-17  
高军威 写道
archy123 写道
高军威 写道
  是的,自己刚学做个笔记而已

一直在用,功能不错。祝学习愉快!


用这个和数据库交互起来 是不是 很爽啊!


主要还是功能不错。性能也可以!
4 楼 高军威 2013-01-16  
archy123 写道
高军威 写道
  是的,自己刚学做个笔记而已

一直在用,功能不错。祝学习愉快!


用这个和数据库交互起来 是不是 很爽啊!
3 楼 archy123 2013-01-16  
高军威 写道
  是的,自己刚学做个笔记而已

一直在用,功能不错。祝学习愉快!
2 楼 高军威 2013-01-16  
  是的,自己刚学做个笔记而已
1 楼 archy123 2013-01-16  
额。。没了吗。。如果只是这些
www.ztree.me中更详细。

相关推荐

Global site tag (gtag.js) - Google Analytics