怎样利用java在页面实现树形结构图

Question

目前我手头有一张表表内有  节点ID  父节点ID   节点类型  节点名称  节点对应url  节点tip 这几个字段数据大概是这样L01 ROOT_MENU Folder 营销管理   营销管理
L0101 L01 Document 销售机会管理 chance.do?o=toList 销售机会管理
L0102 L01 Document 客户开发计划 plan.do?o=toList 客户开发计划
L02 ROOT_MENU Folder 客户管理   客户管理
L0201 L02 Document 客户信息管理 customer.do?o=toList 客户信息管理
L0202 L02 Folder 客户流失管理 lost.do?o=toList 客户流失管理
L03 ROOT_MENU Folder 服务管理   服务管理
L0301 L03 Document 服务创建 service.do?o=toAdd 服务创建
L0302 L03 Document 服务分配 service.do?o=toDispatch 服务分配
L0303 L03 Document 服务处理 service.do?o=toDealList 服务处理
L0304 L03 Document 服务反馈 service.do?o=toFeedbackList 服务反馈
L0305 L03 Document 服务归档 service.do?o=toArchList 服务归档
L04 ROOT_MENU Folder 统计报表   统计报表
L0401 L04 Document 客户贡献分析 contrRpt.do?o=toList 客户贡献分析
L0402 L04 Document 客户构成分析 consRpt.do?o=toList 客户构成分析
L0403 L04 Document 客户服务分析 svrRpt.do?o=toList 客户服务分析
L0404 L04 Document 客户流失分析 lostRpt.do?o=toList 客户流失分析
L05 ROOT_MENU Folder 基础数据   基础数据
L0501 L05 Document 数据字典管理 dict.do?o=toList 数据字典管理
L0502 L05 Document 查询产品信息 product.do?o=toList 查询产品信息
L0503 L05 Document 查询库存 storage.do?o=toList 查询库存
L06 ROOT_MENU Folder 权限管理   权限管理
L0601 L06 Folder 用户管理 user.do?o=toList 用户管理
L0602 L06 Folder 角色管理 role.do?o=toList 角色管理有些乱  呵呵  大家凑合下
现在我想做一个查询   获得这些数据  然后再到jsp页面创建一个树形结构图父节点下包含子节点  然后显示节点名称  把相应的跳转url也设置好  因为之前没有做过 完全没头绪   不知道谁能帮个忙o ?

Answer 1

你针对这个表写个实体类，写出它的dao，然后取出所有数据放到List，把list放到request.setAttribute("all");在请求到的页面中用getAttribute取出，然后用js写DOM模型表示出来，js中的引用可以直接使用java的数据，例如：<%
List l = (List)request.getAttribute("all");
for(int i==0;i<l.size();i++){
  实体类 a = ( 实体类)l.get(i);
%>
var url = <%=a.get属性()%>
<%
}
%>
DOM模型可以使js更好的控制我们想要实现的效果，不好意思，我说的有点乱，不知道楼主明白没....

Answer 2

http://webfx.eae.net/dhtml/xloadtree/xloadtree.html把数据组装成XML就行了，上面地址中有例子和下载

Answer 3

用TableTree4J就能很容易的实现function initdata(){
menuajax.getmenus(createtable);
}
// 创建模块显示部分
function createtable(data){
gridTree=new TableTree4J("gridTree","../menu/");
gridTree.tableDesc="<table border=\"1\" class=\"GridView\" width=\"98%\" id=\"table1\""
+"cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" "
+" align=\"center\" bordercolordark=\"#C0C0C0\" bordercolorlight=\"#C0C0C0\" >";
var headerDataList=new Array("模块名称","模块URL","类别","所属上级菜单","是否新窗口打开","序号","编辑 删除");
var widthList=new Array("25%","22%","10%","15%","12%","6%");
gridTree.setHeader(headerDataList,-1,widthList,true,"","","","","");
gridTree.gridHeaderColStyleArray =
new Array("centerClo","centerClo","centerClo","centerClo","centerClo","centerClo","centerClo");
gridTree.gridDataCloStyleArray =
new Array("centerClo","centerClo","centerClo","centerClo","centerClo","centerClo","centerClo");
for(var i=0;i<data.length;i++){
var dataList=new Array(data[i].menuname,
data[i].url==null?"&nbsp":data[i].url,
data[i].parentid==-1?"一级菜单":"二级菜单",
data[i].parentname == null ?"&nbsp;":data[i].parentname,
data[i].newwindow==0?"是":"否",
data[i].menuno,
"&nbsp;&nbsp;<a href='javascript:void(0)' onclick='editmenu("
+data[i].menuid+","+i+")'>"
+"<img style='border:0px' src='../../images/bj.gif'"
+" width='16' height='16'/></a>&nbsp;&nbsp;"+
"&nbsp;&nbsp;<a href='javascript:void(0)' onclick='delmenu("
+data[i].menuid+")'><img style='border:0px' "
+"src='../../images/shanchu.gif' width='16' height='16' /></a>&nbsp;&nbsp;");
gridTree.addGirdNode(dataList,data[i].menuid,data[i].parentid,null,i,"#",null,"","",null,null,null);
}
gridTree.printTableTreeToElement("gridTreeDiv");
}

Answer 4

有很多实现，可以用Xtree，dtree等，下一个jar包，找个例子一套就成了，不用自己写的

Answer 5

用TableTree4J怎么加上复选框的啊？就是选中上级，下级全部选中，选中下级，所有上级全部选中！