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

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; iIoUsitem = 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" + str_f ; else str_f = "

" + str_f ; } str = str + str_f ; str += "

" ; if( this.img == "" ) str += this.img ; else str += "

" ; str += "" + this.lable + "" + str_f ; else str_f = "

" + str_f ; } str = str + str_f ; str += "

" ; if( this.img == "" ) str += this.img ; else str += "

" ; str += "" + this.lable + "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,img ) { return new nodeitem( parentkey,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调用

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

原文链接：https://www.f2er.com/js/51734.html

javascript 动态生成树形菜单