JQuery Treeview插件异步加载例子

Nullin · 发表于 2013-2-7 19:14:13

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[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><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[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>

		自动登录	找回密码
密码			立即注册

JQuery Treeview插件 异步加载例子

浏览过的版块

JQuery Treeview插件异步加载例子