JS Tree使用詳解

一、什麼是jstree

jstree是一個基於jQuery的、輕量級的、可定製的、實用的樹結構插件，支持多種數據源和多種節點類型。它可以幫助開發人員快速創建各種功能強大的樹結構。

二、如何使用jstree

1、在HTML文件中添加引用jQuery和jstree的js和css文件：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>jstree Demo</title>
  <!-- 引入 jQuery 的js文件-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- 引入 jstree 的js、css文件-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
 </head>
 <body>
 </body>
</html>

2、在<body>標籤中添加一個用於顯示jstree的HTML元素：

<div id="tree"></div>

3、通過jQuery的語法進行初始化和配置：

$(function () {
    $('#tree').jstree();
});

三、如何載入數據源

1、在初始化的過程中可以通過對tree的配置項進行設置來載入數據源，例如：

$(function () {
    $('#tree').jstree({
        'core' : {
            'data' : [
                'Simple root node',
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1' },
                        'Child 2'
                    ]
                }
            ]
        }
    });
});

2、也可以通過ajax來載入數據源，例如：

$(function () {
    $('#tree').jstree({
        'core' : {
            'data' : {
                'url' : 'ajax_data.json',
                'dataType' : 'json'
            }
        }
    });
});

四、如何處理事件

在jstree中，可以處理多種事件，例如，常見的click、dblclick、changed、select_node等事件。例如：

$(function () {
    $('#tree').jstree({
        'core' : {
            'data' : [
                'Simple root node',
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1' },
                        'Child 2'
                    ]
                }
            ]
        }
    })
    .on('changed.jstree', function (e, data) {
        console.log(data.selected);
    });
});

五、如何自定義節點類型

在jstree中，可以通過自定義節點類型的方式，來實現根據不同的節點類型來使用不同的樣式和行為。例如，可以通過以下方式添加一個「文件」節點類型，並進行自定義：

$(function () {
    $.jstree.defaults.types["file"] = {
        'icon' : 'glyphicon glyphicon-file',
        'max_children' : 0,
        'max_depth' : 1,
        'valid_children' : []
    };
    
    $('#tree').jstree({
        'core' : {
            'data' : [
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1', 'type': 'file' },
                        { 'text' : 'Child 2' }
                    ]
                }
            ]
        }
    });
});

六、如何控制節點

在jstree中，可以對節點的行為和屬性進行控制。例如，在以下的示例中，通過控制節點，僅允許「文件」類型的節點進行拖拽和重命名：

$(function () {
    $.jstree.defaults.types["file"] = {
        'icon' : 'glyphicon glyphicon-file',
        'max_children' : 0,
        'max_depth' : 1,
        'valid_children' : []
    };
    
    $('#tree').jstree({
        'core' : {
            'data' : [
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1', 'type': 'file' },
                        { 'text' : 'Child 2' }
                    ]
                }
            ]
        },
        'types' : {
            "file" : {
                "valid_children" : [ ]
            }
        },
        'plugins' : ['types','dnd','contextmenu']
    });
});

七、如何使用插件

jstree提供了各種各樣的插件，可以幫助我們實現更複雜的功能，例如，contextmenu、dnd、checkbox等插件。下面以checkbox插件為例：

$(function () {
    $.jstree.defaults.types["file"] = {
        'icon' : 'glyphicon glyphicon-file',
        'max_children' : 0,
        'max_depth' : 1,
        'valid_children' : []
    };
    
    $('#tree').jstree({
        'core' : {
            'data' : [
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1', 'type': 'file' },
                        { 'text' : 'Child 2' }
                    ]
                }
            ]
        },
        'types' : {
            "file" : {
                "valid_children" : [ ]
            }
        },
        'checkbox' : {
            'tie_selection' : false
        },
        'plugins' : ['types','dnd','contextmenu', 'checkbox']
    });
});

原創文章，作者：IVSI，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/131846.html