如何在JSP中通过数据读值使用javascript创建树结构

来得早不如来的巧，刚才为别人写的正好在这里涌到，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> tree view </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
<!--
.header{cursor:hand ;font-size: 10pt;
list-style-image:url(plus1.gif)}
.list{font-size: 10pt;list-style-image:url(min1.gif); margin-left: 11 px;}
.yellowSmallCLF { font-size: 11px; color: #000000;}
.yellowSmallCLF   a:link     { color: #000000; text-decoration: none;}
.yellowSmallCLF a:visited { color: #000000; text-decoration: none;}
.yellowSmallCLF a:active { color: #000000; text-decoration: none;}
.yellowSmallCLF a:hover     { color: #FF9900; text-decoration: underline;}
//-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*------------------------ Class...  -----------------------------*/
function TTreeView(name){
    this.name=name;
this.database='';//extent...
    this.items=new Array();//TTreeNodes(this);
this.items[this.items.length]=new TTreeNode(this,'topNode','','Top TreeNode');//
this.items['topNode']=this.items[this.items.length-1];
    //method...
this.create=create;
this.add=add;
this.trimData=trimData;
this.showChild=showChild;
}
function TTreeNode(owner,name,parent,caption,action,img){
     this.owner=owner;
 this.name=name;
 this.parentName=parent;
 this.childs=new Array();
 this.caption=(!action?'':('<span class="yellowSmallCLF" ><a href="#" onclick="'+action+'">'))+caption+(!action?'':'</a></span>');
 this.action=action;
 this.img=img;
     this.index=owner.items.length;
 //method...
 this.addChild=addChild;
}
/*------------------------ Methods...  -----------------------------*/
function add(name,parent,caption,action,img){
    this.items[this.items.length]=new TTreeNode(this,name,parent,caption,action,img);//
this.items[name]=this.items[this.items.length-1];
}
function create(){
   this.trimData();
   document.write(this.items[0].htmlcode);
}
function trimData(){
   for(i=0;i<this.items.length;i++){
        var obj=this.items[i]
        var pn=obj.parentName;
if(pn!=''){
   this.items[pn].childs[this.items[pn].childs.length]=obj;
   obj.htmlcode='<li id="'+this.name+'_'+obj.name+'" class="header">'+obj.caption+'</li><ul class="list" id="'+this.name+'_'+obj.name+'_child" style="display:none"></ul>';
}else{
  obj.htmlcode='<ul class="list">\n<li id="'+this.name+'_topNode" class="header">'+obj.caption+'</li><ul class="list" id="'+this.name+'_'+obj.name+'_child" style="display:none"></ul></ul>';
}
   }
   
}
function showChild(name){
  /*  var str='';
    for(i=0;i<this.items[name].childs.length;i++){
     str+=this.items[name].childs[i].htmlcode;
}
document.all['node_'+name+'_child'].innerHTML=str;
alert(str)//document.all.node_topNode.innerHTML
return false;*/
}
function getNameByIdstr(idstr){
    var beginnum=idstr.indexOf("_")+1;//异常处理!!!!!
var name=idstr.slice(beginnum);
return name;
}
function getOwnerByIdstr(idstr){
    var beginnum=idstr.indexOf("_");//异常处理!!!!!
var name=idstr.substring(0,beginnum);
return name;
}
function changeIt(){
       var idstr=window.event.srcElement.id;
   var n=getNameByIdstr(idstr);
   var str='';
   if(document.all[idstr+'_child'].innerHTML==''){
      var tree=eval(getOwnerByIdstr(idstr));
      for(i=0;i<tree.items[n].childs.length;i++)str+=tree.items[n].childs[i].htmlcode;
      if(tree.items[n].childs.length!=0){
      document.all[idstr+'_child'].innerHTML=str;
  document.all[idstr+'_child'].style.display="block";
  }
  document.all[idstr].style.listStyleImage="url(min1.gif)"
   }else{
      document.all[idstr+'_child'].innerHTML='';
  document.all[idstr+'_child'].style.display="none";
  document.all[idstr].style.listStyleImage="url(plus1.gif)"
   }
}
function addNode(){//这里可以动态的添加一个Node到指定的node上，这只是个演示，你应该把它扩展，并且符合面向对象的原则。
     var idstr=window.event.srcElement.id;
 var pn=getNameByIdstr(idstr);
 var tree=eval(getOwnerByIdstr(idstr));
 var name=pn+tree.items[pn].childs.length;
 var caption=prompt('请输入名字',name);
 var action=prompt('请输入动作','alert(3)');
 
 if(confirm('你确定要在这里添加一个Node')){
    tree.add(name,pn,caption,action)//,img)
        tree.items[name].htmlcode='<li id="'+tree.name+'_'+name+'" class="header">'+caption+'</li><ul class="list" id="'+tree.name+'_'+name+'_child" style="display:none"></ul>';
    tree.items[pn].childs[tree.items[pn].childs.length]=tree.items[name];
     }}
function myClick(){
   try{//必须
       changeIt();
   }
   catch(x){}
}
function myDblClick(){
    try{//必须
       addNode();
   }
   catch(x){}
}
document.onclick=myClick;
document.ondblclick=myDblClick
/*----------------- 废弃的方法-----------------*/
function del(name){
}
function addChild(){//用来动态填加node到name中,这里只给你一个粗糙的添加方法，
 /*var name=this.name+this.owner.items[this.name].childs.length;
var caption=prompt('请输入名字',name);
var action=prompt('请输入动作','alert(3)');
this.owner.add(name,this.name,caption,action)//,img)
    this.owner.trimData();*/
}
//-->
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
ot=new TTreeView('ot');
ot.add('class','topNode','class');
  ot.add('H971','class','环化971班');
     ot.add('llrock','H971','llrock');
     ot.add('nickname','llrock','百乐宝','alert(30)');
     ot.add('bbrock','H971','bbrock');
  ot.add('H972','class','H972');
ot.create();
//ot.items[0].addChild()//-->
</SCRIPT>
<br><b>单击展开，双击在此节点添加一个子节点；我没有时间把它扩展的更全面，这只是个例子</b>
</BODY>
</HTML>在你的jsp中写response.write "<script>ot=new TTreeView('ot');ot.add('class','topNode','class');ot.create();"
这是asp，
我不会jsp,这样就行了。

解决方案 »

  1.   

    来得早不如来的巧，刚才为别人写的正好在这里涌到，
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> tree view </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    <!--
    .header{cursor:hand ;font-size: 10pt;
    list-style-image:url(plus1.gif)}
    .list{font-size: 10pt;list-style-image:url(min1.gif); margin-left: 11 px;}
    .yellowSmallCLF { font-size: 11px; color: #000000;}
    .yellowSmallCLF   a:link     { color: #000000; text-decoration: none;}
    .yellowSmallCLF a:visited { color: #000000; text-decoration: none;}
    .yellowSmallCLF a:active { color: #000000; text-decoration: none;}
    .yellowSmallCLF a:hover     { color: #FF9900; text-decoration: underline;}
    //-->
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    /*------------------------ Class...  -----------------------------*/
    function TTreeView(name){
        this.name=name;
    this.database='';//extent...
        this.items=new Array();//TTreeNodes(this);
    this.items[this.items.length]=new TTreeNode(this,'topNode','','Top TreeNode');//
    this.items['topNode']=this.items[this.items.length-1];
        //method...
    this.create=create;
    this.add=add;
    this.trimData=trimData;
    this.showChild=showChild;
    }
    function TTreeNode(owner,name,parent,caption,action,img){
         this.owner=owner;
     this.name=name;
     this.parentName=parent;
     this.childs=new Array();
     this.caption=(!action?'':('<span class="yellowSmallCLF" ><a href="#" onclick="'+action+'">'))+caption+(!action?'':'</a></span>');
     this.action=action;
     this.img=img;
         this.index=owner.items.length;
     //method...
     this.addChild=addChild;
    }
    /*------------------------ Methods...  -----------------------------*/
    function add(name,parent,caption,action,img){
        this.items[this.items.length]=new TTreeNode(this,name,parent,caption,action,img);//
    this.items[name]=this.items[this.items.length-1];
    }
    function create(){
       this.trimData();
       document.write(this.items[0].htmlcode);
    }
    function trimData(){
       for(i=0;i<this.items.length;i++){
            var obj=this.items[i]
            var pn=obj.parentName;
    if(pn!=''){
       this.items[pn].childs[this.items[pn].childs.length]=obj;
       obj.htmlcode='<li id="'+this.name+'_'+obj.name+'" class="header">'+obj.caption+'</li><ul class="list" id="'+this.name+'_'+obj.name+'_child" style="display:none"></ul>';
    }else{
      obj.htmlcode='<ul class="list">\n<li id="'+this.name+'_topNode" class="header">'+obj.caption+'</li><ul class="list" id="'+this.name+'_'+obj.name+'_child" style="display:none"></ul></ul>';
    }
       }
       
    }
    function showChild(name){
      /*  var str='';
        for(i=0;i<this.items[name].childs.length;i++){
         str+=this.items[name].childs[i].htmlcode;
    }
    document.all['node_'+name+'_child'].innerHTML=str;
    alert(str)//document.all.node_topNode.innerHTML
    return false;*/
    }
    function getNameByIdstr(idstr){
        var beginnum=idstr.indexOf("_")+1;//异常处理!!!!!
    var name=idstr.slice(beginnum);
    return name;
    }
    function getOwnerByIdstr(idstr){
        var beginnum=idstr.indexOf("_");//异常处理!!!!!
    var name=idstr.substring(0,beginnum);
    return name;
    }
    function changeIt(){
           var idstr=window.event.srcElement.id;
       var n=getNameByIdstr(idstr);
       var str='';
       if(document.all[idstr+'_child'].innerHTML==''){
          var tree=eval(getOwnerByIdstr(idstr));
          for(i=0;i<tree.items[n].childs.length;i++)str+=tree.items[n].childs[i].htmlcode;
          if(tree.items[n].childs.length!=0){
          document.all[idstr+'_child'].innerHTML=str;
      document.all[idstr+'_child'].style.display="block";
      }
      document.all[idstr].style.listStyleImage="url(min1.gif)"
       }else{
          document.all[idstr+'_child'].innerHTML='';
      document.all[idstr+'_child'].style.display="none";
      document.all[idstr].style.listStyleImage="url(plus1.gif)"
       }
    }
    function addNode(){//这里可以动态的添加一个Node到指定的node上，这只是个演示，你应该把它扩展，并且符合面向对象的原则。
         var idstr=window.event.srcElement.id;
     var pn=getNameByIdstr(idstr);
     var tree=eval(getOwnerByIdstr(idstr));
     var name=pn+tree.items[pn].childs.length;
     var caption=prompt('请输入名字',name);
     var action=prompt('请输入动作','alert(3)');
     
     if(confirm('你确定要在这里添加一个Node')){
        tree.add(name,pn,caption,action)//,img)
            tree.items[name].htmlcode='<li id="'+tree.name+'_'+name+'" class="header">'+caption+'</li><ul class="list" id="'+tree.name+'_'+name+'_child" style="display:none"></ul>';
        tree.items[pn].childs[tree.items[pn].childs.length]=tree.items[name];
         }}
    function myClick(){
       try{//必须
           changeIt();
       }
       catch(x){}
    }
    function myDblClick(){
        try{//必须
           addNode();
       }
       catch(x){}
    }
    document.onclick=myClick;
    document.ondblclick=myDblClick
    /*----------------- 废弃的方法-----------------*/
    function del(name){
    }
    function addChild(){//用来动态填加node到name中,这里只给你一个粗糙的添加方法，
     /*var name=this.name+this.owner.items[this.name].childs.length;
    var caption=prompt('请输入名字',name);
    var action=prompt('请输入动作','alert(3)');
    this.owner.add(name,this.name,caption,action)//,img)
        this.owner.trimData();*/
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    ot=new TTreeView('ot');
    ot.add('class','topNode','class');
      ot.add('H971','class','环化971班');
         ot.add('llrock','H971','llrock');
         ot.add('nickname','llrock','百乐宝','alert(30)');
         ot.add('bbrock','H971','bbrock');
      ot.add('H972','class','H972');
    ot.create();
    //ot.items[0].addChild()//-->
    </SCRIPT>
    <br><b>单击展开，双击在此节点添加一个子节点；我没有时间把它扩展的更全面，这只是个例子</b>
    </BODY>
    </HTML>在你的jsp中写response.write "<script>ot=new TTreeView('ot');ot.add('class','topNode','class');ot.create();"
    这是asp，
    我不会jsp,这样就行了。
      

  2.   

    别忘了作两个img,plus1.gif,min1.gif