var MyApp = MyApp || {};

MyApp.local = (function($) {

////////////////////////////////////////////////////////////////////////////////////////////////////

// start initialize

var  global            = this

    ,selectBaseUrl     = ""

    ,selectDivisionUrl = ""

    ,insertDivisionUrl = ""

    ,doDivsnSearch     = function() {

        var srch_site_nm = $("#srch_site_nm").val() || "";

         

        if ( srch_site_nm != "" ) {

            $("#divsnTree").dynatree("option","initAjax", {

                url         : selectDivisionUrl,

                dataType    : 'json',

                data        : {

                    mnu_id  : "ROOT",

                    site_id : srch_site_nm,

                    mode    : "all"

                }

            });

            $("#divsnTree").dynatree("getTree").reload();

        }

    }

    ;

// end initialize 

 

;$(document).ready(function() {

    // 베이스 트리 생성

    $("#baseTree").dynatree({

        title          : "",

        minExpandLevel : 1,

        initAjax       : {

            url        : selectBaseUrl,

            dataType   :'json',

            data       : {

            }

        },

        autoFocus      : true,

        onActivate     : function(node) {

        },

        onDeactivate   : function(node) {

        },

        onLazyRead: function(node) {

        },

        dnd            : {

            onDragStart: function(node) {

                /** This function MUST be defined to enable dragging for the tree.

                 *  Return false to cancel dragging of node.

                 */

                logMsg("tree.onDragStart(%o)", node);

                if ( node.data.isFolder ) {

                    return true;

                }

                return true;

            },

            onDragStop : function(node) {

                logMsg("tree.onDragStop(%o)", node);

            }

        }//dnd: {

    });//$("#baseTree").dynatree({

 

    // 부분별 과정 트리 생성

    $("#divsnTree").dynatree({

        title          : "",

        minExpandLevel : 1,

        autoFocus      : true, 

        initAjax       : {

            url        : selectDivisionUrl,

            dataType   :'json',

            data       : {

                mnu_id : "ROOT",

                site_id: $("#srch_site_nm").val(),

                mode   : "all"

            }

        },

        onPostInit     : function(isReloading, isError) {

            var initNode = this.getNodeByKey('TEMP');

            if (initNode) {

                var tempMsg = 'tempMsg';

                initNode.setTitle(tempMsg);

            }

            else {

                // 데이터가 있다면 펼쳐준다.

                $("#btn_divsnTreeExpandAll").click();

            }

            logMsg("onPostInit(%o, %o)", isReloading, isError);

            this.reactivate();

        },

        onActivate     : function(node) {

            $("#site_mnunm").val(node.data.title);

            $("#delete_divsn_key").val(node.data.key);

        },

        onDeactivate   : function(node) {

        },

        onLazyRead     : function(node){

            node.appendAjax({

                url      : selectDivisionUrl,

                dataType : "json",

                data     : {

                    mnu_id : node.data.key,

                    site_id: $("#srch_site_nm").val(),

                    mode   : "all"

                },

                cache    : false

            });

        },

        dnd           : {

            autoExpandMS    : 1000,

            preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.

            onDragStart: function(node) {

                /** This function MUST be defined to enable dragging for the tree.

                 *  Return false to cancel dragging of node.

                 */

                logMsg("tree.onDragStart(%o)", node);

                if ( node.data.isFolder ) {

                    return true;

                }

                return true;

            },

            onDragStop : function(node) {

                logMsg("tree.onDragStop(%o)", node);

            },

            onDragEnter     : function(node, sourceNode) {

                /** sourceNode may be null for non-dynatree droppables.

                 *  Return false to disallow dropping on node. In this case

                 *  onDragOver and onDragLeave are not called.

                 *  Return 'over', 'before, or 'after' to force a hitMode.

                 *  Any other return value will calc the hitMode from the cursor position.

                 */

                logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);

                if ( node.data.isFolder ) {

                    return true;                    

                }

                return true;

            },

            onDragOver      : function(node, sourceNode, hitMode) {

              /** Return false to disallow dropping this node.

               *

               */

//               if(node.data.isFolder){

//                 var dd = $.ui.ddmanager.current;

//                 dd.cancel();

//                 alert("folder");

//               }

                logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);

            },

            onDrop          : function(node, sourceNode, hitMode, ui, draggable) {

                /**This function MUST be defined to enable dropping of items on the tree.

                 * sourceNode may be null, if it is a non-Dynatree droppable.

                 */

                logMsg("tree.onDrop(%o, %o)", node, sourceNode);

                var  copynode    = null

                    ,isSelf      = false

                    ;

                if (sourceNode) {

                    isSelf = (node.tree==sourceNode.tree);

                    // 키 중복 확인

                    try {

                        if ( isSelf == false ) {

                            node.tree.getRoot().visit(function(node){

                                if ( node.data.key == sourceNode.data.key ) {

                                    throw {message : "항목이 중복됩니다."};

                                }

                            });                         

                        }

                    }

                    catch(e) {

                        alert(e.message);

                        return;

                    }

                    finally  {}

                     

                    var temp_node = node.tree.getNodeByKey("TEMP");                    

                    var copy_node = node;

                    var myParent  = null;

                    var isTemp    = false;

                     

                    // 처음 생성시일때만 체크 : 처음생성시에는 TEMP 노드 밑에 들어가 있어야 한다.

                    if ( temp_node != null ) {

                        if ( hitMode == "over") {

                            if ( node.data.key == "TEMP" ) {

                                isTemp = true;

                            }

                        }

                             

                        while ( (myParent = copy_node.getParent()) != null ) {

                            if ( myParent.data.key == "TEMP" ) {

                                isTemp = true;

                            }

                            copy_node = myParent;

                        }

                         

                        if (temp_node != null && isTemp == false) {

                            var tempMsg = 'tempMsg';

                            alert(tempMsg);

                            return;

                        }                           

                    }

 

                    // 다른 트리에서 Drag N Drop을 할때  : 복사하고 넣어준다.

                    if ( isSelf == false ) {

                        copynode = sourceNode.toDict(true, function(dict) {

                            dict.title = "[*] " + dict.title;                           

                            // 2012.02.09 GDJ : 위 로직에서 키 중복체크를 하기 때문에 그데로 사용해도 문제 없다.

                            //delete dict.key; // Remove key, so a new one will be created

                        });                     

                         

                        if (hitMode == "over") {

                            // Append as child node

                            node.addChild(copynode);

                            // expand the drop target

                            node.expand(true);

                             

                            // 폴더로 변경해주고 다시 그려준다.

                            node.data.isFolder = true;

                            node.tree.redraw();

                        }

                        else if (hitMode == "before") {

                            // Add before this, i.e. as child of current parent

                            node.parent.addChild(copynode, node);

                        }

                        else if (hitMode == "after") {

                            // Add after this, i.e. as child of current parent

                            node.parent.addChild(copynode, node.getNextSibling());

                        }

                    }

                    // 자기 트리에서는 이동시킨다.

                    else {

                        (function() {

                            // 부모가 수정되었다고 알려준다.

                            var parent = sourceNode.getParent();

                            if ( parent != null && parent.data.key != "ROOT" ) {

                                var title  = parent.data.title;

                                if ( title != null ) {

                                    title = "[*] " + title.replace(/^(\[\*\]\s)?(.+)$/mi, "$2");

                                    parent.data.title = title;                                  

                                }

                            }

                        })();

 

                        sourceNode.move(node, hitMode);

                        if ( hitMode == "over") {

                            node.expand(true);

                            (function() {

                                // 부모가 수정되었다고 알려준다.

                                var parent = node;

                                if ( parent != null && parent.data.key != "ROOT" ) {

                                    var title  = parent.data.title;

                                    if ( title != null ) {

                                        title = "[*] " + title.replace(/^(\[\*\]\s)?(.+)$/mi, "$2");

                                        parent.data.title = title;                                  

                                    }

                                }

                            })();

                        }

                        node.tree.getRoot().visit(function(callback_node){

                            var myNode = callback_node;

                            myNode.data.isFolder = (myNode.getChildren()==null ? false:true);

                        });

                     

                        node.tree.redraw();                         

                        return;

                    }

                } 

                else {

                    copynode = {title: "This node was dropped here (" + ui.helper + ")."};

                    alert(copynode.title);

                }

            },//onDrop          : function(node, sourceNode, hitMode, ui, draggable) {

            onDragLeave     : function(node, sourceNode) {

                /** Always called if onDragEnter was called.

                 */

                 logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);

            }

        }//dnd: {

    });//$("#divsnTree").dynatree({

 

    // 부분별 셀렉트 박스

    $("#srch_site_nm").change(function() {

        doDivsnSearch();

    });

     

    // 검색

    $("#btn_search").click(function() {

        doDivsnSearch();

    }); 

     

    // 베이스 트리 모두 펼치기

    $("#btn_baseTreeExpandAll").click(function() {

        $("#baseTree").dynatree("getRoot").visit(function(node){

            node.expand(true);

        });

    });   

     

    // 베이스 트리 모두 접기

    $("#btn_baseTreeCollapseAll").click(function() {

        $("#baseTree").dynatree("getRoot").visit(function(node){

            node.expand(false);

        });

    });

  

    // 부분별 과정 트리 모두 펼치기

    $("#btn_divsnTreeExpandAll").click(function() {

        $("#divsnTree").dynatree("getRoot").visit(function(node){

            node.expand(true);

        });

    });

     

    // 부분별 과정 트리 모두 접기

    $("#btn_divsnTreeCollapseAll").click(function() {

        $("#divsnTree").dynatree("getRoot").visit(function(node){

            node.expand(false);

        });

    });

     

    // 부분별 과정 저장

    $("#btn_divsnSave").click(function() {

        var  $tree = $("#divsnTree")

            ,data  = []

            ;

        var srch_site_nm = $("#srch_site_nm").val();

        if ( srch_site_nm == "" ) {

            alert("부분을 선택하세요.");

            return;

        }

         

        $tree.dynatree("getRoot").visit(function(node) {

            var  item     = {}

                ,myParent = node.getParent()

                ,title    = node.data.title  || ""

                ,key      = node.data.key    || "" 

                ;

             

            item.subjclass   = key;

            // 신규 저장일때의 [*] 을 제거한다.

            item.classnm = title.replace(/^(\[\*\] )?(.+)$/gmi, "$2");

            if ( myParent == null ) {

                item.upsubjclass  = "";

                item.orders = 1;

            }

            else {

                if ( myParent.data.key == "TEMP" || myParent.data.key == "_1") {

                    item.upsubjclass   = "ROOT";                    

                }

                else {

                    item.upsubjclass   = myParent.data.key;

                }

 

                var order   = 1;

                var preNode = node;

                while ( (preNode=preNode.getPrevSibling()) != null ) {

                    order++;

                }

                item.orders  = order;

            }

            item.site_id = srch_site_nm;

             

            if ( item.subjclass.toUpperCase() != "TEMP" ) {

                data.push(item);                

            }

        });

         

        // Root 데이터를 맨앞에 넣어준다.

        var rootData = [];

        rootData.push({

             site_id     : srch_site_nm

            ,classnm     : "ROOT"

            ,subjclass   : "ROOT"

            ,upsubjclass : ""

            ,orders      : 1

        });

        data = rootData.concat(data);

         

        // 통신

        $.ajax({

            url          : insertDivisionUrl,

            type         : 'POST',

            dataType     : 'json',

            contentType  : 'application/json; charset=utf-8', 

            data         : JSON.stringify({

                site_id  : srch_site_nm,

                data     : data

            }),

            success  : function(result) {

                alert(result.message);

                if ( result.success == true ) {

                    doDivsnSearch();

                }

            },

            error    : function(result) {

            }

        });//$.ajax({

    });

     

    // 부분별 과정 삭제

    $("#btn_divsnDelete").click(function() {

        var  k     = $("#delete_divsn_key").val()

            ,$tree = $("#divsnTree").dynatree("getTree")

            ,node  = $tree.getNodeByKey(k)

            ;

        // TEMP노드는 삭제하지 않는다.

        if ( k == "TEMP" ) {

            return;

        }

         

        if ( node != null ) {

            var parent = node.getParent();

            if ( parent != null && parent.data.key != "ROOT" ) {

                var title  = parent.data.title;

                if ( title != null ) {

                    title = "[*] " + title.replace(/^(\[\*\]\s)?(.+)$/mi, "$2");

                    parent.data.title = title;                  

                }

            }

 

            node.remove();

            $("#site_mnunm").val("");

            $tree.redraw();

        }

        else {

            alert("null");

        }

    });

     

    // test

    (function() {

    })();

});//$(document).ready(function() {

     

// 외부에 오픈할 인터페이스

return {

};

////////////////////////////////////////////////////////////////////////////////////////////////////

})(jQuery);

 


저작자 표시
신고

'JavaScript > dynaTree' 카테고리의 다른 글

[dynatree] TREE TO TREE DRAG AND DROP 예제  (0) 2012.02.21
[dynatree] dynatree node option  (0) 2012.02.09
[dynatree] Option 옵션  (0) 2012.02.09
[dynatree] dynatree (jQuery 기반의 tree-plugin)  (0) 2012.02.08
posted by 뚱2
children: [
    {
    title: null, // (required) Displayed name of the node (html is allowed here)
    key: null, // May be used with activate(), select(), find(), ...
    isFolder: false, // Use a folder icon. Also the node is expandable but not selectable.
    isLazy: false, // Call onLazyRead(), when the node is expanded for the first time to allow for delayed creation of children.
    tooltip: null, // Show this popup text.
    href: null, // Added to the generated < a > tag.
    icon: null, // Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon.
    addClass: null, // Class name added to the node's span tag.
    noLink: false, // Use < span > instead of < a > tag for this node
    activate: false, // Initial active status.
    focus: false, // Initial focused status.
    expand: false, // Initial expanded status.
    select: false, // Initial selected status.
    hideCheckbox: false, // Suppress checkbox display for this node.
    unselectable: false, // Prevent selection.
    // The following attributes are only valid if passed to some functions:
    children: null // Array of child nodes.
    // NOTE: we can also add custom attributes here.
    // This may then also be used in the onActivate(), onSelect() or onLazyTree() callbacks.
    },
    […]
]


저작자 표시
신고

'JavaScript > dynaTree' 카테고리의 다른 글

[dynatree] TREE TO TREE DRAG AND DROP 예제  (0) 2012.02.21
[dynatree] dynatree node option  (0) 2012.02.09
[dynatree] Option 옵션  (0) 2012.02.09
[dynatree] dynatree (jQuery 기반의 tree-plugin)  (0) 2012.02.08
posted by 뚱2
$("#tree").dynatree({
    title: "Dynatree", // Tree's name (only used for debug outpu)
    minExpandLevel: 1, // 1: root node is not collapsible
    imagePath: null, // Path to a folder containing icons. Defaults to 'skin/' subdirectory.
    children: null, // Init tree structure from this object array.
    initId: null, // Init tree structure from a < ul >  element with this ID.
    initAjax: null, // Ajax options used to initialize the tree strucuture.
    autoFocus: true, // Set focus to first child, when expanding or lazy-loading.
    keyboard: true, // Support keyboard navigation.
    persist: false, // Persist expand-status to a cookie
    autoCollapse: false, // Automatically collapse all siblings, when a node is expanded.
    clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand
    activeVisible: true, // Make sure, active nodes are visible (expanded).
    checkbox: false, // Show checkboxes.
    selectMode: 2, // 1:single, 2:multi, 3:multi-hier
    fx: null, // Animations, e.g. null or { height: "toggle", duration: 200 }
    noLink: false, // Use < span > instead of < a > tags for all nodes
    // Low level event handlers: onEvent(dtnode, event): return false, to stop default processing
    onClick: null, // null: generate focus, expand, activate, select events.
    onDblClick: null, // (No default actions.)
    onKeydown: null, // null: generate keyboard navigation (focus, expand, activate).
    onKeypress: null, // (No default actions.)
    onFocus: null, // null: set focus to node.
    onBlur: null, // null: remove focus from node.

    // Pre-event handlers onQueryEvent(flag, dtnode): return false, to stop processing
    onQueryActivate: null, // Callback(flag, dtnode) before a node is (de)activated.
    onQuerySelect: null, // Callback(flag, dtnode) before a node is (de)selected.
    onQueryExpand: null, // Callback(flag, dtnode) before a node is expanded/collpsed.

    // High level event handlers
    onPostInit: null, // Callback(isReloading, isError) when tree was (re)loaded.
    onActivate: null, // Callback(dtnode) when a node is activated.
    onDeactivate: null, // Callback(dtnode) when a node is deactivated.
    onSelect: null, // Callback(flag, dtnode) when a node is (de)selected.
    onExpand: null, // Callback(flag, dtnode) when a node is expanded/collapsed.
    onLazyRead: null, // Callback(dtnode) when a lazy node is expanded for the first time.
    onCustomRender: null, // Callback(dtnode) before a node is rendered. Return a HTML string to override.
    onCreate: null, // Callback(dtnode, nodeSpan) after a node was rendered for the first time.
    onRender: null, // Callback(dtnode, nodeSpan) after a node was rendered.

    // Drag'n'drop support
    dnd: {
        // Make tree nodes draggable:
        onDragStart: null, // Callback(sourceNode), return true, to enable dnd
        onDragStop: null, // Callback(sourceNode)
        // Make tree nodes accept draggables
        autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
        preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
        onDragEnter: null, // Callback(targetNode, sourceNode)
        onDragOver: null, // Callback(targetNode, sourceNode, hitMode)
        onDrop: null, // Callback(targetNode, sourceNode, hitMode)
        onDragLeave: null // Callback(targetNode, sourceNode)
    },
    ajaxDefaults: { // Used by initAjax option
        cache: false, // false: Append random '_' argument to the request url to prevent caching.
        timeout: 0, // >0: Make sure we get an ajax error for invalid URLs
        dataType: "json" // Expect json format and pass json object to callbacks.
    },
    strings: {
        loading: "Loading…",
        loadError: "Load error!"
    },
    generateIds: false, // Generate id attributes like < span id="dynatree-id-KEY" >
    idPrefix: "dynatree-id-", // Used to generate node id's like < span id="dynatree-id-<key>" >.
    keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
    cookieId: "dynatree", // Choose a more unique name, to allow multiple trees.
    cookie: {
        expires: null // Days or Date; null: session cookie
    },
    // Class names used, when rendering the HTML markup.
    // Note: if only single entries are passed for options.classNames, all other
    // values are still set to default.
    classNames: {
        container: "dynatree-container",
        node: "dynatree-node",
        folder: "dynatree-folder",

        empty: "dynatree-empty",
        vline: "dynatree-vline",
        expander: "dynatree-expander",
        connector: "dynatree-connector",
        checkbox: "dynatree-checkbox",
        nodeIcon: "dynatree-icon",
        title: "dynatree-title",
        noConnector: "dynatree-no-connector",

        nodeError: "dynatree-statusnode-error",
        nodeWait: "dynatree-statusnode-wait",
        hidden: "dynatree-hidden",
        combinedExpanderPrefix: "dynatree-exp-",
        combinedIconPrefix: "dynatree-ico-",
        hasChildren: "dynatree-has-children",
        active: "dynatree-active",
        selected: "dynatree-selected",
        expanded: "dynatree-expanded",
        lazy: "dynatree-lazy",
        focused: "dynatree-focused",
        partsel: "dynatree-partsel",
        lastsib: "dynatree-lastsib"
    },
    debugLevel: 1 // 0:quiet, 1:normal, 2:debug
});

저작자 표시
신고

'JavaScript > dynaTree' 카테고리의 다른 글

[dynatree] TREE TO TREE DRAG AND DROP 예제  (0) 2012.02.21
[dynatree] dynatree node option  (0) 2012.02.09
[dynatree] Option 옵션  (0) 2012.02.09
[dynatree] dynatree (jQuery 기반의 tree-plugin)  (0) 2012.02.08
posted by 뚱2
레퍼런스 : http://wwwendt.de/tech/dynatree/doc/samples.html
다운로드 : http://code.google.com/p/dynatree
문서       : http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html



저작자 표시
신고

'JavaScript > dynaTree' 카테고리의 다른 글

[dynatree] TREE TO TREE DRAG AND DROP 예제  (0) 2012.02.21
[dynatree] dynatree node option  (0) 2012.02.09
[dynatree] Option 옵션  (0) 2012.02.09
[dynatree] dynatree (jQuery 기반의 tree-plugin)  (0) 2012.02.08
posted by 뚱2