我可以使用预加载了JSON数据的jsTree还是可以使用Ajax [英] Can I use jsTree preloaded with JSON data and also use Ajax
问题描述
我有jsTree处理JSON数据:JSON数据表示服务器的文件系统,用户可以从树中选择一个文件夹,然后将其添加到文件夹输入字段中).我不希望在没有提供文件系统的前三层的情况下加载页面.但是,我不会解析整个文件系统,因为这将花费很长时间.
I have jsTree working with JSON data: the JSON data represents the server's file system, and the user can select a folder from the tree, which is then added to the folder input field). I don't want the page to load without the top three levels of the file system provided. However, I don't parse the whole file system because that would take too long.
我可以在用户向树下进一步打开未预先填充的节点时,用JSON数据预填充jsTree并使用Ajax吗?还是必须对初始加载也使用Ajax?
Can I pre-populate jsTree with JSON data and use Ajax when the user opens nodes further down the tree which were not pre-populated, or do I have to use Ajax for the initial load as well?
下面,我显示当前代码(不包含任何Ajax),但是为了简洁起见,仅将数据检索到一个级别:它从服务器返回C:\
和E:\
文件系统.这可行,但是当用户尝试在层次结构中进一步打开节点时,我不清楚如何向其中引入Ajax.
Below I show my current code (without any Ajax), but only retrieving data down to one level for the sake of brevity: it returns C:\
and E:\
file systems from the server. This works, but I'm unclear how to introduce Ajax to this when the user tries to open a node further down the hierarchy.
<label for="folder">Selected Folder</label>
<input type="text" name="folder" id="folder">
<br>
<script type="text/javascript">
function createJSTree(jsondata)
{
$('#jstree').jstree(
{
"plugins" : ["themes","html_data","ui","cookie"],
'core':
{
'data': jsondata
}
}
)
.bind("select_node.jstree",
function (e, data)
{
var objNode = data.instance.get_node(data.selected);
document.getElementById('folder').value=objNode.id;
}
)
;
}
$(function() { var jsondata ={"text":"pclaptop","children":[{"id":"C:\\","text":"C:\\","children":[]},{"id":"E:\\","text":"E:\\","children":[]}]}; createJSTree(jsondata); })
</script>
推荐答案
Before I get into the ajax piece of the code I had to set the check_callback parameter in jsTree it enables editing of the jsTree. Next, I call `$('#jstree').jstree().create_node('#', parsedData, "last"); in the success method of jQuery's ajax call, and that did the trick. My solution is below:
index.html
index.html
<label for="folder">Selected Folder</label>
<input type="text" name="folder" id="folder">
<br>
<button id="create-node-button">
Create Node
</button>
<div id="jstree"></div>
<script type="text/javascript">
function createJSTree(jsondata) {
$('#jstree').jstree({
"plugins": ["themes", "html_data", "ui", "cookie"],
'core': {
'check_callback': true,
'data': jsondata
}
})
.bind("select_node.jstree",
function(e, data) {
var objNode = data.instance.get_node(data.selected);
document.getElementById('folder').value = objNode.id;
}
);
}
$(function() {
var jsondata = [{
"id": "pclaptop",
"parent": "#",
"text": "pclaptop"
},
{
"id": "C:\\",
"parent": "pclaptop",
"text": "C:\\"
},
{
"id": "E:\\",
"parent": "pclaptop",
"text": "E:\\"
},
{
"id": "F:\\",
"parent": "pclaptop",
"text": "F:\\"
}
];
createJSTree(jsondata);
$("#create-node-button").on("click", function() {
$.ajax({
url: "./data.json",
success: function(data){
var parsedData = JSON.parse(data);
$('#jstree').jstree().create_node('#', parsedData, "last");
}
});
});
});
</script>
data.json
data.json
{ "id" : "ajson5", "text" : "newly added" }
最后,这里是一个小提琴.我不确定如何在jsfiddle中正确设置ajax调用,所以我改为在本地进行.
Lastly, here is a fiddle . I wasn't sure of how to properly set up the ajax call in jsfiddle so I did it locally instead.
这篇关于我可以使用预加载了JSON数据的jsTree还是可以使用Ajax的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!