Tree菜单树模型

第一：数据表

<table width="100%" border="1"  cellpadding="0"  cellspacing="0"  bgcolor="yellow"  class="main_table">

    <tr class="main_head">
<th>序号</th>
<th>地图名称</th>
<th>地图别称</th>
<th>地图描述</th>
<th>地图操作</th>
     </tr>
  <c:choose>
  <c:when test="${not empty menuList}">
       <c:forEach items="${menuList}" var="menu" varStatus="vs">              // 菜单项
     <tr class="main_info" id="tr${menu.menu_id }">                             // id 标识每一行 数据
  <td align="center">${vs.index+1}</td>                                      // 索引根据遍历 自增加 +1
  <td align="center">${menu.menu_name }</td>   
  <td align="center">${menu.menu_code }</td>
  <td align="center">${menu.menu_url }</td>
  <td align="center">
       <span onclick="openClose(${menu.menu_id },this,${vs.index})">展开</span> | 
       <span onclick="editmenu(${menu.menu_id })">修改</span> |

                      <span onclick="delmenu(${menu.menu_id },true)">删除</span>

                  </td>

      </tr>
   </c:forEach>
     </c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="4">没有相关数据</td>
        </tr>
</c:otherwise>

 </c:choose>

*******************************************************************************************************

第二： JS+ JQuery

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="js/lhgdialog/lhgdialog.min.js?t=self&s=areo_blue"></script>
<script type="text/javascript">

     function openClose(menu_id,curObj,trIndex){                                       // 点击时传入3个参数
var txt = $(curObj).text();                                                     // 点击的组件 <Span> -点击了哪一个组件
if(txt=="展开"){
$(curObj).text("折叠");
//点击 行后面添加新的一行：
                              $("#tr"+menu_id).after("<tr class='main_info' id='tempTr"+menu_id+"'><td colspan='5'>数据载入中</td></tr>");
if(trIndex%2==0){     
           $("#tempTr"+menu_id).addClass("main_table_even");                 // 偶数行添加样式
}
                                                                                                          // 注解@ResponseBody返回
var url = "menu/findPageMenusObj.action";                                   // 异步请求返回 menuList 
$.get(url,                                                                                           // 根据 parent_id 找父类
   {
menu_id : menu_id
   },
   function(data){
if(data.length>0){
var html = "";
$.each(data,function(i){                                                   // 根据返回结果遍历
        html = "<tr style='height:24px;line-height:24px;' name='subTr"+menu_id+"'>";
html += "<td></td>";
html += "<td><span style='width:80px;display:inline-block;'></span>";
if(i==data.length-1)
html += "<img src='images/joinbottom.gif'  style='vertical-align: middle;'/>";
else
html += "<img src='images/join.gif' style='vertical-align: middle;'/>";

html+=

                                                      "<span style='width:100px;text-align:left;display:inline-block;'>"+this.menu_name+"</span>";

html += "</td>";
html += "<td align='center'>"+this.menu_code+"</td>";
html += "<td align='center'>"+this.menu_url+"</td>";

html += "<td align='center'>

                                                      <span onclick='editmenu("+this.menu_id+")'>修改</span> |

                                                       <span onclick='delmenu("+this.menu_id+",false)'>删除</span></td>";

html += "</tr>";
$("#tempTr"+menu_id).before(html);
});
$("#tempTr"+menu_id).remove();
if(trIndex%2==0){
$("tr[name='subTr"+menu_id+"']").addClass("main_table_even");       //样式
}

}else{
$("#tempTr"+menu_id+" > td").html("没有相关数据");
}
},"json");
}else{
$("#tempTr"+menu_id).remove();
$("tr[name='subTr"+menu_id+"']").remove();
$(curObj).text("展开");
}
}

</script>

</table>

*******************************************************************************************************

第三：效果图片