javascript动态生成树形菜单的方法


Posted in Javascript onNovember 14, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 #Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 #Javascript
学习JavaScript正则表达式
Nov 13 #Javascript
jquery实现九宫格大转盘抽奖
Nov 13 #Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 #Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 #Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 #Javascript
You might like
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php集成动态口令认证
2016/07/21 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
详解Vue之事件处理
2020/07/10 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python中模块的__all__属性详解
2017/10/26 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
优秀实习生主要事迹
2014/05/29 职场文书
新年晚会开场白
2015/05/29 职场文书
小学感恩主题班会
2015/08/12 职场文书
初中历史教学反思
2016/02/19 职场文书
800字作文之大雪
2019/12/04 职场文书