jqTree 를 이용한 트리메뉴 예제

2015-10-19 by 편리

해보고 싶은 건 일단 해보는 요즘이다. 트리메뉴를 만들어볼까? 하는 생각에 일단 시작을 했는데.. 이게 생각만큼 쉽지가 않다. 일단 트리메뉴를 출력하고 간단하게 추가, 수정, 삭제 정도만 되도록 해봤는데.. 물론 더 좋은 플러그인들이 있겠지만 이렇게 직접 해보는 게 구조를 이해하는 데는 좋기 때문에 나만의 코드로 코딩을 해봤다.

데모 : http://codepub.net/jquery/jqtree/jqtree.html

jqTree : https://mbraak.github.io/jqTree/
jqTreeContextMenu : http://hackersome.com/p/DavidUv/jqTreeContextMenu

아래는 jqtree.html 파일의 코드이다.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jqTree</title>
<link rel="stylesheet" href="./jqtree.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="./tree.jquery.js"></script>
<script src="./jqTreeContextMenu.js"></script>
</head>
<body>

<div id="tree1"></div>

<ul id="ContextMenu" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li class="add"><a href="#add"><i class="icon-plus"></i> Add</a></li>
    <li class="edit"><a href="#edit"><i class="icon-edit"></i> Edit</a></li>
    <li class="divider"></li>
    <li class="delete"><a href="#delete"><i class="icon-remove"></i> Delete</a></li>
</ul>

<script>
$(function () {
    var edt_node = null;

    var data = [{
        label: "node1",
        children: [{ label: "child1" },
                   { label: "child2" }]
    },{
        label: "node2",
        children: [{ label: "child3"}]
    }, {
        label: "node3"
    }];

    var $tree = $("#tree1");

    $tree.tree({
        data: data,
        onCreateLi: function(node, $li) {
            // Add 'icon' span before title
            $li.find('.jqtree-title').before('<span class="icon"></span>');
        },
        autoOpen: true,
        usecontextmenu: true
    });

    $tree.jqTreeContextMenu($("#ContextMenu"), {
        "add": function (node) {
            $tree.tree("appendNode", { label: "new node" }, node);
            $tree.tree("openNode", node);
        },
        "edit": function (node) {
            var $edit = $("#edit_label");
            if(edt_node != node && $edit.size() > 0) {
                var $input = $edit.find("input:text");
                var label = $.trim($input.val());

                updateNodeLabel(edt_node, label);
                $edit.remove();
            }

            edt_node = node;
            var $el = $(node.element);
            $el.find("span.jqtree-title:first").after('<span id="edit_label"><input type="text" name="label" value="'+node.name+'"><button type="button" id="edit_submit">수정</button></span>').hide();
        },
        "delete": function (node) {
            $tree.tree("removeNode", node);
        }
    });

    $(document).on("click", "#edit_submit", function() {
        var $this = $(this);
        var $input = $this.siblings( "input:text");
        var label = $.trim($input.val());
        $this.siblings(".jqtree-title").show();
        $("#edit_label").remove();

        updateNodeLabel(edt_node, label);
    });

    function updateNodeLabel(node, label)
    {
        $tree.tree("updateNode", node, label);
        edt_node = null;
    }
});
</script>

</body>
</html>

소스파일 : jqtree.zip

Leave a Reply Cancel reply