45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何通过javascript生成动态树形菜单?

如何通过javascript生成动态树形菜单?

2016-07-06 20:59:54 来源:www.45fan.com 【

如何通过javascript生成动态树形菜单?

本文实例讲述了javascript动态生成树形菜单的方法。分享给大家供大家参考,具体如下:

//========================================
//Envrionment to hold Listeners
//========================================
tv_listeners = new Array() ;
function listener( type , handler ) {
 this.type = type ;
 this.handler = handler ;
 this.id = tv_listeners.length ;
 tv_listeners[ tv_listeners.length ] = this ;
}
function addListener( type , handler ) {
 new listener( type , handler ) ; 
 }
//=== END =====
//=========================================
// Hold the top item
//=========================================
tv_topnodeitem = null ;
//===== END =======
//=========================================
//Hold nodeitems , and supply a nodeitem Register
//=========================================
nodeitems = new Array() ;
function nodeitemRegister( obj ) {
 nodeitems[ nodeitems.length ] = obj ;
 return nodeitems.length - 1 ;
}
//=== END =======
//=================================
//Custom a stack
//Class   : stack
//metheds : get()
//     put( obj )
//=================================
function stack() {
 this.value = new Array() ;
 this.cursor = 0 ;
}
function stack_get() {
  this.cursor = this.cursor - 1 ;
 return this.value[ this.cursor ] ;
}
function stack_put( obj ) {
  this.value[ this.cursor ] = obj ;
  this.cursor = this.cursor + 1 ;
}
stack.prototype.get = stack_get ;
stack.prototype.put = stack_put ;
//=======END ==========
//=========================================
// Define a public stack
//=========================================
userstack = new stack() ;
//====== END ===========
//=========================================
//Image List
//=========================================
treeview_box_0_none = "../images/4_clos.gif" ;
treeview_box_0_line = "../images/4_none.gif" ;
treeview_box_2_open = "../images/2_open.gif" ;
treeview_box_2_none = "../images/2_none.gif" ;
treeview_box_2_close = "../images/2_clos.gif" ;
treeview_box_1_open = "../images/3_open.gif" ;
treeview_box_1_none = "../images/3_none.gif" ;
treeview_box_1_close = "../images/3_clos.gif" ;
//===============================================
//Class : nodeitem
//status------------------------1:two-direction  0:nobox  0: disactivite
//        2:three-0direction  1:close-box 1: activite
//             2:open-box
//===============================================
function nodeitem( parentkey , key , lable , img ) {
 this.lable = lable ;
 this.key = key ;
 this.parent = findNode( parentkey ) ;
 if( this.parent != null ) {
  aa = this.parent.status ;
  if( aa.substring( 1 , 2 ) == "0" )
   this.parent.status = aa.substring( 0 , 1 ) + "1" + aa.substring( 2 , 3 ) ;
  if( this.parent.maxsubitem != null ) 
   this.parent.maxsubitem.status = "2" + this.parent.maxsubitem.status.substring( 1 , 3 ) ;
  this.parent.subitems[ this.parent.subitems.length ] = this ;
  this.parent.maxsubitem = this ; 
 }
 else {
  if( tv_topnodeitem != null ) {
  alert( "不能有两个顶项!" ) ;
 return ;
  }
  tv_topnodeitem = this ;
 }
 this.img = img ;
 this.tag = null ;
 this.status = "100" ;
 this.subitems = new Array() ;
 this.maxsubitem = null ;
 this.id = nodeitemRegister( this ) ;
 //**********************
 this.questionId = 0;
 this.description = "";
 //this.url = null;
 //**********************
 //added by msb for the sort and move up/down
 /*if ( this == tv_topnodeitem )
 {
 this.nodeIndex = 0;
 } else {
 this.nodeIndex = this.parent.subitems.length;
 }*/
 //end added
}
//added by msb for the sort and move up/down
function nodeitem_moveUp() {
 if (this == tv_topnodeitem) return; //topitem
 ssubitems = this.parent.subitems;
 for ( i=0; i<ssubitems.length; i++ ) {
 if( ssubitems[i] == this ) {
 break;
 }
 }
 if (i==0) return;
 ssubitems[i] = ssubitems[i-1];
 ssubitems[i-1] = this;
 if (i==ssubitems.length-1) {
 ssubitems[i-1].status = "2" + ssubitems[i-1].status.substring(1, 3);
 ssubitems[i].status = "1" + ssubitems[i].status.substring(1, 3);
 }
 /*
 itemTemp = this;
 ssubitems[this.nodeIndex-1] */
/* for ( i=0; i<ssubitems.length; i++ ) {
 if( ssubitems[i] != null && ssubitems[i].nodeIndex == (this.nodeIndex-1) )
 previousitem = ssubitems[i]
 }
 previousitem.nodeIndex = this.nodeIndex;
 this.nodeIndex = this.nodeIndex -1;
 swap(this,previousitem);
*/
 //label_on_click(this.id);
 this.parent.refresh();
 lable_on_click(this.id);
}//moveUp()
function nodeitem_moveDown() {
 if (this == tv_topnodeitem) return; //topitem
 ssubitems = this.parent.subitems;
 for ( i=0; i<ssubitems.length; i++ ) {
 if( ssubitems[i] == this ) {
 break;
 }
 }
 if (i==ssubitems.length-1) return;
 ssubitems[i] = ssubitems[i+1];
 ssubitems[i+1] = this;
 if (i==ssubitems.length-2) {
 ssubitems[i+1].status = "1" + ssubitems[i+1].status.substring(1, 3);
 ssubitems[i].status = "2" + ssubitems[i].status.substring(1, 3);
 }
 this.parent.refresh();
 lable_on_click(this.id);
}//moveDown()
/*function swap (item1, item2) {
 nodeitems[item1.id] = item2;
 nodeitems[item2.id] = item1;
 idTemp = item1.id;
 item1.id = item2.id;
 item2.id = idTemp;
}*/
//end added
function nodeitem_setTag( obj ) {
 this.tag = obj ;
}
function nodeitem_getTag() {
 return this.tag ;
}
function nodeitem_show() {
 str = "<span id = 'preface" + this.id + "'><table border='0' cellspacing='0' cellpadding='0'><tr><td>" ;
 str_f = "" ;
 for( j = this.parent ; j != null ; j = j.parent ) {
  if( j.status.substring( 0 , 1 ) == 1 )
  str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle'>" + str_f ;
  else
  str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle'>" + str_f ;
 }
 str = str + str_f ;
 str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ;
 switch( this.status.substring( 0 , 2 ) ) {
  case "10" : str += treeview_box_1_none ; break ;
  case "11" : str += treeview_box_1_close ; break ;
  case "12" : str += treeview_box_1_open ; break ;
  case "20" : str += treeview_box_2_none ; break ;
  case "21" : str += treeview_box_2_close ; break ;
  case "22" : str += treeview_box_2_open ; break ;
 }
 str += "' align='absmiddle' onclick='box_on_click(this)'>" ;
 if( this.img == "" )
  str += this.img ;
 else
  str += "<img src = '" + this.img + "' align='absmiddle' width='16' height='16'>" ;
 str += "</td><td><table border='0' cellspacing='1' cellpadding='1' style='font-size:9pt; color:#333333' id='lablePanel" + this.id + "'><tr><td ondblclick = 'lable_on_dblclick(" + this.id + ")' onclick='lable_on_click(" + this.id + ")' style='cursor:hand' id='f_lablePanel" + this.id + "' nowrap>" + this.lable + "</td></tr></table></td></tr></table>" ; 
 str += "</span><span id = 'tv_panel_" + this.id + "' style='display:" ;
 if( this.status.substring( 1 , 2 ) == '2' )
 str += "" ;
 else
 str += "none" ;
 str += "'></span>" ;
 if( this.parent == null ) 
  for(var i in document.all){
   if (document.all[i].tagName == "BODY")
   {
  document.all[i].insertAdjacentHTML( "AfterBegin" , str ) ;
    break
   }
  }
 else 
 document.all( "tv_panel_" + this.parent.id ).insertAdjacentHTML( "BeforeEnd" , str ) ;
 for( m = 0 ; m < this.subitems.length ; m ++ ) 
 if( this.subitems[ m ] != null ) {
  userstack.put( m ) ;
  this.subitems[ m ].show() ;
  m = userstack.get() ;
 }
}
function nodeitem_refresh() {
 str = "<table border='0' cellspacing='0' cellpadding='0'><tr><td>" ;
 str_f = "" ;
 for( j = this.parent ; j != null ; j = j.parent ) {
  if( j.status.substring( 0 , 1 ) == 1 )
  str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle'>" + str_f ;
  else
  str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle'>" + str_f ;
 }
 str = str + str_f ;
 str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ;
 switch( this.status.substring( 0 , 2 ) ) {
   case "10" : str += treeview_box_1_none ; break ;
   case "11" : str += treeview_box_1_close ; break ;
   case "12" : str += treeview_box_1_open ; break ;
   case "20" : str += treeview_box_2_none ; break ;
   case "21" : str += treeview_box_2_close ; break ;
   case "22" : str += treeview_box_2_open ; break ;
 }
 str += "' align='absmiddle' onclick='box_on_click(this)'>" ;
 if( this.img == "" )
  str += this.img ;
 else
  str += "<img src = '" + this.img + "' align='absmiddle' width='16' height='16'>" ;
 str += "</td><td><table border='0' cellspacing='1' cellpadding='1' style='font-size:9pt; color:#333333' id='lablePanel" + this.id + "'><tr><td ondblclick = 'lable_on_dblclick(" + this.id + ")' onclick='lable_on_click(" + this.id + ")' style='cursor:hand' id='f_lablePanel" + this.id + "' nowrap>" + this.lable + "</td></tr></table></td></tr></table>" ; 
 document.all( "preface" + this.id ).innerHTML = str ;
 document.all( "tv_panel_" + this.id ).innerHTML = "" ;
 for( m = 0 ; m < this.subitems.length ; m ++ )
 if( this.subitems[ m ] != null ) {
  userstack.put( m ) ;
  this.subitems[ m ].show() ;
  m = userstack.get() ;
  }
}
function nodeitem_remove() {
 pparent = this.parent ;
 if( pparent == null ) {
  removenodeitem( this.id ) ;
  for(var i in document.all){
   if (document.all[i].tagName == "BODY")
    {
  document.all[i].innerHTML = "" ;
    break
    }
   }
 return ;
 }
 lastsubitem = null ;
 for( i = 0 ; i < pparent.subitems.length ; i ++ )
 if( pparent.subitems[ i ] != null ) 
  if ( pparent.subitems[ i ] == this ) 
   pparent.subitems[ i ] = null ;
   else
   lastsubitem = pparent.subitems[ i ] ;
 pparent.maxsubitem = lastsubitem ; 
 if( lastsubitem == null ) 
  pparent.status = pparent.status.substring( 0 , 1 ) + "0" + pparent.status.substring( 2 , 3 ) ;
 else 
  pparent.maxsubitem.status = "1" + pparent.maxsubitem.status.substring( 1 , 3 ) ;
  removenodeitem( this.id ) ;
 //added by msb for move up/down
 arrTemp = new Array();
 j = 0;
 for ( i=0; i<pparent.subitems.length; i++ ) {
 if ( pparent.subitems[i] != null ) {
 arrTemp[j] = pparent.subitems[i];
 j++;
 }
 }
 this.parent.subitems = arrTemp;
 //end added
 pparent.refresh() ;
 //tv_topnodeitem.refresh() ;
}
function removenodeitem( id ) {
 curitem = nodeitems[ id ] ;
 nodeitems[ id ] = null ;
 for( m = 0 ; m < curitem.subitems.length ; m ++ ) 
  if( curitem.subitems[ m ] != null ) {
  userstack.put( m ) ;
  removenodeitem( curitem.subitems[ m ].id ) ;
  m = userstack.get() ;
  }
}
function nodeitem_boxclick() {
  if( this.status.substring( 1 ,2 ) == "0" )
  return ; 
 if( this.status.substring( 1 ,2 ) == "1" ) 
  this.open() ;
 else 
  this.close() ;
}
function nodeitem_close() {
  this.status = this.status.substring( 0 , 1 ) + "1" + this.status.substring( 2 , 3 ) ;
  document.all( "tv_panel_" + this.id ).style.display = "none" ;
  eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_close" ) ;
}
function nodeitem_open() {
  this.status = this.status.substring( 0 , 1 ) + "2" + this.status.substring( 2 , 3 ) ;
  document.all( "tv_panel_" + this.id ).style.display = "" ;
  eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_open" ) ;
}
//added by msb for the move up/down
nodeitem.prototype.moveUp = nodeitem_moveUp;
nodeitem.prototype.moveDown = nodeitem_moveDown;
//end added
nodeitem.prototype.show = nodeitem_show ;
nodeitem.prototype.refresh = nodeitem_refresh ;
nodeitem.prototype.boxclick = nodeitem_boxclick ;
nodeitem.prototype.close = nodeitem_close ;
nodeitem.prototype.open = nodeitem_open ;
nodeitem.prototype.remove = nodeitem_remove ;
nodeitem.prototype.setTag = nodeitem_setTag ;
nodeitem.prototype.getTag = nodeitem_getTag ;
//==========================================================
// Public Methods
//==========================================================
function showTV() {
  tv_topnodeitem.show() ;
}
function findNode( key ) {
 pppp = null;
 for( i = 0 ; i < nodeitems.length ; i ++ ) {
 if( nodeitems[ i ] != null ) {
  if( nodeitems[ i ].key == key ) {
   pppp = nodeitems[ i ] ;
 }
 }
 }
 return pppp ;
}
function addNode( parentkey , key , lable , img ) {
 return new nodeitem( parentkey , key , lable , img ) ;
}
function deleteNode( key ) {
 curNode = findNode( key ) ;
 if( curNode == null )
 return false ;
 curNode.remove() ; 
 return true ;
}
//====== END ================
//===========================================================
// Events
//===========================================================
function box_on_click( obj ) {
 nodeitems[ obj.nodeid ].boxclick() ;
}
tv_curlable = null ;
tv_curlable_f = null ;
function lable_on_click( id ) {
  key = nodeitems[ id ].key ;
  if( nodeitems[ id ].parent == null )
  parentkey = "" ;
  else
  parentkey = nodeitems[ id ].parent.key ;
 if( tv_curlable != null ) {
  tv_curlable.bgColor = "transparent" ;
  tv_curlable.style.color = "#333333" ;
  tv_curlable_f.bgColor = "transparent" ;
  }
  tv_curlable = document.all("lablePanel"+id) ;
  tv_curlable.bgColor = "#000000" ;
  tv_curlable.style.color = "#FFFFFF" ;
  tv_curlable_f = document.all("f_lablePanel"+id) ;
  tv_curlable_f.bgColor = "#888888" ;
 for( i = 0 ; i < tv_listeners.length ; i ++ ) 
  if( tv_listeners[ i ].type == "click" ) {
  h = tv_listeners[ i ].handler ;
  eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ; 
   }
}
function lable_on_dblclick( id ) {
 key = nodeitems[ id ].key ;
  if( nodeitems[ id ].parent == null )
  parentkey = "" ;
  else
  parentkey = nodeitems[ id ].parent.key ;
 if( tv_curlable != null ) {
  tv_curlable.bgColor = "transparent" ;
  tv_curlable.style.color = "#333333" ;
  tv_curlable_f.bgColor = "transparent" ;
  }
  tv_curlable = document.all("lablePanel"+id) ;
  tv_curlable.bgColor = "#000000" ;
  tv_curlable.style.color = "#FFFFFF" ;
  tv_curlable_f = document.all("f_lablePanel"+id) ;
  tv_curlable_f.bgColor = "#888888" ;
 for( i = 0 ; i < tv_listeners.length ; i ++ ) 
  if( tv_listeners[ i ].type == "dblclick" ) {
  h = tv_listeners[ i ].handler ;
  eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ; 
   }
}

javascript调用

<script language="javascript">
<!--
 addNode(-1,0,"hehe","../images/top.gif");
 addNode(0,1,"haha","../images/top.gif");
 addNode(0,2,"haha","../images/top.gif");
 addNode(1,3,"haha","../images/top.gif");
 addNode(1,4,"haha","../images/top.gif");
 addNode(2,5,"haha","../images/top.gif");
 addNode(2,6,"haha","../images/top.gif");
 showTV();
-->
</script>

希望本文所述对大家JavaScript程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/56330.html
Tags: 动态 JavaScript 生成
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部