簡單的JsTree 樹形視圖 checkbox demo

時間 2019-11-17

標籤簡單 jstree 視圖 checkbox demo 欄目 HTML 简体版

原文原文鏈接

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

該demo基於json數據 html

實現效果： node

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。