关于梅花雪的js树

最近一段时间，为了学习java，天天在看别人的框架，为了实现一颗树，找到了一个改写梅花雪的js，下面是一个基本的结构

<% @ page language="java" import="java.util.*" pageEncoding="GBK" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
   < head >
     < base  href ="<%=basePath%>" >
    
     < title > My JSP 'MyJsp.jsp' starting page </ title >
    
     < meta  http-equiv ="pragma"  content ="no-cache" >
     < meta  http-equiv ="cache-control"  content ="no-cache" >
     < meta  http-equiv ="expires"  content ="0" >     
     < meta  http-equiv ="keywords"  content ="keyword1,keyword2,keyword3" >
     < meta  http-equiv ="description"  content ="This is my page" >
     < script  language ="javaScript"  src ="MzTreeView12.js" ></ script >
< style >
body {}{font:normal 12px 宋体}
a.MzTreeview /**//* TreeView 链接的基本样式 */ {}{ cursor: hand; color: #000080; margin-top: 5px; padding: 2 1 0 2; text-decoration: none; }
.MzTreeview a.select /**//* TreeView 链接被选中时的样式 */ {}{ color: highlighttext; background-color: highlight; }
#kkk input {}{
vertical-align:middle;
}
.MzTreeViewRow {}{border:none;width:500px;padding:0px;margin:0px;border-collapse:collapse}
.MzTreeViewCell0 {}{border-bottom:1px solid #CCCCCC;padding:0px;margin:0px;}
.MzTreeViewCell1 {}{border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;width:200px;padding:0px;margin:0px;}
</ style >
     < script  type ="text/javascript"  src ="/HAS/info/js/MzTreeView12.js" ></ script >
    
    
   </ head >
  
   < body >
     < h3 > MzTreeView + CheckBox 复选框 + 自定义表格 演示 (MzTreeView v1.2 www.lxasp.com 修改版) </ h3 >


< table  class ='MzTreeViewRow'  style ="background:#EEEEEE;border-top:1px solid #CCCCCC;" >< tr >< th  class ='MzTreeViewCell0' > 树 </ th >< th  class ='MzTreeViewCell1' > ID </ th ></ tr ></ table >

< div  id ="kkk" ></ div >


     < script  language ="javascript"  type ="text/javascript" >
    <!--
    //var MzTreeViewTH="<table class='MzTreeViewRow'><tr><td class='MzTreeViewCell0'>";
    //var MzTreeViewTD="\"</td><td class='MzTreeViewCell1'>\"+ sid +\"</td></tr></table>\"";
    
    window.tree = new MzTreeView("tree");
    /**//*
    tree.icons["property"] = "property.gif";
    tree.icons["css"] = "collection.gif";
    tree.icons["event"] = "collection.gif";
    tree.icons["book"]  = "book.gif";
    tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片
    */
    tree.setIconPath("/HAS/info/images/treeimages/"); //可用相对路径
    tree.N["0_SH8900000000"] = "ctrl:sel;checked:1;T:系统管理;"
    tree.N["SH8900000000_SH8901000000"] = "ctrl:sel;checked:1;T:文书模板管理"
    tree.N["SH8900000000_SH8902000000"] = "ctrl:sel;checked:0;T:自定义流程管理"
    tree.N["SH8900000000_SH8903000000"] = "ctrl:sel;checked:1;T:质量考核因素"
    tree.N["SH8900000000_SH8904000000"] = "ctrl:sel;checked:1;T:节假日管理"
    tree.N["SH8900000000_SH8905000000"] = "ctrl:sel;checked:1;T:事项管理"
    tree.N["SH8900000000_SH8906000000"] = "ctrl:sel;checked:1;T:用户及权限管理"
    tree.N["SH8900000000_SH8907000000"] = "ctrl:sel;checked:1;T:组织机构管理"
    tree.N["SH8906000000_SH8906010000"] = "ctrl:sel;checked:1;T:添加新用户"
    tree.N["SH8907000000_SH8907010000"] = "ctrl:sel;checked:1;T:添加组织机构"
    tree.N["SH8906000000_SH8906020000"] = "ctrl:sel;checked:0;T:用户管理"
    tree.N["SH8907000000_SH8907020000"] = "ctrl:sel;checked:0;T:组织机构管理"
    tree.N["SH8906000000_SH8906030000"] = "ctrl:sel;checked:1;T:添加新角色"
    tree.N["SH8906000000_SH8906040000"] = "ctrl:sel;checked:1;T:系统角色管理"

    tree.setURL("#");
    tree.wordLine = false;
    tree.setTarget("main");
    document.getElementById("kkk").innerHTML=tree.toString();
    tree.expandAll();
    
    //alert(document.getElementsByTagName("head")[0].innerHTML);
    //alert(document.getElementById("kkk").innerHTML);
    
    function showsel()
    {
        var es=document.getElementsByName("sel");
        var out="";
        for(var i=0;i<es.length;i++)
        {
            if (es[i].checked) out+=es[i].value+"\n";
        }
        alert(out);
    }
    //-->
     </ script >
< p >
< input  type ="button"  onclick ='showsel()'  value ='显示选中'  />
</ p >
   </ body >
</ html >

部门表结构：
编号      名称           上级
bianhao  mingcheng  shangji


在action中

/** */ /**
     * 得到部门
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     */
     public  ActionForward getBuMen(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response)
     {

//        实现注入
         UserManagerService userManagerService = GlobalService.getUserManagerService();
         
         List list=userManagerService.getBuMen();
         

         Bumen bm=new Bumen();
        StringBuffer str=new StringBuffer();
        
        //图片路径
        str.append("tree.setIconPath('/HAS/info/images/treeimages/');");
        str.append("\n");
        
         Iterator iterator = list.iterator(); 
         while(iterator.hasNext())
         {
            
             try{
                 Object[] obj = (Object[])iterator.next();
                 String bianhao = obj[0].toString();
                 String mingcheng = obj[1].toString();
                 String shangji = obj[2].toString();
                 
                 bm.setBianhao(bianhao);
                 bm.setMingcheng(mingcheng);
                 bm.setShangji(shangji);
             }
             catch(Exception e){
                e.printStackTrace(); 
             }
             
             if(bm.getBianhao().substring(1,12).equals("00000000000"))
             {
                 str.append("tree.N['0");
                 str.append("_");
                 str.append(bm.getBianhao());
                 str.append("']");
                 str.append("=");
                 str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");
                 str.append("\n");
             }
             else
             {
                 str.append("tree.N['");
                 str.append(bm.getShangji());
                 str.append("_");
                 str.append(bm.getBianhao());
                 str.append("']");
                 str.append("=");
                 str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");
                 str.append("\n");
             }

         
         
        
        //第二种用法
         
//         for(int i = 0; i < list.size(); i++)
//         {
//             Bumen bm = (Bumen)list.get(i);
//             
//             if(bm.getBianhao().substring(1,12).equals("00000000000"))
//                  {
//                      str.append("tree.N['0");
//                      //str.append(bm.getShangji());
//                      str.append("_");
//                      str.append(bm.getBianhao());
//         
//                      str.append("']");
//                      str.append("=");
//         
//                      str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");
//         
//                      str.append("\n");
//                  }
//                  else
//                  {
//                      str.append("tree.N['");
//                      str.append(bm.getShangji());
//                      str.append("_");
//                      str.append(bm.getBianhao());
//         
//                      str.append("']");
//                      str.append("=");
//         
//                      str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");
//         
//                      str.append("\n");
//                  }
//             
         }
         
         
         str.append("tree.setURL('#');");
         str.append("\n");
         str.append("tree.wordLine=false;");
         str.append("\n");
         str.append("tree.setTarget('main');");
         str.append("\n");
         

         
        request.setAttribute("BUMENTREE", str); 
        request.setAttribute("LISTBUMEN", list);
        return mapping.findForward("bumen");
    }

}

其中是使用dao的注入方式，来得到部门

js下载地址：
http://www.cnbolgs.com/Files/huazi4995/MzTreeView12.js

转载于:https://www.cnblogs.com/huazi4995/archive/2007/11/03/948454.html