자바스크립트(jquery) 트리뷰(treeview.js)

마스터욱 0 27 0 0 2019-05-21 08:55:33
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
위 오픈소스 트리 jquery 라이브러리로 짜본 소스코드이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
    <div id="sidetree">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h6 class="panel-title">
                    <i class="fa fa-building-o" aria-hidden="true" style="margin-right:5px;"></i></h6>
            </div>
            <div class="panel-body">
                <!--<div id="sidetreecontrol"><a href="?#">전체 닫기</a> | <a href="?#">전체 열기</a></div>-->
                <div class="form-group">
                    <label class="col-sm-1 control-label"><button type="button" class="btn btn-info" onclick="add_tree('tree');"><i class="fa fa-plus"></i> 부서추가</button></label>
                    <div class="col-sm-11">
                        <style type="text/css">
                            #sidetree input { width:150px; color:#000; }
                            #sidetree i { margin:0px; }
                            #sidetree button { height:30px; vertical-align:-1px; }
                        </style>
                        <script type="text/javascript">
                            $(document).ready(function(){
                                var tree_list = $.parseJSON('{"tree_1":{"tree_id":"tree_1","tree_value":"\uc6b4\uc601\ud300"},"tree_1_1":{"tree_id":"tree_1_1","tree_value":"\uc6b4\uc601\uc9c0\uc6d0\ud300"},"tree_2":{"tree_id":"tree_2","tree_value":"\uc9c0\uc6d0\ud300"},"tree_2_1":{"tree_id":"tree_2_1","tree_value":"\uac1c\ubc1c\ud300"},"tree_2_2":{"tree_id":"tree_2_2","tree_value":"\ub514\uc790\uc778\ud300"},"tree_3":{"tree_id":"tree_3","tree_value":"\uc0c1\ub2f4\ud300"}}');
                                for(var key in tree_list)
                                {
                                    var row = tree_list[key];
                                    add_tree_tag(row['tree_id'], row['tree_value']);
                                }
                            });
 
                            function add_tree(parent_tree_id)
                            {
                                var parent_depth = parent_tree_id.split("_").length;
                                var tree_id_last = "";
                                $("#tree li").each(function(){
                                    if($(this).attr("id").indexOf(parent_tree_id + "_") != -1)
                                    {
                                        if($(this).attr("id").split("_").length == parent_depth + 1){
                                            tree_id_last = $(this).attr("id");
                                        }
                                    }
                                });
 
                                var next_tree_number = "";
                                if(tree_id_last == ""){ //1depth
                                    next_tree_number = "1";
                                }
                                else
                                {
                                    var tree_id_last_split = tree_id_last.split("_");
                                    var next_tree_number = parseInt(tree_id_last_split[tree_id_last_split.length - 1]) + 1;
                                }
 
                                var create_tree_id = parent_tree_id + "_" + next_tree_number;
                                tree_value = "";
                                //var tree_value = create_tree_id;
 
                                add_tree_tag(create_tree_id, tree_value);
                            }
 
                            function add_tree_tag(create_tree_id, tree_value)
                            {
                                var parent_tree_id = new Array();
                                var create_tree_id_split = create_tree_id.split("_");
                                create_tree_id_split.pop();
                                for(var key in create_tree_id_split){
                                    parent_tree_id.push(create_tree_id_split[key]);
                                }
                                parent_tree_id = parent_tree_id.join("_");
 
                                var btn_tag = "";
                                btn_tag += "<button type='button' class='btn btn-info' onclick=\"add_tree('"+create_tree_id+"')\"><i class='fa fa-plus'></i></button>";
                                btn_tag += "<button type='button' class='btn btn-danger' onclick=\"del_tree('"+create_tree_id+"','del')\"><i class='fa fa-times'></i></button>";
 
                                var tree_tag = "<li id='"+create_tree_id+"'><input type='text' name='"+create_tree_id+"' value='"+tree_value+"' /> "+btn_tag+"</li>";
 
                                //console.log(parent_tree_id + " => " + create_tree_id);
                                $("#" + parent_tree_id).append(tree_tag);
                            }
 
                            function del_tree(tree_id){
                                $("#" + tree_id).remove();
                            }
                        </script>
                        <form id="organ_form">
                            <ul id="tree"></ul>
                        </form>
                    </div>
                    <div class="col-sm-12">
                        <button type="button" class="btn btn-success" onclick="set_organ();"><i class="fa fa-save"></i> 저장</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
Colored by Color Scripter
cs
조직도를 만들어야 할 상황이 발생했는데, 검색해보니 treeview 소스가 제일 만만해서, 가져와서 가공했습니다.
0
0