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] 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

[html] http 프로토콜

JavaScript/Html 2012. 2. 16. 13:30

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

[html] Zen Coding 링크  (0) 2012.09.23
[html] dd, dt, dl  (0) 2012.06.22
[html] html 특수문자 태그  (0) 2011.08.18
[html] map 사용  (0) 2011.07.22
posted by 뚱2
원본 : http://koko8829.tistory.com/1155

Dojo는 꽤 오랜 역사(2004년부터)를 가지고 있음에도 불구하고 국내에서는 잘 알려지지 않은 프레임워크입니다. 이름때문에 그런지도 모르겠네요.
IBM에서 적극적으로 참여하고 있기 때문에 얼마전 DW에 대량으로 기술자료가 공개가 되었습니다.

우선 가장 기본적인 시작하기 부터
Dojo 처음부터 시작하기, Part 1: Dojo 개발 시작하기
http://www.ibm.com/developerworks/kr/library/wa-ground/  

http://pragprog.com/book/rgdojo/mastering-dojo

http://pragprog.com/book/rgdojo/mastering-dojo


자바스크립트에 대한 경험이 없는 자바개발자들을 위한 콘텐츠도 제공하고
Java 개발자를 위한 Dojo 개념
http://www.ibm.com/developerworks/kr/library/wa-aj-dojo/index.html  

대규모 애플리케이션 개발에 이르기까지 다양한 주제를 다루고 있습니다.
사용자 정의 Dojo 빌드로 대규모 웹 애플리케이션을 신속하게 로드하기
http://www.ibm.com/developerworks/kr/library/wa-bigweb/index.html  

12월에 올라온 자료만 10건이 넘네요. 
http://www.ibm.com/developerworks/kr/views/web/libraryview.jsp  

자신에게 맞는 콘텐츠를 골라서 개념적인 접근을 할 수 있습니다.
좀 더 기본적인 내용은  http://dojofoundation.org/ 에서 참고할 수 있습니다.

* dojo (どうじょう)는 일본어로 도장이라는 의미입니다. 개발을 수련의 과정으로 이미지화하면서 이런 이름을 가지게 된것이 아닌가 싶네요. 위에 있는 책 표지부터 그런 느낌이 나죠.
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] Option 옵션  (0) 2012.02.09
[dynatree] dynatree (jQuery 기반의 tree-plugin)  (0) 2012.02.08
posted by 뚱2
var str = "<span id ='' />";
// 변경할 문자가 브라우져가 인식해서 할수 없이 띄어쓰기를 했다.
// 실제 변경할때는 변경할 문자들 사이에 공백이 없어야 한다.
str.replace(/<(\/?[a-zA-Z]+?.*?\/?)>/gmi, "& l t ; $1 & g t ;");

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

posted by 뚱2

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

[ExtJS] ExtJS4에서 JSON의 패키지 위치 변경  (0) 2011.10.13
posted by 뚱2
posted by 뚱2
윈도우에서 javascript를 사용할수 있는 방법
CreateObject로 COM을 사용할수 있기때문에 조금만 머리 굴리면 웬만한건 다 될듯 하다.

링크 : http://msdn.microsoft.com/ko-kr/library/9bbdkx3k.aspx
Reference : http://msdn.microsoft.com/ko-kr/library/98591fh7.aspx
참고 : http://bybi.tistory.com/320


posted by 뚱2
참고 : 자바스크립트 완벽가이드 (JavaScript The Definitive Guide 5/E)

i : 대소문자를 구별하지 않는 매칭을 수행한다.
g : 전역 매칭을 수행한다. 즉, 첫 번째 매치에서 끝내지 않고 매치되는 모든 것을 찾는다.
m : 여러 줄 상태 ^는 줄의 시작이나 문자열의 시작에 매치되고, $는 줄의 끝이나 문자열의 끝에 매치된다.

1. search()
   이 메서드는 정규 표현식을 전달인자로 받아서 가장 처음 매칭되는 부분 문자열의 위치를 반환하고
   , 매칭되는 부분 문자열이 없다면 -1을 반환한다.
   * 정규표현식에서 g 플래그가 있으면 무시한다.

2. replace()
   이 메서드는 찾아서 바꾸기 작업을 수행한다.
   * 정규 표현식에 g 플래그가 설정되어 있으면 문자열내에서 패턴에 매치되는 무든 부분 문자열을 교체할 문자열로 바꾼다.
   * 정규 표현식에서 괄호로 묶인 부분 표현식은 왼쪽에서 오른쪽으로 번호가 매겨지고, 각 부분 표현식과 매치된 텍스트를 기억한다.
      만약 교체할 문자열에 $가 나오고 뒤따라 숫자가 나타나면 replace() 메서드는 $와 숫자를 부분 문자열에 매치된 텍스트로 바꾼다.

3. match()
    이 메서드는 정규 표현식을 유일한 전달인자로 받고 매치된 결과를 배열로 만들어 반환한다.
    , 매칭되는 부분 문자열이 없다면 null을 반환한다.


posted by 뚱2
var parent = {
	 method1 : function() {
	 }
};

var child = (function(parentObj) {
    var F = function(){
        this.method2 = function() {
        };
    };
    F.prototype = parentObj;
    return (new F());
})(parent);

console.log("method1" in child);// true
console.log("method2" in child);// true
console.log(child.hasOwnProperty("method1") );// false
console.log(child.hasOwnProperty("method2") );//true

초 간단 샘플예제이다.
객체에  메소드가 존재하는지 확인하는 방법은 hasOwnProperty 메소드와 in 연산자로 확인할수 있다.
다만 hasOwnProperty는 객체 자신의 메소드 인지 확인하는 것이고
in 연산자는 상속계통을 다 뒤져서 존재하는지 확인하는 메소드 이다.
posted by 뚱2

arguments.callee

This property is a reference to the function that you are in. Which is very handy if you want to get a reference to an anonymous function from inside itself. One good reason for doing this would be in a recursive anonymous function.

arguments.caller

This property is a reference to the function that called the function you are in. This allows you to get access to the entire current callstack which is very handy for debugging.


function test() {
    console.log(">>>test");
    console.log("arguments.callee\n" + arguments.callee);
    console.log("arguments.caller\n" + arguments.caller);
    console.log("arguments.callee.caller\n" + arguments.callee.caller);
    test1();
}

function test1() {
    console.log(">>>test1");
    console.log("arguments.callee\n" + arguments.callee);
    console.log("arguments.caller\n" + arguments.caller);
    console.log("arguments.callee.caller\n" + arguments.callee.caller);        
}    
test();

//  로그기록
//>>>test
//arguments.callee 
//function test() { 
//    console.log(">>>test"); 
//    console.log("arguments.callee\n" + arguments.callee); 
//    console.log("arguments.caller\n" + arguments.caller); 
//    console.log("arguments.callee.caller\n" + arguments.callee.caller); 
//    test1(); 
//}
//arguments.caller undefined
//arguments.callee.caller null
//>>>test1
//arguments.callee 
//function test1() { 
//    console.log(">>>test1"); 
//    console.log("arguments.callee\n" + arguments.callee); 
//    console.log("arguments.caller\n" + arguments.caller); 
//    console.log("arguments.callee.caller\n" + arguments.callee.caller); 
//}
//arguments.caller undefined
//arguments.callee.caller 
//function test() { 
//    console.log(">>>test"); 
//    console.log("arguments.callee\n" + arguments.callee); 
//    console.log("arguments.caller\n" + arguments.caller); 
//    console.log("arguments.callee.caller\n" + arguments.callee.caller); 
//    test1(); 
//}

위와 같이 오출하면 로그(firefox)이 찍힌다.
결국 arguments.callee 는 함수의 입장에서 자기자신
arguments.callee.caller 는 arguments.callee를 호출한 함수이다.
호출한 쪽이 함수가 아니라 전역환경이라면
arguments.callee.caller null 이다.
arguments.callee는 익명함수의 재귀호출에 유용하다.

* 추가적으로 callee, caller가 null이거나 undefined가 아닐때
Object.prototype.toString.call(arguments.callee);
Object.prototype.toString.call(arguments.callee.caller);
호출해 보면은 둘다 [object Function]을 리턴하는것을 알수 있다.


posted by 뚱2
jQuery를 이용해서 만들었다.
기본적으로 jQuery를 임포트 해야 한다.

var myStringify = function(data) {
    var  msg           = ""
        ,myData        = data || {}
        ,mySection     = ","
        ,isData        = false
        ,dataType      = jQuery.type(myData)
        ;
          
    // 배열인지 검사
    if ( dataType == "array" ) {
        msg += "[";
    }
    else if ( dataType == "object" ) {
        msg += "{";
    }
      
    jQuery.each(myData, function(k, v) {
        isData = true;
        var propertyType = jQuery.type(v);
         
        if ( propertyType == "array" || propertyType == "object" ) {
            if ( dataType == "array" ) {
                msg += arguments.callee(v);
            }
            else {
            	msg += "\"" + k + "\":" + arguments.callee(v);                    	
            }
            msg += mySection;
        }
        else {
            if ( dataType == "array" ) {
                msg += v;
            }
            else {
                msg += "\"" + k + "\":";
                if ( propertyType == "string" ) {
                    msg += "\"" + v + "\"";
                }
                else {
                	msg += "" + v;
                }
            }
            msg +=  mySection;
        }
    });//jQuery.each(myData, function(k, v) {
  
    if ( isData == true ) {
        msg = msg.substring(0, msg.length-1);
    }
  
    if ( dataType == "array" ) {
        msg += "]";
    }
    else if ( dataType == "object" ) {
        msg += "}";
    }
  
    return msg;
};//var myStringify = function(data) {


posted by 뚱2
욜심히 만들었더니 jQuery.type() 이란 메소드가 있다. ㅡㅡ; 찾아볼걸...
// getType(true) "boolean"를 리턴
// getType(1) "number"를 리턴
// getType(1.1) "number"를 리턴
// getType("") "string"를 리턴
// getType(function(){}) "function"를 리턴
// getType(new Date()) "date"를 리턴
// getType(/^$/) "regexp"를 리턴

function getType(obj) {
    var  msg   = "undefined" 
        ,myObj = obj
        ;
    if ( myObj != null ) {
        var strType = Object.prototype.toString.call(myObj);
        var match   = strType.match(/^\[object (.+)\]$/i);
    
        msg = match && match[1].toLowerCase();            	
    }
    
    return msg;
}


posted by 뚱2

'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
posted by 뚱2
링크 : http://jqapi.com/
링크 : http://visualjquery.com (트레픽 제한이 있는지 가끔 무지하게 느리다.)

posted by 뚱2
posted by 뚱2
window.onload 전에 이미지나 리소스가 로딩되기 전에 일어나는 이벤트이다.
다만 ie에서는 버그가 있어서 잘 되지 않는 경우가 있다.

출처 : http://blog.iolo.pe.kr/284

onReady = (function(ie){
    var d = document;
    return ie ? function(c){
        var n = d.firstChild,
        f = function(){
            try{
                c(n.doScroll('left'))
            }catch(e){
                setTimeout(f, 10)
            }
        }; f()
    } : 
    /webkit|safari|khtml/i.test(navigator.userAgent) ? function(c){
        var f = function(){
            /loaded|complete/.test(d.readyState) ? c() : setTimeout(f, 10)
        }; f()
    } : 
    function(c){
        d.addEventListener("DOMContentLoaded", c, false);
    }
})(/*@cc_on 1@*/);

onReady(function(){

    alert("Hello DOM");

});

posted by 뚱2

위와 같은 폼이 있습니다.
조건을 선택하고 검색 버튼을 클릭하면은 해당 결과가 아래의 그리드에 나타납니다.
조건 TEXT에 입력하고 Enter키를 누르면 검색 버튼을 클릭하는것도 같은 효과를 나타내주고 싶을때 입니다.


onSubmit="return false;" 꼭 작성해 주셔야 클릭시에 폼이 자동으로 전송되는건 막아줍니다.
* onSubmit="return false;" 하는 이유 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=155693

jQuery(document).ready(function($) {
    $("#listForm input[name=srch_text]").keydown(function(e){
        if(e.keyCode == 13){
            e.cancelBubble = true;
            $("#btn_search").click();
            return false;
        }
    });
});
keyDown이벤트를 잡고 enter키를 확인합니다. 이벤트가 전파되지 않게 e.cancelBubble 를 true 넣어줍니다.



posted by 뚱2

/**
 * jqGrid 
 * desc   : 선택된 Rows를 Dataset Array를 만들어준다.
 *          isAll에 true를 넣어주면 전체 데이터를 가져온다.
 * return : array
 * 
 * comment : 데이터가 선택되지 않으면 빈 배열을 리턴한다.
 */
jQuery.fn.getArrayFromGridRow = function(isAll) {
	var _isAll = false;
	if ( arguments.length > 0 && isAll == true ) {
		_isAll = true;
	}

    var arrayData = [];	
	try {
        var $grid = this;
        
        // jqGird검사
        if ( $grid.jqGrid == null || $grid.jqGrid == undefined ) {
            return arrayData;
        }
        
        var selRows = ( _isAll ? $grid.getDataIDs() : $grid.getGridParam("selarrrow") );
        $.each(selRows, function(index, value) {
            arrayData[index] = $grid.getRowData(value);
        });
	}
	catch(e) {
		alert(e.message);
		return arrayData;
	}
	
    return arrayData;
};

/**
 * jqGrid 
 * desc   : 현재 선택된 Rows를 Dataset Array를 만들어준다.
 * return : array
 */
jQuery.fn.getArrayFromMultiSelectedRow = function() {
	return this.getArrayFromGridRow(false);
};

/**
 * jqGrid 
 * desc   : 전체 row를 Dataset Array를 만들어준다.
 * return : array
 */
jQuery.fn.getArrayFromAllRow = function() {
	return this.getArrayFromGridRow(true);
};

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

[jqGrid] Composite Model Data 사용하기  (0) 2013.12.18
[jqGrid] Homepage and Manual  (0) 2013.11.12
posted by 뚱2

var gridData = $(ID.GRID_MAIN).getArrayFromMultiSelectedRow();

if ( gridData.length == 0 ) {

    // 항목을 선택하세요.

    alert("<g:message code='MESSAGE.com.msg.select' />");

    return;

}

 

$.ajax({

    url         : './_deleteDiagnosisTargetList.do'

   ,type        : 'POST'

   ,cache       : false

   ,data        : JSON.stringify({data:gridData})

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

   ,dataType    : 'json'

   ,success     : function(result) {

       if ( result.success == true ) {

           var str = "";

           $.each(result.list, function(index, rec) {

                str += rec + "\n";

           });

           alert(str);

           $(ID.GRID_MAIN).trigger("reloadGrid");

       }

   }

   ,error: function(result) {

   }

});


posted by 뚱2
jQuery의 serializeArray를 이용한다.



위의 폼을 var arr = $("#listForm").serializeArray()를 호출하면
// 아래와 같은 arr의 형태로 생성된다.
arr = [
    {name : 'test_01', value : '1'}
   ,{name : 'test_02', value : '2'}
   ,{name : 'test_03', value : '3'}
];

그래서 위의 serializeArray 메소드를 이용해서 json형태로 만들어준다.
/**
 * jqGrid
 * desc   : form의 데이터를 json 형태로 변환해 준다.
 * return : 성공시에는 객체(JSON)을 리턴한다. 실패시에는 null을 리턴한다.
 */
jQuery.fn.serializeObject = function() {
	var obj = null;
	try {
		if ( this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) {
			var arr = this.serializeArray();
			if ( arr ) {
				obj = {};
				jQuery.each(arr, function() {
					obj[this.name] = this.value;
				});				
			}//if ( arr ) {
 		}
	}
	catch(e) {alert(e.message);}
	finally  {}
	
	return obj;
};



posted by 뚱2
posted by 뚱2
구글에서 jQuery를 항상 최신으로 유지시켜주는 URL이다.
개발할때 유용할 듯 하다.

* 1.X.X 버전 지원 (jQuery 버전이 업데이트 되면 같이 업데이트 된다.)
경량화 버전 :  https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
일반 버전 : https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js







posted by 뚱2

if ( typeof test == 'undefined' ) 
    var test = {};

test.getIEVersion = function() {
    var myAgent = navigator.userAgent;
    var result = myAgent.match( /MSIE\s(\d{1,2}\.\d{1})/i );
    var retString = "";
    if ( result == null ) {
        retString = "none";
    }
    else {
        retString = result[1];
    }

    return retString;
};

alert(test.getIEVersion());



posted by 뚱2

if ( typeof test == 'undefined' )
    var test = {};

test.getBroswerName = function() { 
    // 아래에 검색할 브러우져 이름을 추가한다.
    var myAgent = [
         "MSIE"
        ,"FIREFOX"
        ,"CHROME"
    ];
    var currentAgent = navigator.userAgent;
    currentAgent = currentAgent.toUpperCase();
    
    for (var i = 0; i < myAgent.length; i++ ) {
        if ( currentAgent.indexOf(myAgent[i].toUpperCase()) != -1 ) {
            return myAgent[i];
        }
    }

    return "NONE";
};


//사용방법
alert(test.getBroswerName());

posted by 뚱2
기존의 C계열(C, Java)의 프로그램에서 변수의 유효범위는 {}로 정해진다.
자바스크립트도 문법은 C계통과 비슷 ( java) 하기에 당연스럽게 {}가 변수 유효범위인줄 알았다.
아래와 같이 테스트 해보니 예외가 발생하지 않는다.
결국 자바스크립트에서 변수의 유효범위는 함수기반이다.

* 확실히 하기 위해서 익명함수를 만들고 바로 try catch 구분을 걸었으며 if문 안의 {}안에 변수를
  선언했지만 결과적으로 유효하게 alert창이 출력된다.

//예외가 발생하지 않는다.
try {
    alert((function() { 
        try {
            if ( true ) {
                var myVal = "함수 안의 if 구분 안입니다.";
            }
        }
        catch(e) {alert(e.message);}
        finally  {}
        
        return myVal;
    })());
}
catch(e) {alert(e.message);}
finally  {}

posted by 뚱2

/**

* POST 방식으로 전송하는 팝업창

* url        : 팝업창 경로

* data       : object, array

* popName    : 팝업창 이름 

* popWidth   : 팝업창 가로 길이 (생략하면 화면 넓이에 맞춰진다.)

* popHeight  : 팝업창 세로 길이 (생략하면 화면 높에에 맞춰진다.)

* popOptions : 팝업창 옵션 (생략하면 기본으로 scrollbars=yes 이다.)

* comment :

*     데이터를 json 형식으로 넘겨도 된다.

*     예) gls.openPostPopup({

*             url     : 경로

*            ,data    : json data

*            ,target  : 이름

*            ,width   : 넓이

*            ,height  : 높이

*            ,options : 옵션

*         });

*     데이터가 필요없는 부분은 json property로 넣지 않아도 된다.    

*/

SEED.openPostPopup = function(obj, data, popName, popWidth, popHeight, popOptions) {

var myPop = null;

try {

var param = null;

// json object이라면

if ( obj && typeof obj == 'object' ) {

param = {

'url'     : SEED.url(obj.url)   || ''

,'data'    : obj.data                 || []

,'target'  : obj.target               || ''

,'width'   : obj.width               || screen.availWith

,'height'  : obj.height               || screen.availHeight

,'options' : obj.options             || 'scrollbars=yes'

};

}

else {

param = {

'url'     : SEED.url(obj)       || ''

,'data'    : data                     || []

,'target'  : popName                 || ''

,'width'   : popWidth                 || screen.availWith

,'height'  : popHeight               || screen.availHeight

,'options' : popOptions               || 'scrollbars=yes'

}; 

}

if ( $.type(param.data) == "object" ) {

param.data = [param.data];

}

//랜덤한 수를 출력

var curDate   = new Date();

var ranNumber = Math.floor(Math.random() * 10000) + 1;

var strId = "";

   strId += param.target;

   strId += "_";    

   strId += (new Date()).getTime();

   strId += "_" + ranNumber;

   

var $popForm = $("<form onSummit='return false;'></form>")

.attr("name"  , strId)

.attr("id"    , strId)

.attr("method", "POST");

if ( $popForm ) {

// 배열 순회

$.each(param.data, function(i, elem) {

// 객체 순회

$.each(elem, function(key, val) { 

       $("<input type='hidden'/>")

       .attr("name" , key)

       .attr("value", val)

       .appendTo($popForm);

});

});//$.each(para.data, function(i, elem) {

$popForm.appendTo(document.body);

   myPop = SEED.openWin("", param.target, null, param.width, param.height, param.options);

   var myForm = $popForm[0];

   myForm.action = param.url;

   myForm.method = "POST";

   myForm.target = param.target;

   

   // 현재 생성한 form을 삭제한다.

   myForm.submit();

   if ( $popForm.size() > 0 ) {

    $popForm.remove();

   }

}//if ( $popForm ) {

}

catch (e) {alert(e.message);}

finally   {}


return myPop;

};


posted by 뚱2
jQuery에서 검색 메소드 입니다.
다양한 검색 메소드들이 있지만 이 세가지 (find, filter, children) 메소드를 헷갈릴때가 있습니다.

filter : 현재 검색된 객체(집합)에서 다시 한번 검색하는 메소드
find : 현재 검색된 객체(집합)의 자손들에서 검색 하는 메소드, 자식의 레벨은 상관없습니다.
children : 현재 검색된 객체(집합)의 직속 자식만 검색하는 메소드

filter는 검색된 결과 객체 집합에서 특정 집합으로 다시 한번 검색 할때 사용합니다.
find 검색된 결과 객체 집합의 하위레벨을 다 뒤져서(자손) 검색 할때 사용 합니다.
children 검색된 결과 객체 집하의 바로 자식들만 뒤져서(자식) 검색 할때 사용합니다.

* 참고
  filter : http://api.jquery.com/filter/
  find  : http://api.jquery.com/find/
  children : http://api.jquery.com/children/
posted by 뚱2
아이디어는 간단하다  Dom Object를 동적으로 생성할때나
동적으로 함수를 호출할때 리터럴 객체를 인자로 전달하는게 일반 인자를 쭉 나열하는것보다 편하다
이유는
1. 객체 쪽에 속성을 추가하면 함수 인자를 추가하는 효과가 있다.
2. 인자 리스트가 지저분하게 길어지지 않는다.
3. 인자의 순서를 신경쓸 필요가 없다.
그리고 가장 중요한 편한점중 하나는 유지보수 및 관리가 편하다는 것이다.

// 포매터
function myFormatter(cellvalue, options, rowObject) {
	var retString = "";
	var strJsonText = JSON.stringify(rowObject);
    strJsonText = strJsonText.replace(/\"/gi, "'");
    	
    // 문항관리
	if ( cellvalue.toUpperCase() == "QUESTION_MGMNT" ) {
		retString = "문항관리";
	}
    // 미리보기
	else if ( cellvalue.toUpperCase() == "PREVIEW" ) {
		retString = "미리보기";
	}
    // 진단명
	else if ( /(.+)/gi.test(cellvalue) == true ) {
		retString = "" + cellvalue + "";
	}
	else {
		retString = cellvalue;
	}
    
	return retString;
}

4-5번째 줄을 살펴보면 리터를 객체를 받아서 jsontext로 변경해서 붙여준다.
posted by 뚱2