簡單的JsTree 樹形視圖 checkbox demo

fpwb4193 9年前發布 | 10K 次閱讀 JavaScript

jsTree是一個基于jQuery的Tree控件。支持 XML，JSON，Html三種數據源。提供創建，重命名，移動，刪除，拖放節點操作。可以自己自定義創建，刪除，嵌套，重命名，選擇節點的規則。在這些操作上可以添加多種監聽事件。 更多信息請訪問： http://www.jstree.com/

該demo基于json數據

實現效果：

下載并引入jquery和jstree以及相應的css 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jstree</title>
    <link href="../css/plugins/jsTree/style.min.css" rel="stylesheet">
</head>
<body>
<div class="ibox-content">
    <div id="using_json"></div>
</div>
<input type="button" value="打開選擇的id" onclick="openId();">
</body>
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/plugins/jsTree/jstree.min.js"></script>
<script>

    function openId(){
        //獲取選中的節點
        var nodes=$("#using_json").jstree("get_checked");
        alert(nodes);
    }
    $(function(){
        $("#using_json").jstree({
            "core": {
                "data": ["Empty Folder", {
                    "id":1,
                    "text": "Resources",
                    "state": {
                        "opened": true
                    },
                    "children": [{
                        "id":2,
                        "text": "css",
                        "children": [{
                            "id":3,
                            "text": "animate.css",
                            "icon": "none"
                             },
                            {
                                "id":4,
                                "text": "bootstrap.css",
                                "icon": "none"
                            },
                            {
                                "id":5,
                                "text": "main.css",
                                "icon": "none"
                            },
                            {
                                "id":6,
                                "text": "style.css",
                                "icon": "none"
                            }],
                        "state": {
                            "opened": true
                        }
                    },
                        {
                            "id":20,
                            "text": "js",
                            "children": [{
                                "id":7,
                                "text": "bootstrap.js",
                                "icon": "none"
                            },
                                {
                                    "id":8,
                                    "text": "hplus.min.js",
                                    "icon": "none"
                                },
                                {
                                    "id":9,
                                    "text": "jquery.min.js",
                                    "icon": "none",
                                    "state":{
                                        "selected":true
                                    }
                                },
                                {
                                    "id":10,
                                    "text": "jsTree.min.js",
                                    "icon": "none"
                                },
                                {
                                    "id":11,
                                    "text": "custom.min.js",
                                    "icon": "none"
                                }],
                            "state": {
                                "opened": true
                            }
                        },
                        {
                            "id":17,
                            "text": "html",
                            "children": [{
                                "id":12,
                                "text": "layout.html",
                                "icon": "none"
                            },
                                {
                                    "id":13,
                                    "text": "navigation.html",
                                    "icon": "none"
                                },
                                {
                                    "id":14,
                                    "text": "navbar.html",
                                    "icon": "none"
                                },
                                {
                                    "id":15,
                                    "text": "footer.html",
                                    "icon": "none"
                                },
                                {
                                    "id":16,
                                    "text": "sidebar.html",
                                    "icon": "none"
                                }],
                            "state": {
                                "opened": true
                            }
                        }]
                },
                    "Fonts", "Images", "Scripts", "Templates", ]
            },
            "checkbox" : {
                "keep_selected_style" : false
            },
            "plugins" : [ "wholerow", "checkbox" ]
        })
    });
</script>
</html>



 本文由用戶 fpwb4193 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！