JQuery Treeview插件异步加载例子

最新推荐文章于 2018-10-15 02:45:09 发布

最新推荐文章于 2018-10-15 02:45:09 发布 · 323 阅读

文章标签：

#jQuery #json #JavaScript #CSS #HTML #ViewUI

本文介绍了一个基于 jQuery 的 TreeView 插件使用示例。通过该插件可以轻松实现可折叠的树形菜单，并支持异步加载子节点。文章展示了如何配置插件并实现异步加载功能。

jQuery plugin: Treeview

插件地址：http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="<c:url value='/js/jquery-plugin/jquery.treeview.css'/>" rel="stylesheet" type="text/css" />

<script type="text/javascript">
/****************操作*******************/
//展开节点，异步加载子节点子节点格式为json串数组[{id:,name:},{id:,name:},{id:,name:}]
function extend(menuId){ //menuId 为父节点ul的id
	if($("#ul_"+menuId).html()=="")   //如果存在  单击的时候不增加
	{	
		$.getJSON("<c:url value='/html/manage/tree.ao?method=extendTree'/>",  //从后台获取json数组
			{data:new Date(),pid:menuId},function(json){
			
		var html = "";  //准备插入的内容
		if($(json).size()>0){
		for(var obj in json)//拼html串用于展示子节点
		{
			if(obj!='indexOf'){
			html+="<li onclick='extend(\""+json[obj][0]+"\")'>"
				+"<input id='"+json[obj][0]+"' type='radio' name='groups' /><span>"+json[obj][1]+"</span>"+"&nbsp;("+json[obj][2]+")";
			if(json[obj][2]>0){//存在子节点，则插入空ul以接下一级节点 此列存放子节点数
				html+="<ul id='ul_"+json[obj][0]+"' style='display:none' class='er_list' ></ul>"
			}	
			html+="</li>";
				}
		}
	var branches=$(html).prependTo("#ul_"+menuId)  //将拼装的字符串插入到父节点中
		$("#ul_"+menuId).treeview();//展开该节点
		}
		});
	}
}
</script>
</head>
<body>
<!--  JSP操作  -->
<div>
	<div class="gzsht_tcxn" style="height: 218px; overflow: auto;" >
		<ul id="groupEdit">
			<logic:iterate id="item" name="userForm" property="groups" indexId="index">
				<li   onclick="extend('${item[0]}')" >      //单击节点的时候执行js
					<span>${item[1] }&nbsp;(${item[2]})</span> //此插件特性，默认span被单击时对节点进行Toggle操作
						<c:if test="${item[2]>0}">  //item[2]这个字段存子节点数，如果优子节点，则放一个空的ul以便异步加载子节点
							<ul id="ul_${item[0] }" class='er_list'></ul> //便于从数据库中找到页面上节点，用记录id和前缀命名
						</c:if>
				</li>
			</logic:iterate>
		</ul>
	</div>
	</div>

script type="text/javascript">
$("#groupEdit").treeview({animated:"fast"});
extend('<%=ConstantEnumDefine.MANAGE_ID.全国.getValue()%>')  //初始化，将根节点展开

</script>
</body>

</html>