bootstrap树形插件treeview实现懒加载，实现每个节点单独请求

### 动态树视图和表格数据管理

#### 概述

树状目录的懒加载就是第一次只加载第一层，然后当用户点击加号的时候，再从后端取得数据，添加到这个节点下面。优点是对于大量的树状目录数据，不需要一次性查询到下级节点目录，速度快，体验好，缺点是，如果树状目录带了成果数量的信息（tags），它还是要递归到所有的子节点才能获取成果数量，效率没有提高多少。

#### 实现步骤

1. **HTML结构**：
我们首先定义了一个基本的HTML结构，其中包含一个用于显示树视图的`<div>`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态树视图示例</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-treeview.min.css" rel="stylesheet" />
    <script src="jquery.3.2.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-treeview.min.js"></script>

</head>
<body>
    <div id="ecsTree" style="height: 500px; overflow-y: auto;"></div>
</body>
</html>

2. **加载树数据**：
在文档加载时，我们使用Ajax请求从服务器获取初始的树数据，并将其显示在树视图中。

$(function () {
    $.ajax({
        url: '<?php echo $this->url('job', array('action' => 'getData'), null); ?>',
        type: 'get',
        data: {
            data: 'tree',
            cloud_id: selectedValue,
            action: 'domain'
        },
        dataType: 'json',
        success: function (data) {
            $('#ecsTree').treeview({
                data: data,
                levels: 1,
                showTags: true,
                showCheckbox: true,
                loadingIcon: "fa fa-hourglass",
                lazyLoad: function (node, func) { loaddata(node, func, selectedValue); },
                onNodeSelected: function (event, data) {
                    console.log('node selected: ' + data.text);
                },
                onNodeCollapsed: function (event, data) {
                    console.log('关闭');
                },
                onNodeChecked: function (event, data) {
                    console.log(data);
                }
            });
        },
        error: function (xhr, status, error) {
            console.log(error);
        }
    });
});

3. **懒加载节点数据**：
当用户展开节点时，我们使用懒加载技术，从服务器动态获取子节点的数据并添加到树中。

function loaddata(node, func, cloud_id) {
    var reqdata = {};
    if (node.type === 'domain') {
        reqdata = {
            data: 'tree',
            cloud_id: cloud_id,
            action: 'project'
        };
    } else if (node.type === 'project') {
        reqdata = {
            data: 'tree',
            cloud_id: cloud_id,
            action: 'ecs',
            tenantId: node.tenant_id
        };
    }
    $.ajax({
        type: "get",
        url: '/api/getData',
        data: reqdata,
        success: function (data, status) {
            func(data);
        }
    });
}