JsTree 使用 AJAX 调用获取子节点
JsTree using AJAX call to get child nodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstreee">
</div>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"> </script>
<script>
var json_data = [];
$(function () {
$.get('url call here',function(data,status){
var dataL = JSON.parse(data);//console.log(dataL);
var obj = {};
obj["id"]=dataL["guid"];
obj["text"]=dataL["name"];
obj["parent"]="#";
console.log(obj);
json_data.push(obj);
$('#jstreee').jstree({ 'core' : {
'data' : json_data
} });
});
});
$('#jstreee').on("changed.jstree", function (e, data) {
console.log("we are in the function");
console.log(data.selected);
var node_clicked = data.selected;
if (node_clicked == null) {
node_clicked = "wiprohdmforg04july2016";
}
var url = "URL Call Here="+data.selected;
$.get(url,function(data,status){
var dataP = JSON.parse(data);
console.log(dataP.nodes);
var childlist = [];
console.log(dataP.nodes.length);
for(var i=0;i<dataP.nodes.length;i++){
var obj={};
obj["id"]=dataP.nodes[i].guid;
obj["text"]=dataP.nodes[i].name;
obj["parent"]=node_clicked;
//console.log("obj",obj);
var flag=0;
for(var j=0;j<json_data.length;j++){
if(obj["id"]===json_data[j]["id"]){
flag=1;
}
}
if(flag == 0){
json_data.push(obj);
}
console.log(json_data);
}
});
$('#jstreee').jstree(true).settings.core.data = json_data;
console.log("I reached here");
$('#jstreee').jstree(true).refresh(true);
});
</script>
</body>
</html>
我想用新数据重新加载树。(Json_data) 但它没有填充，它成功地进行了 ajax 调用并检查数据是否重复以及是否有数据目前它没有更新 json_data（新数据）。
但是因为我正在使用刷新（确实它忘记了当前状态并再次从根级别（第 1 级别）开始）。
我只想更新根子节点而不是完整的树。
我还需要在树值（作为根级别）上单击两次以更新树。
但是来自 url 的数据仅在第一次点击时出现。
例子
--> 组织
------>根目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.m in.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstreee">
</div>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"> </script>
<script>
var json_data = [];var ten= 0;
$(function () {
$.get('**root node url here**',function(data,status){
var dataL = JSON.parse(data);//console.log(dataL);
var obj = {};
obj["id"]=dataL["guid"];
obj["text"]=dataL["name"];
obj["parent"]="#";
console.log(obj);
json_data.push(obj);
$('#jstreee').jstree({
'core' : {
'data' : json_data
}
});
});
});
$('#jstreee').on("select_node.jstree", function (e, data) {
console.log("we are in the function");
var node_clicked = data.selected[0];
var url = "**your url here**"+node_clicked;
$.get(url,function(data,status){
console.log(data);
if (data.nodes !== null) {
var dataP = JSON.parse(data);
console.log(dataP.nodes);
var childlist = [];
console.log(dataP.nodes.length);
for(var i=0;i<dataP.nodes.length;i++){
var obj={};
obj["id"]=dataP.nodes[i].guid;
obj["text"]=dataP.nodes[i].name;
obj["parent"]=node_clicked;
//console.log("obj",obj);
var flag=0;
for(var j=0;j<json_data.length;j++){
if(obj["id"]===json_data[j]["id"]){
flag=1;
}
}
if(flag == 0){
json_data.push(obj);
ten = 0;
}
console.log(json_data);
}
refreshh();
}
});
function refreshh(){
$('#jstreee').jstree(true).settings.core.data = json_data;
console.log("I reached here");
if(ten == 0){
$('#jstreee').jstree(true).refresh(true);
ten = 1;
}
}
});
</script>
</body>
</html>
//// 此代码动态地从特定 url 获取 dta 并用新数据填充 jstree，
现在刷新没问题，
成功维持当前状态
准备好使用只需更换 urls...
2 url秒，
1st 根节点 url 和 2nd url 与子节点特定数据
将数据从 url 转换为所需格式：
“
对于（变量我= 0;我
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstreee">
</div>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"> </script>
<script>
var json_data = [];
$(function () {
$.get('url call here',function(data,status){
var dataL = JSON.parse(data);//console.log(dataL);
var obj = {};
obj["id"]=dataL["guid"];
obj["text"]=dataL["name"];
obj["parent"]="#";
console.log(obj);
json_data.push(obj);
$('#jstreee').jstree({ 'core' : {
'data' : json_data
} });
});
});
$('#jstreee').on("changed.jstree", function (e, data) {
console.log("we are in the function");
console.log(data.selected);
var node_clicked = data.selected;
if (node_clicked == null) {
node_clicked = "wiprohdmforg04july2016";
}
var url = "URL Call Here="+data.selected;
$.get(url,function(data,status){
var dataP = JSON.parse(data);
console.log(dataP.nodes);
var childlist = [];
console.log(dataP.nodes.length);
for(var i=0;i<dataP.nodes.length;i++){
var obj={};
obj["id"]=dataP.nodes[i].guid;
obj["text"]=dataP.nodes[i].name;
obj["parent"]=node_clicked;
//console.log("obj",obj);
var flag=0;
for(var j=0;j<json_data.length;j++){
if(obj["id"]===json_data[j]["id"]){
flag=1;
}
}
if(flag == 0){
json_data.push(obj);
}
console.log(json_data);
}
});
$('#jstreee').jstree(true).settings.core.data = json_data;
console.log("I reached here");
$('#jstreee').jstree(true).refresh(true);
});
</script>
</body>
</html>
我想用新数据重新加载树。(Json_data) 但它没有填充，它成功地进行了 ajax 调用并检查数据是否重复以及是否有数据目前它没有更新 json_data（新数据）。
但是因为我正在使用刷新（确实它忘记了当前状态并再次从根级别（第 1 级别）开始）。
我只想更新根子节点而不是完整的树。 我还需要在树值（作为根级别）上单击两次以更新树。 但是来自 url 的数据仅在第一次点击时出现。
例子 --> 组织 ------>根目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.m in.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstreee">
</div>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"> </script>
<script>
var json_data = [];var ten= 0;
$(function () {
$.get('**root node url here**',function(data,status){
var dataL = JSON.parse(data);//console.log(dataL);
var obj = {};
obj["id"]=dataL["guid"];
obj["text"]=dataL["name"];
obj["parent"]="#";
console.log(obj);
json_data.push(obj);
$('#jstreee').jstree({
'core' : {
'data' : json_data
}
});
});
});
$('#jstreee').on("select_node.jstree", function (e, data) {
console.log("we are in the function");
var node_clicked = data.selected[0];
var url = "**your url here**"+node_clicked;
$.get(url,function(data,status){
console.log(data);
if (data.nodes !== null) {
var dataP = JSON.parse(data);
console.log(dataP.nodes);
var childlist = [];
console.log(dataP.nodes.length);
for(var i=0;i<dataP.nodes.length;i++){
var obj={};
obj["id"]=dataP.nodes[i].guid;
obj["text"]=dataP.nodes[i].name;
obj["parent"]=node_clicked;
//console.log("obj",obj);
var flag=0;
for(var j=0;j<json_data.length;j++){
if(obj["id"]===json_data[j]["id"]){
flag=1;
}
}
if(flag == 0){
json_data.push(obj);
ten = 0;
}
console.log(json_data);
}
refreshh();
}
});
function refreshh(){
$('#jstreee').jstree(true).settings.core.data = json_data;
console.log("I reached here");
if(ten == 0){
$('#jstreee').jstree(true).refresh(true);
ten = 1;
}
}
});
</script>
</body>
</html>
//// 此代码动态地从特定 url 获取 dta 并用新数据填充 jstree， 现在刷新没问题， 成功维持当前状态 准备好使用只需更换 urls... 2 url秒，
1st 根节点 url 和 2nd url 与子节点特定数据
将数据从 url 转换为所需格式： “ 对于（变量我= 0;我