c# - 在 Asp.Net MVC 中使用 JsTree 延迟加载 TreeView

Question

我在我的项目中使用 JsTree。我想这样做:

我想在单击根节点 (+) 或子节点时显示子节点后，第一次加载树时只显示根节点。我的意思是，我想在单击每个节点时从数据库中获取并添加到子节点。

我如何在 Asp.Net MVC 中做到这一点？我几乎查看了每个 JsTree Ajax 示例。但我不能那样做。我应该从行动中返回什么？我该如何操作请帮忙!

JsTree:https://www.jstree.com/

示例:

• jsTree - loading subnodes via ajax on demand
• jsTree : Append child node dynamically
• JSTree - Load nodes dynamically

Answer 1

终于找到问题了!

我创建了一个模型:

public class JsTreeModel
{
    public string id { get; set; }
    public string parent { get; set; } 
    public string text { get; set; }
    public bool children { get; set; } // if node has sub-nodes set true or not set false
}

我创建了如下 Controller :

public class TreeviewController : Controller
{
    public JsonResult GetRoot()
    {
        List<JsTreeModel> items = GetTree();

        return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public JsonResult GetChildren(string id)
    {
        List<JsTreeModel> items = GetTree(id);

        return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    static List<JsTreeModel> GetTree()
    {
        var items = new List<JsTreeModel>();

        // set items in here

        return items;
    }

    static List<JsTreeModel> GetTree(string id)
    {
        var items = new List<JsTreeModel>();

        // set items in here

        return items;
    }

}

HTML:

<div id='treeview'></div>

脚本:

$('#treeview').jstree({
    "plugins": ["search", "wholerow"],
    'core': {
        'data': {
            'url': function (node) {
                return node.id === '#' ? "/Treeview/GetRoot" : "/Treeview/GetChildren/" + node.id;

            },
            'data': function (node) {
                return { 'id': node.id };
            }
        }
    }
});

$('#treeview').on('changed.jstree', function (e, data) {
    console.log("=> selected node: " + data.node.id);
});