JQuery Treeview插件 异步加载例子
http://www.agoit.com/upload/attachment/141217/65acdd92-c4ea-304a-94c7-a6ac014cc5f9.jpg
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的idif($("#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+"\")'>"+"<input id='"+json+"' type='radio' name='groups' /><span>"+json+"</span>"+"&nbsp;("+json+")";if(json>0){//存在子节点，则插入空ul以接下一级节点 此列存放子节点数html+="<ul id='ul_"+json+"' 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 > //单击节点的时候执行js<span>${item }&nbsp;(${item})</span> //此插件特性，默认span被单击时对节点进行Toggle操作<c:if test="${item>0}">//item这个字段存子节点数，如果优子节点，则放一个空的ul以便异步加载子节点<ul id="ul_${item }" 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>
页:
[1]