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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
如何更好的编写js async函数
May 13 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
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
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP实现文件下载详解
2014/11/27 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python切片索引用法示例
2018/05/15 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
运动会通讯稿200字
2015/07/20 职场文书
Django程序的优化技巧
2021/04/29 Python
Python学习之异常中的finally使用详解
2022/03/16 Python
KVM基础命令详解
2022/04/30 Servers
服务器SVN搭建图文安装过程
2022/06/21 Servers