JSTree-动态加载节点 [英] JSTree - Load nodes dynamically
本文介绍了JSTree-动态加载节点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用jstree v.3. 我有一个有效的示例,其中所有数据通过ajax从服务器端下载一次.
I'm using jstree v.3. I have a working example, where all the data is downloaded once from the server side via ajax.
$('#tree').jstree({
'core': {
'data': {
'url': "/ajax/getAll",
'data': function(node) {
return {'id': node.id};
},
// "check_callback" : true
}
},
"types": {
"category": {
"icon": "/img/category.png"
},
"page": {
"icon": "/img/page.png"
}
},
"plugins" : ["types"]
});
但是我有很多数据要显示.我要为单击的项目加载数据.我在服务器端没有问题,但是找不到jstree部分的示例.有人可以分享代码或提供建议吗?
But I have A LOT of data to present. I want to load data for items, that were clicked. I don't have problems with server side, but I can't find examples for jstree part. Can anybody share the code or give advise?
推荐答案
您只是没有找到正确的关键字.它称为lazy loading
.
You just didn't find the right keyword. It's called lazy loading
.
您必须编写类似的内容:
You'll have to write something like:
$("#treeCell").jstree({
"json_data" : {
"ajax" : {
"url" : function( node ){
// lets figure out the url - this function needs to
// return the formed URL. If "node" is "-1" then
// this is the top of the hierarchy and there's no parent
// key. Otherwise, node is a jquery object of
// the respective node from which we can fish out the
// metadata needed. (added below at "metadata" : op )
if( node == -1 ){
return "/list?parentkey="
} else {
return "/list?parentkey=" + node.data( "key" );
}
},
"type" : "get", // this is a GET not a POST
"success" : function(ops) {
// this is called when the AJAX request is successful. "ops"
// contains the returned data from the server, which in
// my case is a json object containing an array of objects.
data = []
// go through data and create an array of objects to be given
// to jsTree just like when you're creating a static jsTree.
for( opnum in ops ){
var op = ops[opnum]
node = {
"data" : op.info,
"metadata" : op ,
// THIS LINE BELOW IS THE MAGIC KEY!!! This will force
// jsTree to consider the node
// openable and thus issue a new AJAX call hen the
// user clicks on the little "+" symbol or
// whatever opens nodes in your theme
"state" : "closed"
}
data.push( node );
}
return data; // this will return the formed array
// "data" to jsTree which will turn
// it into a list of nodes and
// insert it into the tree.
}
},
},
"core" : {"html_titles" : true, "load_open" : true },
"plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort" ]
});
这篇关于JSTree-动态加载节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文