jquery插件treeTable实现懒加载例子

jQuery插件TreeTable通常用于创建动态的树形表格，其中数据可以按需加载而不是一次性全部加载，这种懒加载的方式提高了用户体验，特别是在大数据量下。以下是使用`Smart Table`或类似插件实现懒加载的一个简化示例：

首先，你需要安装`smart-table`插件，例如通过npm：

npm install smart-table lazy-render

然后，引入并初始化插件：

<link rel="stylesheet" href="path/to/smart-table.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/smart-table.js"></script>
<script src="path/to/lazy-render.js"></script>

接着，在JavaScript中，假设你有一个数组存储树节点的数据，你可以这样做：

$(document).ready(function() {
    var data = [
        {id: 1, name: 'Parent 1', children: []},
        // 更多数据...
    ];

    var options = {
        columns: [
            {field: 'name', title: 'Name'},
            // 添加懒加载列
            {field: 'children', title: 'Children', lazy: true}
        ],
        load: function(event, node) {
            // 懒加载函数，当用户展开节点时触发
            $.ajax({
                url: 'fetch_children.php?id=' + node.id,
                success: function(response) {
                    if (response.data) {
                        node.children = response.data;
                    }
                },
                error: function() {
                    console.error('Error loading children');
                }
            });
        }
    };

    $('#treeTable').smartTable(options);
});

在这个例子中，`load`事件处理程序会在用户点击“Children”列的展开图标时发送一个异步请求到服务器获取子节点。如果成功，它会更新节点的`children`属性。