3

我正在尝试在我的 MVC4 项目中创建一个动态 JSTree。但是，当谈到 Json 时，我是一个完整的初学者。我正在尝试从我的 _layout.cshtml 进行 ajax json 调用，代码如下：

    <script type="text/javascript">
$(document).ready(function () {
$("#demo1").jstree({
        "json_data": {
            "ajax": {
                "type": "POST",
                "dataType": "json",
                "contentType": "application/json;",
                "url": "Home/GetAllNodes",
                "data": function (node) {
                    return '{ "operation" : "get_children", "id" : 1 }';
                },
                "success": function (retval) {
                    return retval.d;
                }
            }
        },
        "plugins": ["themes", "json_data"]
    });
});
</script>

我已从该站点获取此代码并密切关注这些步骤，但是，此示例中使用的项目是一个 Web 表单项目，我不确定在使用 json 时这两个项目之间的翻译。

这是我在 HomeController 中的方法 - GetAllNodes：

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<JSTreeTestMod> GetAllNodes(string id)
        {
            List<JSTreeTestMod> JSTreeArray = new List<JSTreeTestMod>();

            JSTreeTestMod treeItem = new JSTreeTestMod();
            treeItem.data = "x1";
            treeItem.state = "closed";
            treeItem.IdServerUse = 10;
            treeItem.children = null;
            treeItem.attr = new JSTreeAttribute { id = "10", selected = false };
            JSTreeArray.Add(treeItem);

            JSTreeTestMod treeItem2 = new JSTreeTestMod();
            var children =
                new JSTreeTestMod[]
        {
            new JSTreeTestMod { data = "x1-11", attr = new JSTreeAttribute { id = "201" } },
            new JSTreeTestMod { data = "x1-12", attr = new JSTreeAttribute { id = "202" } },
            new JSTreeTestMod { data = "x1-13", attr = new JSTreeAttribute { id = "203" } },
            new JSTreeTestMod { data = "x1-14", attr = new JSTreeAttribute { id = "204" } },
        };
            treeItem2.data = "x2";
            treeItem2.IdServerUse = 20;
            treeItem2.state = "closed";
            treeItem2.children = children;
            treeItem2.attr = new JSTreeAttribute { id = "20", selected = true };
            JSTreeArray.Add(treeItem2);

            JSTreeTestMod treeItem3 = new JSTreeTestMod();
            var children2 =
                new JSTreeTestMod[]
        {
            new JSTreeTestMod { data = "x2-11", attr = new JSTreeAttribute { id = "301" } },
            new JSTreeTestMod { data = "x2-12", attr = new JSTreeAttribute { id = "302" }, children= new JSTreeTestMod[]{new JSTreeTestMod{data = "x2-21", attr = new JSTreeAttribute { id = "3011" }}} },
            new JSTreeTestMod { data = "x2-13", attr = new JSTreeAttribute { id = "303" } },
            new JSTreeTestMod { data = "x2-14", attr = new JSTreeAttribute { id = "304" } },
        };
            treeItem3.data = "x3";
            treeItem3.state = "closed";
            treeItem3.IdServerUse = 30;
            treeItem3.children = children2;
            treeItem3.attr = new JSTreeAttribute { id = "30", selected = true };
            JSTreeArray.Add(treeItem3);
            return JSTreeArray;
        }

有没有人有在 MVC4 中使用 jstree 的经验？

4

1 回答 1

0

也许有点晚了，但我创建了一个 MVC HTML Helper，它可以帮助你使用最新的 JStree 插件设置树，你可以在这里找到它。

https://jstreemvcwrapper.codeplex.com/

用法更简单：

@(Html.JSTreeView(Model.TreeNodes)
.ContrainerID("TreeContainer")
.Children(n => n.Childern)
.ItemID(n=>n.NodeID.ToString())
.ItemType(n=>n.NodeType.ToString())
.IsSelected(n=> n.NodeID == 1)
.OnNodeSelect("onTreeFolderSelected")
.Plugins("wholerow", "types")
.CoreConfig(new
{
      expand_selected_onload = true,
      multiple = false
})
.TypesConfig(new
{
      Root = new { icon = "../Content/jsTree/Root.png" },
      Folder = new { icon = "../Content/jsTree/Folder.png" },
      File = new { icon = "../Content/jsTree/File.png" },
      @default = new { icon = "../Content/jsTree/Folder.png" }
})
.ItemTemplate(@<text> <a href="#" >@item.NodeName</a> </text>))

您不必为 JSTree 创建特定模型。并将IEnumrable作为来源.. 只需使用以下方式指定子属性：

.Children(n => n.Childern)

方法，其余的将完成..

它仍处于早期测试阶段.. 但将帮助您快速启动您的项目..

于 2014-07-22T11:47:50.730 回答