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 οnclick='extend(\""+json[obj][0]+"\")'>" +"<input id='"+json[obj][0]+"' type='radio' name='groups' /><span>"+json[obj][1]+"</span>"+" ("+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 οnclick="extend('${item[0]}')" > //单击节点的时候执行js <span>${item[1] } (${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>