Magic of Love

Javascript Tree 본문

Software

Javascript Tree

NYA 2009.04.27 11:15

약 한 달 전.. 심심해서 만들어본 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에 TreeItem의 padding과 margin 값이 적으니 IE에서 트리 모양이 깨진다 -_- 젠장.. 뭘 기준으로 맞춰야 하는거야..


결과화면 캡쳐

nyatreetest.PNG


nyatree.js

    [code js] /* 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 ); } [/code]

nyatree.css

    [code css] /*** 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; } [/code]

treetest.html

    [code html] <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> [/code]



이 글은 스프링노트에서 작성되었습니다.

2 Comments
  • 프로필사진 BlogIcon Labyrins 2009.05.07 15:56 신고 자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.
    자바스크립트를 객체지향적으로 코딩할 수 있어서 재밌었다.


    나도 자바스크립트를 객체지향적으로 코딩하고 있는데 왜 난 재미가 없는거냐능..-_-;
  • 프로필사진 NYA 2009.05.08 00:45 신고 깜딱이야..
    너무 길면 테러라능..

    난 그냥 되나 안되나 해본 것 뿐이라.. -_-;;
댓글쓰기 폼