Question

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

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

我如何在Asp.Net MVC中做到这一点？我查看了几乎每个JsTree Ajax示例。但我不能这样做。我该怎么回事呢？我该怎么做我的行动请帮忙！

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

样品：

Answer 1

最后，我发现了问题！

我创建了一个模型：

<div class="box"></div>

我创建了一个如下控制器：

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
}

HTML：

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

}

脚本：

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

Answer 2

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

cshtml查看：

<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＃，'对象'控制器：

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

第一次通话后：

点击子节点后：

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

2 个答案: