Javascript Tree

약 한 달 전.. 심심해서 만들어본 Tree.

 

prototype.js 를 이용해보았다. 자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.

처음에 <UL> <LI> 스타일로 작성했는데, css 처리를 어찌할지 몰라서 <DIV> 형태로 바꾸었다. <UL><LI> 로도 다시 작성해봐야겠다.

 

다만.. 이런 식으로 만들어진 tree가 더 있을 것 같아서 나중에 검색해보니 정말 있다. 그것도 많이...

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks 위키에 비교까지 되어있다.

특히 요런 데모를 보면.. http://jquery.bassistance.de/treeview/demo/  우왕.

 

난 역시 삽질을 한 것인가.. 라는 생각도 들지만. 재미로 만든 거니 뭐... -_-

링크나 스크립트 function을 걸 수 있게도 바꿔보고, 폴더 아이콘도 넣어보고 해봐야지.

(근데 IE는 css 땜에 트리가 깨진다 ㅡ_ㅡ;;;)

 

결과화면 캡쳐

 

nyatree.js

1. /* tree template */
   var treeTemplate = new Template('<div id="item_#{hierID}" class="TreeItem"><div id="ico_#{hierID}" class="TreeIcon" onClick="javascript:toggleFolder(\'#{hierID}\')" ></div><div class=TreeText><input type="checkbox" id="chk_#{hierName}" class="TreeCheck" onClick="toggleCheckbox(\'#{hierID}\')" />#{hierName}</div> <div id="sub_#{hierID}" class="SubTree" ></div></div>');
   
   /* tree Node Class */
   var TreeNode = Class.create({
       initialize: function(hierID, hierName, parentID) {
           this.hierID = hierID;
           this.hierName = hierName;
           this.parentID = parentID;
           this.childNodes = new Array(0);
       },
       addChild: function(childID, childName) {
           this.childNodes[ this.childNodes.size() ] = new TreeNode(childID, childName, this.hierID);
       },
       getNode: function(hierID) {
           var node = null;
           if(this.hierID == hierID) {
               node = this;
           }
           else if(this.childNodes.size() >0) {
               this.childNodes.each( function(item){ node = item.getNode(hierID) } );
           }
           return node;
       },
       checkSubTree: function( isChecked ) {
           var len = this.childNodes.length;
           if( len > 0) {
               for (var index = 0; index < len; ++index) {
                   var item = this.childNodes[index];
                   item.isChecked = isChecked;
                   $('chk_'+item.hierID).checked = isChecked;
                   item.checkSubTree( isChecked ) ;
               }
           }
       },
       makeTreeTag: function() {
           var tagString = treeTemplate.evaluate({hierID:this.hierID, parentID: this.parentID, hierName:this.hierName});
           if( this.parentID == '' ) {
               document.write( tagString ); // root node
           }
           else {
               $('sub_'+this.parentID).insert( tagString , 'bottom' ); // non-root node
           }
          
           var len = this.childNodes.length;
           if( len > 0) {
               for (var index = 0; index < len; ++index) {
                   var item = this.childNodes[index];
                   item.makeTreeTag() ;
                   if( index == len-1 ) { $('item_'+item.hierID).addClassName('Last');    }
                   else                 { $('item_'+item.hierID).addClassName('Continue');    }
               }
               $('ico_'+this.hierID).addClassName('Expanded'); // folder를 기본으로 expand 함.
           }
           else {
               $('ico_'+this.hierID).addClassName('Leaf');
           }
       }
   });
   
   /* tree Factory Class */
   var Tree = Class.create({
       initialize: function(rootID,rootName) {
           this.rootNode = new TreeNode(rootID, rootName, '');
       },
       addChildTo: function(hierID, childID, childName) {
           var tmp = this.rootNode.getNode(hierID);
           if(tmp != null) {
               tmp.addChild(childID,childName);
           }
       },
       draw: function() {
           this.rootNode.makeTreeTag();
       }
   });
   
   /* tree Folder Collapse Expand */
   function toggleFolder( id )
   {
       if( false == $('sub_'+id).innerHTML.blank() ) {
           $('sub_'+id).toggle();
           // open-close 폴더 아이콘 변경.
           $('ico_'+id).toggleClassName('TreeIcon Expanded');
           $('ico_'+id).toggleClassName('TreeIcon Collapsed');
       }
   }
   
   /* tree checkbox 선택 */
   function toggleCheckbox( id )
   {
       // 하위 체크박스도 선택.
       var isChecked = true;
       var node = Tree.getNode(id);
       alert( node );
       node.checkSubTree( isChecked );
   }

 

nyatree.css

1. /*** Tree Item ***/
   div.TreeItem           { margin:0; cursor:default;}
   div.TreeItem.Continue  { background:url('treeicon/i-repeater.gif') repeat-y ; }
   div.TreeItem.Last      { background:url('treeicon/connect.end.gif')  no-repeat ; }
   
   /*** Tree Icon ***/
   div.TreeIcon           { border:0; width:15px; height:15px; display:block; background:no-repeat; float:left; margin:0 0 0 0;}
   div.TreeIcon.Leaf      { background-image:url('treeicon/bar.gif'); ; }
   div.TreeIcon.Expanded  { background-image:url('treeicon/folderopened.gif'); cursor:pointer; }
   div.TreeIcon.Collapsed { background-image:url('treeicon/folderclosed.gif'); cursor:pointer; }
   
   /*** Tree Text ***/
   div.TreeText           { font-size:8pt; font-family:verdana; float:none; margin:0; padding:0 }
   input.TreeCheck        { height:10px; }
   
   /*** Sub Tree ***/
   div.SubTree {
       display:hidden;
       margin:0 0 0 16px; padding:0 0 0 1; line-height:20px;
   }
   
   span.TreeText { font-family:tahoma; font-size:10pt; }

 

treetest.html

1. <html>
   <head>
       <script type="text/javascript" src="prototype-1.6.0.3.js"></script>
       <script type="text/javascript" src="nyatree.js"></script>
       <link rel="stylesheet" type="text/css" href="nyatree.css">
      
       <script>
       /* tree data */
       var myTree = new Tree('root','Root Node');
       myTree.addChildTo('root','1000','1000...');
       myTree.addChildTo('1000','1200','1200...');
       myTree.addChildTo('1000','1400','1400...');
       myTree.addChildTo('1400','1450','1450...');
       myTree.addChildTo('1400','1470','1470...');
       myTree.addChildTo('1000','1600','1600...');
       myTree.addChildTo('root','2000','2000...');
       myTree.addChildTo('2000','2200','2200...');
       myTree.addChildTo('root','3000','3000...');
       </script>
   </head>
   <body>
   
   ------------
       <div id="TreeZone">
          
           <script>myTree.draw()</script>
   
       </div>
   ------------
   </body>
   </html>