页面为jsp，用代码实现动态在页面上面构建一个树，怎么做啊。给关键代码

初学，请给中文说明

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script>
setTreeImg("dark");
if (document.getElementById) {
<%
  Subject rootSubject=null;
  String caption=null,url="";
  for(int i=0;i<subjectList.size();i++){
    Subject sub=(Subject)subjectList.get(i);
    caption=sub.getCateCaption();
    if (i==0){
      rootSubject=sub;
%>
  var tree<%=sub.getTreeId()%>=new WebFXTree('<%=caption%>','','classic');
<%
      continue;
    }
    if (sub.APPTYPE.equalsIgnoreCase("portlet")){
      String portletId=sub.extinfoDp.getStringValue("ep_Portal");
      url=(XmlTools.isEmpty(portletId))?"":"javascript:switchEPPge(\\'"+portletId+"\\',\\'portlet\\')";
    }else if (sub.APPTYPE.equalsIgnoreCase("epview")){
      String viewId=sub.extinfoDp.getStringValue("epview");
      url=(XmlTools.isEmpty(viewId))?"":"javascript:switchEPPge(\\'"+viewId+"\\',\\'epview\\')";
    }else if (sub.APPTYPE.equalsIgnoreCase("cencms")){
      if (!XmlTools.isEmpty(sub.extinfoDp.getStringValue("categoryMainPage_gb"))){
  String DpUrl=sub.extinfoDp.getStringValue("categoryMainPage_gb");
          if (DpUrl.indexOf("http://")==-1)
             DpUrl=metainfoviewID+DpUrl;
          url="javascript:parent.setInfoList(\\'"+DpUrl+"\\')";
      }else{
        if (sub.TYPE.equalsIgnoreCase("normal") && sub.PRIVILEGE>0){
          url="javascript:parent.setCategoryValue(\\'"+sub.getCateCode()+"\\')";
        }else if (sub.PRIVILEGE<0){
          url="";
          //if (!sub.isParent)
          //  continue;
        }else if (sub.PRIVILEGE==0){
          url="javascript:parent.infoList(\\'"+sub.getCateCode()+"\\')";
        }
      }
    }else if (sub.APPTYPE.equalsIgnoreCase("jetspeed")){
  String portalname=sub.extinfoDp.getStringValue("portalname");
    url="javascript:parent.Previewjetspeed(\\'"+portalname+"\\')";
}
%>
  var tree<%=sub.getTreeId()%>=new WebFXTreeItem('<%=caption%>','<%=url%>');
  tree<%=sub.getTParent()%>.add(tree<%=sub.getTreeId()%>);
<%
  }
%>
}
document.write(tree<%=rootSubject.getTreeId()%>);
if(tree<%=rootSubject.getTreeId()%>.ishavesubitem()=="yes"){
  tree<%=rootSubject.getTreeId()%>.expand();
}
</script>
这个导航树是在CSDN网友“meizz”提供的MzTreeView1.0基础上修改而来。
MzTreeView1.0 可以在 http://www.meizz.com/Web/Article/211/436.htm 获得。
to:zhkchi(火焰神)给一个比较简单的树，比如只有二层，3、4个节点的树的例子就好了，主要说明它用了那些类，这些类是如何工作，类中的方法各是什么意思。多谢！！！
lz,这是javascript的东西，与jsp关系不是特别大
你搜索下应该有很多的了
ajax中很多框架都有这些功能的
建议用
主要使用他做带有复选框的树，一次性从数据库得到数据，产生js代码，送到浏览器执行。复选框可以直接写到标题里面，注意复选框的id命名规则，合理的命名可以处理一些操作（比如，取消上级，则取消所有下级）。最后就是对一次读取数据库可以采用路径发和封闭法一次性读取树的所有数据，避免递归方式。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Tree Widget Test (dynamic node creation)</title><script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>
<script type="text/javascript" src="../../../dojo.js"></script>
<script type="text/javascript"> dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeNodeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.hostenv.writeIncludes();
</script>
<script type="text/javascript"> dojo.addOnLoad(function(){  var controller = dojo.widget.createWidget("TreeBasicControllerV3");
  var tree = dojo.widget.createWidget("TreeV3", {listeners:[controller.widgetId]});

  document.body.appendChild(tree.domNode);  var rootNode = dojo.widget.createWidget("TreeNodeV3", {title: "<input type='checkbox' class='TreeIcon' />Root Node", tree: tree.widgetId});

  tree.addChild(rootNode);
  var node1 = dojo.widget.createWidget("TreeNodeV3", {title: "Node 1", tree: tree.widgetId});
  rootNode.addChild(node1);
  var node2 = dojo.widget.createWidget("TreeNodeV3", {title: "Node 1.2", tree: tree.widgetId});
  node1.addChild(node2, null, "after");
  rootNode.addChild(dojo.widget.createWidget("TreeNodeV3", {title: "Node 2", tree: tree.widgetId}));  var node3 = dojo.widget.createWidget("TreeNodeV3", {title: "Node 3<br>multiline", tree: tree.widgetId});
  rootNode.addChild(node3);
  var node3_1 = dojo.widget.createWidget("TreeNodeV3", {title: "Node 3.1", tree: tree.widgetId});
  node3.addChild(node3_1);
  node3_1.addChild(dojo.widget.createWidget("TreeNodeV3", {title: "Node 3.1.1", tree: tree.widgetId}))
  // Add some nodes the first element (rather than the last element) just for testing
  for(var i=1;i<5;i++) {
   node1.addChild(dojo.widget.createWidget("TreeNodeV3", {title: "Node 1."+i, tree: tree.widgetId}));
  }  tree.addChild(dojo.widget.createWidget("TreeNodeV3", {title: "Root Node 2", tree: tree.widgetId})); });</script>
</head>
<body><h4>Create tree programmatically</h4>
</body>
</html>
另外这里还有篇文章，你参考下了
http://blog.csdn.net/yanchunlili/archive/2006/09/24/1271407.aspx
to:jackson416(DD | 问世间小裤衩是何物,为何.....) MzTreeView1.0这个控件如何使用啊？它需要安装吗
一种方法：下面是一段动、静态定义树的方法，用的是梅花雪脚本控件： MzTreeView1.0
控件下载地址：http://www.meizz.com/Web/Article/211/436.htm
注：她的控件下载后要重新下一个MzTreeView10.js文件，控件中的这个文件是个坏的。她下在有一个例子，可以通过例子给的地址：www.meizz.com/Web/Plugs/MzTreeView10.js 或者到csdn网上面去下载。csdn网就是用的她的树的控件。</head>
<body>
<script language="JavaScript"
  src="e:/MzTreeView10/MzTreeView10.js"></script>
<style>
A.MzTreeview
{
  font-size: 9pt;
  padding-left: 3px;
}
</style>
<script language="JavaScript">
  var tree = new MzTreeView("tree");  tree.icons["property"] = "property.gif";
  tree.icons["css"] = "collection.gif";
  tree.icons["book"]  = "book.gif";
  tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片  tree.setIconPath("e://MzTreeView10//"); //可用相对路径  tree.nodes["0_1"] = "text:我的根";
  tree.nodes["1_100"] = "text:代码示例; data:id=100";
  tree.nodes["1_200"] = "text:梅花雪脚本控件集; data:id=200";
  tree.nodes["1_310"] = "text:CSS; icon:css; data:id=310";
  tree.nodes["1_320"] = "text:DHTML; data:id=320";
  tree.nodes["1_300"] = "text:HTML; data:id=300";
  tree.nodes["1_400"] = "text:JavaScript; icon:book; data:id=400";
  tree.nodes["320_322"] = "text:属性; icon: property; data:id=322";
  tree.nodes["320_323"] = "text:方法; data:id=323";
  tree.nodes["320_324"] = "text:事件; icon:event; data:id=324";
  tree.nodes["320_325"] = "text:集合; data:id=325";
  tree.nodes["400_407"] = "text:对象; data:id=407";
  tree.nodes["400_406"] = "text:方法; data:id=406";
  tree.nodes["400_408"] = "text:运算符; data:id=408";
  tree.nodes["400_409"] = "text:属性; data:id=409";
  tree.nodes["407_1140"] = "text:Date; url:Article.asp; data:id=140";
  tree.nodes["406_1127"] = "text:toString; url:Article.asp; data:id=127";
  tree.nodes["408_1239"] = "text:||;  data:id=239; method:alert('节点响应:HTML方法：alert！');";    //调用html方法：alert
  tree.nodes["409_1163"] = "text:E;   data:id=163; method:myMethod('节点响应:调用自定义函数：myMethod！')";  //调用自定义函数：myMethod

  mytree(tree);//用方法动态定义“Tree”的子节点。
               //注：动态定义的方法要与 var tree = new MzTreeView("tree");它在同一个<script language="JavaScript">中！  //tree.nodes["1_500"]="text:动态节点; data:id=500";
  document.write(tree.toString());    //亦可用 obj.innerHTML = tree.toString();  function mytree(mytreevar){
   mytreevar.nodes["1_500"]="text:动态节点; data:id=500; method:myMethod('节点为动态定义！')";
   }
  function myMethod(str){
   alert(str);
   //top.fmyshow.myshow.value="从Tree窗口传来的值！";
   }
  </script>
</body>
</html>
MzTreeView 1.0在数据库库表里的字段名称：字段名字段的具体说明
id 节点ID（不可为0，可以是数字或字符）
parentId 本节点的父节点ID（若本节点已为根节点，此处填0）
text 节点的显示文本（一般不允许为空，不过有一种情况例外，即根节点，若根节点文本为空，这个根节点将不会在页面里显示）
hint 节点的说明注解
icon 节点的图标，MzTreeView 1.0允许每个节点拥有不同的图标（对应的名字在类里的icons和iconsExpand定义）
data 节点挂的数据，格式是 param=value&param=value&... url里?后的那串字符串格式，
url 每个节点允许拥有不同的链接，它为空或者为#时，树里这个节点的链接，点击将无反应
target 每个节点的链接允许在不同的target里打开，为空时取类里的默认值
method 点击该链接时所想触发的脚本语句
特注：每个字段值中不可有冒号：不可以换行引号酌情考虑应不与节点字符串的引号相冲突属性
MzTreeView 类的一些属性：属性名类型属性的具体说明
MzTreeView.nodes 集合服务器端给树指定数据源时数据存放的对象，具体存放格式如：
MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";

MzTreeView.url 地址字符串可读写，树缺省的URL，默认值是 #
MzTreeView.target 目标框架名可读写，树缺省的链接target，默认值是 _self
MzTreeView.name 字符只读，树的实例名，同树实例化时作为参数传入(大小写敏感)：
var Tree = new MzTreeView("Tree");
MzTreeView.currentNode 树节点只读，树当前得到焦点的节点对象
MzTreeView.icons 集合树所使用的所有图标存放
MzTreeView.iconsExpand 集合树里展开状态的图标存放
MzTreeView.colors 集合树里使用到的几个颜色存放 MzTreeView 在客户端的节点所拥有的属性：属性名属性的具体说明
node.id 数字文本，节点的ID
node.parentId 数字文本，节点对应的父节点ID
node.text 文本，节点的显示文本
node.hint 文本，节点的注释说明
node.icon 文本，节点对应的图标
node.path 文本，节点在树里的绝对路径：0_1_10_34
node.url 文本，该节点的 URL
node.target 文本，该节点链接的目标框架名
node.data 文本，该节点所挂载的数据
node.method 文本，该节点的点击对应处理语句
node.parentNode 对象，节点的父节点对象
node.childNodes 数组，包含节点下所有子节点的数组
node.sourceIndex 文本，服务器给予的数据里对象的 parentId_nodeId 的组合字符串
node.hasChild 布尔值，指该节点是否有子节点
node.isLoad 布尔值，本节点的子节点数据是否已经在客户端初始化
node.isExpand 布尔值，节点的展开状态方法
MzTreeView 类的一些方法：方法名方法的具体说明
MzTreeView.toString() 类的默认初始运行
MzTreeView.buildNode(id) 将该节点的所有下级子节点转换成 HTML 并在网页上体现出来
MzTreeView.nodeToHTML(node, AtEnd) 将 node 转换成 HTML
MzTreeView.load(id) 从数据源里加载当前节点下的所有子节点
MzTreeView.nodeInit(sourceIndex, parentId) 节点的信息初始，从数据源到客户端完整节点的转化
MzTreeView.focus(id) 聚集到某个节点上
MzTreeView.expand(id[, sureExpand]) 展开节点（包含下级子节点数据的加载初始化）
MzTreeView.setIconPath(path) 给节点图片设置正确的路径
MzTreeView.nodeClick(id) 节点链接点击时同时被触发的点击事件处理方法
MzTreeView.upperNode() 跳转到当前聚集节点的父级节点
MzTreeView.lowerNode() 跳转到当前聚集节点的子级节点
MzTreeView.pervNode() 跳转到当前聚集节点的上一节点
MzTreeView.nextNode() 跳转到当前聚集节点的下一节点
MzTreeView.expandAll()
解决理论：tree.nodes["1_600"]="text:动态生成600; data:id=500";
引号不是格式，只要保证引号中的为字符串，引号就可以去除。下面是分解后做的方法：
<script language="JavaScript"
  src="C:/Documents and Settings/zzm/jbproject/untitled3/WebModule1/MzTreeView10/MzTreeView10.js"></script>
<style>
...
<script language="JavaScript">
var tree = new MzTreeView("tree");
mytree(tree,"0","1","动态生成1","myMethod('动态生成1')");
document.write(tree.toString());    //亦可用 obj.innerHTML = tree.toString();//动态建立树的方法：
  function mytree(tree,ParentsID,ID,TextProperty,Method){
   tree.nodes[ParentsID+"_"+ID]="text:"+TextProperty+"; data:id="+ID+";method:"+Method;
   }
   //方法，用于显示：
  function myMethod(str){
   alert(str);
   //top.ShowMessage.mytext.value=str;
   top.ShowMessage.mytext.value=str;
   }
  </script>
这一种写法是方法的传出来的数据也是随给定值不同而变化的：<%
ArrayList _datalist= new ArrayList();
_datalist = myArrary.mytree1();for(int i=0;i<_datalist.size();i++){
%>mytree(tree,"<%=((dataBean)_datalist.get(i)).getClassId()%>",
            "<%=((dataBean)_datalist.get(i)).getParentId()%>",
            "<%=((dataBean)_datalist.get(i)).getFullName()%>",
            "myMethod","<%=((dataBean)_datalist.get(i)).getFullName()%>");
<%
}
%>   document.write(tree.toString());      //亦可用 obj.innerHTML = tree.toString();
  //动态建立树的方法：
  //参数说明：tree：是树的一个对象MzTreeView，
  //         ParentsID：是父节点的ID，字符串类型
  //         ID是本节点的ID：字符串类型
  //         TextProperty：是本节点显示的文字内容，字符串类型
  //         Method：是方法名字（带参数在内），字符串类型
  //         Methodparameter:Method方法的参数
function mytree(tree,ParentsID,ID,TextProperty,Method,Methodparameter){
   tree.nodes[ParentsID+"_"+ID]="text:"+TextProperty+"; data:id="+ID+";method:"+Method+"('"+Methodparameter+"')";
   }
   //方法，用于显示：
  function myMethod(str){
   alert(str);
   top.ShowMessage.mytext.value=str;
   }  </script>
我所认为的实现方式:树其实是表格完成的.一个树从上向下有多少个节点就有多少行.前面的加减号和线是图片表示的,展开一个节点其实就是在父节点下插入行。
动态的操作表格(Table）是JAVASCRIPT完成的。就了解这么多，自己还没有实现。