JStree 和 ajax
Posted
技术标签:
【中文标题】JStree 和 ajax【英文标题】：JStree and ajax 【发布时间】：2017-07-14 07:02:11 【问题描述】：我正在尝试使用 ajax 数据更新我的 js 树。 我只想在从 ajax 获取所有数据后更新树。请帮助。 但我收到错误 " 未捕获的 TypeError: $(...).jstree(...) 不是函数 在 htmlDocument.eval （评估在（jquery.min.js:2）” 我的代码如下：-
<html>
<head>
<style>
#tree
margin-top: 50px;
</style>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js'</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<strong>Click a node</strong>
<div id="tree"></div>
<script>
var data =[]
var data = [
"id" : "root", "parent" : "#", "text" : "Root", "state": "opened":false ,
]
var my_dictionary = ;
var flag = false;
$(document).ready(function()
var my_dictionary = ;
//var DatesNew = Date1+"|"+Date2;
//my_dictionary['Dates'] = DatesNew;
console.log("in len of data is...",data.length);
console.log("lennnnnnnnnnnnnnnnnof data is...",data.length);
$.ajax(
url: '/ajax5/',
data1:my_dictionary,
cache: false,
success: function (data1)
//myFunction1();
console.log("in before LOOP AJAX5...",data1);
printData1(data1);
).done(function(data1)
console.log("done with ajax call");
flag = true;
);
);
function printData1(data1)
console.log("in before printData1 is...",data1);
var lab =["1","2","3"];
var val = [42,55,51,22];
//var data = [];
for(var i=0; i<4; i++)
dataTemp=[]
dataTemp=[ "id" : "cat1", "parent" : "root", "text" : "First Branch", "state":"closed":false ];
//data=dataTemp;
data.push.apply(data, dataTemp);
console.log("in DTATTTTTTTTTTTTTTTTTTTT..");
console.log(data[1]); // ["one", "two", "three", "four", "five", "six"]
//data.push(label: lab[i], value: val[i]);
console.log("in loppp....")
console.log("in loppp21212121212....")
console.log("in aftyer val[i] is...",data[1]);
console.log("in befor main treee length is val[i] is...",data.length);
function sleep(milliseconds)
setTimeout(function()
console.log("THIS IS");
, 2000);
if(flag != true)
console.log("entering in sleep");
sleep(2000);
jQuery(function($)
$(document).ajaxStop(function()
$('#tree')
console.log('NEWWWWWWWWWWWWWWWWW dictionary is: ',data[1]);
$('#tree').jstree(
'plugins': ["checkbox","json_data", "false"],
)(jQuery);
$('#tree').on('select_node.jstree', function(event, data)
console.log("in loppp31331331313...")
var glue = ' > ';
console.log("The selected nodes are:");
console.log(data.selected);
var path = data.instance.get_path(data.node,'.');
console.log('Selected: ' + path);
//alert( $('#tree').jstree().get_path(data.node, glue, true ) );
)
);
);
</script>
</body>
</html>
【问题讨论】：
你能把代码缩小一点吗？只需为 JStree 提供必要的部分。哪一行产生了错误？ $('#tree').jstree...正在创建错误..当我尝试在某些函数中调用它时 like function PrintData1(data) $('#tree').jstree. 'plugins': ["checkbox","json_data", "false"], "core" : url: '/ajax5/', //data:my_dictionary, "data" : my_dictionary, "themes": "plugins " : [ "wholerow", "checkbox" ], "icons": true, "dots": true , like function PrintData1(data) $('#tree').jstree.( 'plugins': ["checkbox","json_data", "false"], "core" : “数据”：数据，“主题”： “url”：真，“图标”：真，“点”：真 从您提供的代码中很难理解发生了什么。你能用更干净的版本编辑你的问题吗？ 【参考方案1】：为了确保您在收到 ajax 响应后开始构建树，我将执行以下操作：
$(document).ready(function()
var my_dictionary = ;
$.ajax(
url: '/ajax5/',
data1: my_dictionary,
cache: false,
success: function(data1)
_buildTree(); // call function that builds the tree
).done(function(data1)
console.log("done with ajax call");
);
// function that builds the tree
function _buildTree()
$('#tree')
.jstree(
'plugins': ["checkbox"]
)
.on('select_node.jstree', function(event, data)
var glue = ' > ';
var path = data.instance.get_path(data.node, '.');
console.log('Selected: ' + path);
)
);
【讨论】：
以上是关于JStree 和 ajax的主要内容，如果未能解决你的问题，请参考以下文章