JsTree load all data using ajax with parameter

问题

I want to show data in jstree with ajax call. But anything dosen`t show. Below I will put my own code

Html Code

<div id="jstreeChart"></div>

<button onclick="reload_chart()">Show Tree</button>

And this is jquery code

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
            },
        });

    }

And in Action Method

    [HttpPost]
    public IActionResult LoadChartList(int id)
    {
        //some code 
        return Json(new { jsonvar = JsonConvert.SerializeObject(nodes) });
    }

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?

回答1:

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 action

[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) });
}

Node class

public class Node
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}

Test Result

来源：https://stackoverflow.com/questions/59666806/jstree-load-all-data-using-ajax-with-parameter

标签

jquery

asp.net-core

jstree