마스터욱 0 155 0 0

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

 

 

조직도를 만들어야 할 상황이 발생했는데, 검색해보니 treeview 소스가 제일 만만해서, 가져와서 가공했습니다.
 

Comments


제목 글쓴이
javascript : JSON 데이터 안의 데이터를 동적으로 바꾸는 방법 마스터욱
자바스크립트 팝업(POPUP) 자동(Auto) 리사이징(Resizing) 마스터욱
자바스크립트 get 파라메터를 string 으로 리턴해주는 함수 마스터욱
비트맥스API Javascript Websocket Private API 연결 마스터욱
JSON 데이터를 Table 코드로 보기좋게 변경해주는 함수(재귀) 마스터욱
navigator.geolocation 쉽게 사용하기 마스터욱
input 박스 소수점 2자리 제한 스크립트 마스터욱
HTML5 스토리지(localStorage)의 사용 마스터욱
가장 쓸만한 슬라이드 jquery 마스터욱
스윗알럿 자주쓰는거 메모 마스터욱
안드로이드, IOS, PC 구분방법 마스터욱
huobi websocket blob 데이터 처리방법 마스터욱
okex 거래소 websocket blob 데이터 처리방법 마스터욱
웹에서 간단하게 사운드를 출력하는 방법 마스터욱
트레이딩뷰(trading view) 차트 API 개발 댓글 2 마스터욱
브라우저 높이(Height) 값이 변경될때, 스크립트 실행시키기 마스터욱
서버시간과 클라이언트시간 똑같이 맞추기 마스터욱
input number maxlength 넣기 마스터욱
sweetalert.js callback 구현 마스터욱
PDF.js 를 이용한 브라우저상에서 PDF 바로 보기 마스터욱
카테고리