뚱2's Story

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);
 

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.
    },
    […]
]

$("#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
});