深入理解Bootstrap Treeview

一、Bootstrap Treeview是什麼？

Bootstrap Treeview是一個基於jQuery和Bootstrap的樹形結構插件，可以用於可視化顯示任意層級的數據結構。

通過使用Bootstrap Treeview，用戶可以將複雜的數據結構轉換為易於理解和操作的樹形結構，提高用戶對數據的理解和處理效率。

二、Bootstrap Treeview的優點

1. Bootstrap Treeview提供了豐富的配置選項，可以根據需求自定義樹形結構的展示效果。

2. Bootstrap Treeview支持非同步載入數據，減小頁面載入時間。

3. Bootstrap Treeview提供了豐富的事件處理和回調函數介面，支持自定義事件處理邏輯。

4. Bootstrap Treeview的兼容性好，在絕大多數現代瀏覽器中都能正常運行。

5. Bootstrap Treeview的開源社區活躍，有大量的插件和擴展可供使用。

三、Bootstrap Treeview的特性

1. 樹形結構展開與摺疊：Bootstrap Treeview支持樹形結構展開與摺疊，允許用戶展示或隱藏某個分支的子節點。

2. 單選與多選：Bootstrap Treeview支持單選和多選，根據需求選擇。

3. 非同步載入：Bootstrap Treeview支持非同步載入，當節點展開時自動載入子節點，減小頁面載入時間。

4. 搜索過濾：Bootstrap Treeview支持搜索過濾，可通過關鍵字過濾節點。

5. 圖標與標籤支持：Bootstrap Treeview支持圖標和標籤，使生成的樹形結構更加美觀清晰，符合用戶需求。

四、Bootstrap Treeview的使用

1. 引入相關文件：

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap Treeview -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"
    integrity="sha512-lM9bzegKMwMcJBP4vkLpKxwKfhvL61eyQ6Gj4X5k+PY7eM5FvoVnnRaN+gxNrKtA9oRwXq24G8jDZNNH8b1rlA=="
    crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"
    integrity="sha512-S3YNY8g3M/89jCHuu2fvoxiwxBwOC90KDvVlix3+icTx/PRJ7FZCO8bhilbAZN6Yyd+DfSdoLsV5rC81OuY3ew=="
    crossorigin="anonymous"></script>

2. 確定樹形結構數據：

var tree = [
    {
        text: 'Parent Node 1',
        nodes: [
            {
                text: 'Child Node 1',
                nodes: [
                    {
                        text: 'Grandchild Node 1'
                    },
                    {
                        text: 'Grandchild Node 2'
                    }
                ]
            },
            {
                text: 'Child Node 2'
            }
        ]
    },
    {
        text: 'Parent Node 2'
    }
]

3. 初始化樹形結構：

$('#treeview').treeview({
    data: tree
});

4. 在HTML頁面中插入樹形結構：

<div id="treeview"></div>

五、Bootstrap Treeview的示例

1. 單選多選示例：

選中節點時會在console中輸出相應信息。

var tree = [
    {
        text: 'Parent Node 1',
        nodes: [
            {
                text: 'Child Node 1',
                nodes: [
                    {
                        text: 'Grandchild Node 1'
                    },
                    {
                        text: 'Grandchild Node 2'
                    }
                ]
            },
            {
                text: 'Child Node 2'
            }
        ]
    },
    {
        text: 'Parent Node 2'
    }
];

$('#treeview').treeview({
    data: tree,
    multiSelect: true, // 允許多選
    onNodeSelected: function(event, node) {
        console.log(node); // 輸出選中的節點信息
    },
    onNodeUnselected: function(event, node) {
        console.log(node); // 輸出取消選中的節點信息
    }
});

2. 非同步載入示例：

點擊節點時非同步載入子節點。

$('#treeview').treeview({
    dataUrl: '/api/tree',
    onNodeExpanded: function(event, node) {
        $('#treeview').treeview('addNode', [node.nodeId, {nodeData: 'Loading...'}]);
        $.get('/api/tree?id=' + node.id, function(data) {
            $('#treeview').treeview('removeNode', [node.nodeId]);
            $('#treeview').treeview('addNode', [node.nodeId, {nodes: data}]);
        });
    }
});

3. 搜索過濾示例：

輸入關鍵字時篩選節點。

$('#treeview').treeview({
    data: tree
});

$('#search').on('keyup', function() {
    var search = $(this).val();
    $('#treeview').treeview('search', [search, {
        ignoreCase: true,
        exactMatch: false,
        revealResults: true
    }]);
});

六、總結

通過本文的介紹，我們可以了解到Bootstrap Treeview的特點、優點和使用方法，希望本文對您掌握Bootstrap Treeview的使用有所幫助。