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

Question

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

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

如何在 Asp.Net MVC 中做到这一点？我几乎查看了每个 JsTree Ajax 样本。但我不能那样做。我应该return 采取什么行动？我该如何操作请帮忙！

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
}

我创建了如下控制器：

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

Answer 2

只有一种操作方法和延迟加载节点的示例。以防万一有人需要使用 jsTree 和 Asp.Net Mvc.

cshtml View:

<div data-key="@Model.Key" id="object-children-tree">
    @* Content will be populated by jsTree *@
</div>

<script type="text/javascript">
    $(function() {
        var $children = $("#object-children-tree");

        $children.jstree({
            "core": {
                "animation": 0,
                "data": {
                    "url": function(node) {
                        return '@Url.Action("GetChildren", "Object")';
                    },
                    "data": function (node) {
                        // Each time jstree needs to make an AJAX call this function will be called.
                        // It adds 'key' and 'isRoot' as parameter to ajax call. See signature of 'GetChildren' method.
                        // # is the special ID that the function receives when jstree needs to load the root nodes.
                        var isRoot = false;
                        var key = node.id;
                        if (key === "#") {
                            isRoot = true;
                            key = $("#object-children-tree").data("key");
                        }
                        return { "key": key, "isRoot": isRoot };
                    }
                }
            },
            "plugins": ["wholerow"]
        });
    });
</script>

C#, 'Object' controller:

[HttpGet]
public JsonResult GetChildren(string key, bool isRoot)
{
    // Populates the tree using AJAX and lazy loading nodes.
    // Lazy loading makes it possible to load nodes on the fly.
    // jstree will perform AJAX requests as the user browses the tree.
    //  
    // children = true, this special value indicated to jstree, that it has to lazy load the child node node.
    // https://github.com/vakata/jstree#populating-the-tree-using-ajax

    if (isRoot)
    {
        var first = new[]
        {
            new
            {
                id = "root-id",
                text = "Selected object in the list",
                state = new
                {
                    opened = true,
                },
                children = new[]
                {
                    new
                    {
                        id = "child-1",
                        text = "Child 1",
                        children = true
                    },
                    new
                    {
                        id = "child-2",
                        text = "Child 2",
                        children = true
                    }
                }
            }
        }
        .ToList(); 

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

    var g1 = Guid.NewGuid().ToString();
    var g2 = Guid.NewGuid().ToString();
    var next = new[]
    {
        new
        {
            id = "child-" + g1,
            text = "Child " + g1,
            children = true
        },
        new {
            id = "child-" + g2,
            text = "Child " + g2,
            children = true
        }
    }
    .ToList();

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

After first call:

After child node was clicked:

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

Lazy-loading TreeView with JsTree in Asp.Net MVC

c#

asp.net-mvc

dynamic

jstree