Blog Content

    티스토리 뷰

    01.jQuery - jstree 기본 구성

    반응형

    jstree 사이트에서 파일을 다운받아 압축을 풀고 프로젝트에 추가하였습니다.

    압축을 푼 파일을 보면 안에 _docs 폴더가 있는데요. 이 안에 예제가 많이 있습니다.

    _docs\ui.html 예제 내용입니다.

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%--인터넷 7,8에서 깨짐 해결방안--%>
     
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html" charset="utf-8" />
        <title>카테고리 설정</title>
        
        <script src="../Common/Treeviewjs(jstree)/jquery.js" type="text/javascript"></script>
        <script src="../Common/Treeviewjs(jstree)/jquery.jstree.js" type="text/javascript"></script>
     
        <link href="../Common/Treeviewjs(jstree)/!style.css" rel="stylesheet" type="text/css" />
    </head>
     
    <body>
        <div id='demo1' class='demo'>
            <ul>
                <li id="phtml_1">
                    <a href="#">Root node 1</a>
                    <ul>
                        <li id="phtml_2">
                            <a href="#">Child node 1</a>
                        </li>
                        <li id="phtml_3">
                            <a href="#">Child node 2</a>
                        </li>
                    </ul>
                </li>
                <li id="phtml_4">
                    <a href="#">Root node 2</a>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            $(function () {
                $("#demo1").jstree({
                    "ui": {
                        "select_limit": -1,
                        "select_multiple_modifier""alt"//중복 선택시 사용할 키
                        "selected_parent_close""select_parent",
                        "initially_select": ["phtml_2"]
                    },
                    "core": { "initially_open": ["phtml_1"] },
                    "plugins": ["themes""html_data""ui"]
                });
            });
        </script>
    </body>
    </html>

    결과확인


    참 쉽죠~?
    끝~
     
    반응형

    Comments