Web中显示树

    需要在Web中展示一棵树，数据来源是服务器端程序查询得到的一个TreeModel。
    基本思路是：采用JavaScript来展示树，JSP来生成包含该JS代码的页面。
    
    其中有两个关键点，
    一：JavaScript如何展示树?
    二：TreeModel如何给JavaScript进行展示?(这个和一的实现接口有关).

    一：JavaScript展示：
    首先，好在JavaScript存在很多免费库，很容易找到一个：
    我们使用 Tigra Tree ，下载地址是：
    http://www.softcomplex.com/products/tigra_tree_menu/ 
    使用非常简单：

    1：原封不动的使用下载的代码 tree.js (如果不要做特殊处理，就不用改了)
    <script language="JavaScript" src="js/tree.js"></script>

    2：先使用默认的树所用图标的定义库。
    <script language="JavaScript" src="js/tree_tpl.js"></script> 
    注意：第一行的 target 是定义点击导航的目的页面。
    其它图标可以根据需要更改。图标文件在下载中demo的icons目录。

    3：好了，下面就是关键了，定义树的数据变量：
        变量名必须是 TREE_ITEMS，结构呢，很简单，看看示例：
 

    var TREE_ITEMS = [ 
        ['Home', 'http://www.softcomplex.com/index.html', 
            ['Services', 'http://www.softcomplex.com/services.html'], 
            ['Download', 'http://www.softcomplex.com/download.html'], 
            ['Order',    'http://www.softcomplex.com/order.html'], 
           ['Support',  'http://www.softcomplex.com/support.html'], 
       ], 
      ['Level 0 Item 1', null, 
          ['Level 1 Item 0', 'links.html'], 
          ['Level 1 Item 1', 0, 
               ['Level 2 Item 0'], 
               ['Level 2 Item 1', 0], 
          ], 
          ['Level 1 Item 2'], 
          ['Level 1 Item 3'], 
      ] 
   ];    

    我想，这个就不用解释了，看看样例的效果就明白了。 
    实际上，这里的TREE_ITEMS是需要动态生成的，我在JSP中定义变量treeItems来生成，这里直接赋值就好了。

<script language="JavaScript"> 
  var TREE_ITEMS = <%=treeItems %>; 
</script> 

    二：如何从TreeModel导出数据 TREE_ITEMS
    这个一般有两种做法，一种是直接递归生成，另一种是先生成XML，然后使用XSLT转换为要求格式的TREE_ITEMS串。
    其实，利用递归生成是很简单的，所以，我采用第一种：

  public class TreeItemUtil 
     { 
      static private StringBuffer sbTreeItems = null; 
      static private String subjectName=""; 
      static public String createTreeItems(TreeNode node) 
...{ 
               sbTreeItems = new StringBuffer(); 
               toTreeItem(node); 
               return sbTreeItems.toString(); 
       } 

       static private void toTreeItem(TreeNode node) 
...{ 
               if (node.isLeaf()) 
...       { 
                  String info = ""; 
                  Object obj = ((DefaultMutableTreeNode)node).getUserObject(); 
                        //取显示值caption和命令执行相关参数cmd 
                        …… 
                  sbTreeItems.append("['" + caption + "','" + cmd + "'],"); 
             } 
             else 
...      { 
                   Object obj = ((DefaultMutableTreeNode)node).getUserObject(); 
                   //取显示值，一般此处不会有命令，因为是非叶节点，所以给0值。 
                   …… 
                   sbTreeItems.append("['" + caption + "',0,"); 
                   for(int i = 0; i < node.getChildCount(); i++) 
...            { 
                          toTreeItem(node.getChildAt(i)); 
                   } 
                   sbTreeItems.append("],"); 
             }  
       } 
   } 

    调用createTreeItems，将TreeModel的根结点传入，就可以得到需要的字串了。 
    嗯，大概就是这样了。