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屋！