JsTree使用带有参数的ajax加载所有数据 [英] JsTree load all data using ajax with parameter
问题描述
我想用ajax调用在jstree
中显示数据.但是什么都没有显示.
下面,我将放置自己的代码
I want to show data in jstree
with ajax call. But anything dosen`t show.
Below I will put my own code
HTML代码
<div id="jstreeChart"></div>
<button onclick="reload_chart()">Show Tree</button>
这是jquery代码
function reload_chart() {
$(function () {
$.ajax({
async: true,
type: "Post",
url: "/Controller/Action?id=3",
dataType: "json",
success: function (json) {
//Bind Data Function
createJSTrees(json.jsonvar);
//For Refresh Chart
$('#jstreeChart').jstree(true).refresh();
}
});
});
}
function createJSTrees(jsonparams) {
$('#jstreeChart').jstree({
"core": {
"themes": {
"variant": "large"
},
"data": jsonparams,
},
"checkbox": {
"keep_selected_style": false
},
});
}
并采用行动方法
[HttpPost]
public IActionResult LoadChartList(int id)
{
//some code
return Json(new { jsonvar = JsonConvert.SerializeObject(nodes) });
}
我认为一切都正确,当我在createJSTrees(jsonparams)
中使用alert(jsonparams);
时,json数据显示正常.但是treeview什么也没显示.
我的代码有什么问题?
I think everything is right and when i use alert(jsonparams);
in createJSTrees(jsonparams)
json data shows fine. But treeview dont show anything.
What is wrong in my code?
推荐答案
我可以重现测试数据的相同问题,并且要解决此问题,我们可以在为jsTree指定json数据源时手动调用JSON.parse(jsonparams)
,如下所示. /p>
I can reproduce same issue with testing data, and to fix it, we can manually call JSON.parse(jsonparams)
while specifying json data source for jsTree, like below.
function createJSTrees(jsonparams) {
console.log(jsonparams);
$('#jstreeChart').jstree({
"core": {
"themes": {
"variant": "large"
},
"data": JSON.parse(jsonparams),
},
"checkbox": {
"keep_selected_style": false
},
});
}
LoadChartList操作
[HttpPost]
public IActionResult LoadChartList(int id)
{
//some code
var nodes = new List<Node>
{
new Node
{
id = "ajson1",
parent = "#",
text = "Simple root node"
},
new Node
{
id = "ajson2",
parent = "#",
text = "Root node 2"
},
new Node
{
id = "ajson3",
parent = "ajson2",
text = "Child 1"
},
new Node
{
id = "ajson4",
parent = "ajson2",
text = "Child 2"
}
};
return Json(new { jsonvar = JsonConvert.SerializeObject(nodes) });
}
节点类
public class Node
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
}
测试结果
这篇关于JsTree使用带有参数的ajax加载所有数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!