jquery jstree的懒加载
在使用 jQuery jsTree 插件时,可以通过配置 core.data
选项来启用懒加载功能。以下是启用懒加载的基本代码示例:
$('#jstree').jstree({
'core' : {
'data' : function (obj, callback) {
// 检查节点是否初始加载
if (!obj.id) {
// 初始加载的根节点数据
callback.call(this, [
{ "id" : "node_1", "text" : "Node 1" },
{ "id" : "node_2", "text" : "Node 2" }
]);
} else {
// 懒加载的子节点数据
$.ajax({
'url' : '/get_node_children', // 替换为你的后端路径
'data' : { 'id' : obj.id },
'success' : function (data) {
callback.call(this, data);
}
});
}
}
}
});
在这个例子中,当 jsTree 初始化时,data
函数会被调用,并且 obj.id
为空,表示这是一个初始加载的节点。在这种情况下,你可以直接提供初始节点数据。
当用户点击展开一个节点时,jsTree 会再次调用 data
函数,但是这次 obj.id
会有值,代表需要懒加载的节点。在这种情况下,$.ajax
请求会被发送到后端获取子节点数据,并通过 callback
函数将子节点数据返回给 jsTree,从而实现懒加载。
确保你的后端 /get_node_children
路径返回的数据格式与 jsTree 所需的格式相匹配,通常是一个包含 id
和 text
属性的 JSON 数组。
评论已关闭