jquery-zTree树形菜单

最新推荐文章于 2020-11-06 23:25:02 发布

iteye_20151

最新推荐文章于 2020-11-06 23:25:02 发布

阅读量93

点赞数

分类专栏： jquery 文章标签： jquery zTree ViewUI

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

效果图
[img]http://dl.iteye.com/upload/picture/pic/122658/049fe9f7-f480-36b4-83c4-0b70e79ec28d.jpg[/img]

API下载里面有很多实用的demo

iteye_20151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-zTree树形菜单

Jquery-zTree 他实现的大部分的功能使用json 作为数据源所需jquery文件jquery-1.4.4.min.js（或更高版本）jquery.ztree.core-3.5.js下面是简单的示例[code="java"] ZTREE DEMO - checkbox var setting = {...
复制链接

扫一扫

专栏目录