jsTree如何更改Ajax网址并重新加载数据 [英] jsTree how to change ajax url and reload data
本文介绍了jsTree如何更改Ajax网址并重新加载数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$('#jstree_demo_div2').jstree({
'core': {
'data': {
"url": "tree.ashx?id=" + _id,
"dataType": "json" // needed only if you do not supply JSON headers
}
},
"checkbox": {
'visible': true,
'keep_selected_style': false,
},
"plugins": ["wholerow", "checkbox"]
});
我需要更改url(否则变量_id将更改)，然后刷新数据.
但是似乎有一个缓存问题.
I need to change the url (or the variable _id will change) and then refresh data.
But there seems to have a cache problem.
我监视了HTTP请求，请求参数_id不变.
I monitored the HTTP request, the request param _id didn't change.
我尝试过
'core': {
'data': {
"url": "tree.ashx?id=" + _id,
"cache":false, //←←←←
"dataType": "json" // needed only if you do not supply JSON headers
}
},
它不起作用.
顺便说一句，我的jsTree.js版本是3.0.8.
BTW, my jsTree.js version is 3.0.8.
推荐答案
我正在使用以下代码测试您的用例.刷新jstree而不折叠整个树.
I am using the following code to test your use case. It's refreshing the jstree without collapsing the whole tree.
<!DOCTYPE html>
<html>
<head>
<title>JSTree</title>
<link rel="stylesheet" href="dist/themes/default/style.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.js"></script>
<script>
var arrayCollection;
$(function() {
arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals"},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
{"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
{"id": "dalmatian", "parent": "dog", "text": "Dalmatian", "icon": "/"},
{"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
{"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
{"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
{"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
{"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
{"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];
$('#jstree').jstree({
'core': {
'data': arrayCollection
},
"checkbox": {
'visible': true,
'keep_selected_style': false
},
"plugins": ["wholerow", "checkbox"]
});
});
function resfreshJSTree() {
$('#jstree').jstree(true).settings.core.data = arrayCollection;
$('#jstree').jstree(true).refresh();
}
function addNokia() {
var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"};
arrayCollection.push(nokia);
resfreshJSTree();
}
function deleteDalmatian() {
arrayCollection = arrayCollection
.filter(function(el) {
return el.id !== "dalmatian";
});
resfreshJSTree();
}
</script>
</head>
<body>
<input type="button" onclick="addNokia()" value="Add Nokia"/>
<input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/>
<div id="jstree"></div>
</body>
</html>
- 注意:
- 在浏览器中打开上述页面后，打开jstree的所有节点和子节点.
- 单击添加诺基亚"按钮.
- 它将诺基亚诺基亚Lumia节点添加到手机"节点而不会崩溃 树到根节点.
- 类似地，单击删除Dalmaitian"按钮.
- 它将从Dogs节点中删除Dalmatian节点并刷新 树以显示新结构而不折叠到根节点.
- Note:
- After opening the above page in a browser, Open all the nodes and child nodes of the jstree.
- Click on Add Nokia button.
- It will add Nokia Lumia node to Mobile Phones node without collapsing the tree to root node.
- Similarly click on Delete Dalmaitian button.
- And it will delete Dalmatian node from Dogs node and refreshes the tree to display the new structure without collapsing to root node.
这篇关于jsTree如何更改Ajax网址并重新加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
