asp.net-mvc - 在 Controller 中创建 jstree jquery_ajax

Question

我正在使用MVC3，Jquery和jstree，我的目标是在 Controller 中的json_data的帮助下显示jstree，我已经尽可能多地研究了这个问题但还没有解决它，我的问题是如何关联函数(n/node)到 Controller 中的操作，以及如何将我在 Controller 操作中创建的节点列表发送回 View 并解析数据，我将非常感谢任何帮助或建议。

    <script type="text/javascript">



    $(function () {
        $("#demo1").jstree({
                "themes": {
                "theme": "default",
                "dots": true,
                "icons": false,
                "url": "/content/themes/default/style.css"
            },

            "json_data": {
                "ajax": {
                   "async": true,
                   "url": "/Home/GetItems",
                    "type": "POST",
                    "data": function (n) {
                        return { id: n.attr ? n.attr("id") : 0 }

                         "dataType": "text json",
                        "contentType": "application/json charset=utf-8",
                         "progressive_render": true
                    }
                }
            },
            "plugins": ["themes", "json_data", "dnd"]
        })
    });

这是我的带有 GetItems() 的 Controller 代码:

 [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult GetItems()
          {
        int cnt = 0;
        var itemRawData = (from ItemInfo itemtInfo in _itemInfoCollection
                       where itemInfo.Name == "val1" || itemInfo.Name == "val2"
                       select new itemSpecifications
                       {
                           itemName = itemInfo.Name,
                           itemVersion = itemInfo.MajorRevision.ToString() + "." + itemInfo.MinorRevision.ToString(),
                           iCount = ItemInfo.Count,
                           ilist = itemInfo.Values.Cast<subitem>().ToList(),
                           index = cnt++   });

        TreeNode node = new TreeNode();
        List<TreeNode> nodelist = new List<TreeNode>();
        foreach (var t in itemRawData)
        {
            nodelist.Add(new TreeNode
            {
            data = String.Format("{0} {1} ({2})",t.itemName, t.itemVersion, t.iCount.ToString()),
                state = "closed",
                children = t.ilist 

            });

        }
        return Json(nodelist);
    }

任何示例或建议将不胜感激!

Answer 1

我使用 ASP.NET MVC3 和 jstree 创建了一个简单的演示。它使用 ajax 加载整个树，并在单击每个节点时显示节点 ID 和其他数据。更多信息可以在 json_data plugin documentation 中找到。

查看:

    <div id="demo1"></div>
    <script type="text/javascript">
        $(function () {
            $("#demo1").jstree({
                "themes": {
                    "theme": "classic",
                    "dots": false
                },
                "json_data": {
                    "ajax": {
                        "url": "/Controller/TreeViewTestContent",
                        "data": function (n) {
                            return { id: n.attr ? n.attr("id") : 0 };
                        } 
                    }
                },
                "plugins": ["themes", "json_data", "ui"]
            }).bind("select_node.jstree", function (event, data) {
                alert(data.rslt.obj.attr("id"));
                alert(data.rslt.obj.attr("other_attribute"));

            });
        });
    </script>

提供 TreeView 数据的 Controller :

public JsonResult TreeViewTestContent(string id)
        TreeViewItemModel aItem = new TreeViewItemModel();
        aItem.data = new TreeViewItemModelData
                     {
                         title = "Root Node", 
                         icon = "folder"
                     };
        aItem.attr = new TreeViewItemModelAttributes
                     {
                         id = "1",
                         other_attribute = "additional data can go here"
                     };
        aItem.state = "open";          

        List<TreeViewItemModel> aChildrenlist = new List<TreeViewItemModel>();
        TreeViewItemModel aChild = new TreeViewItemModel();
        aChild.data = new TreeViewItemModelData
        {
            title = "Child 1",
            icon = "folder",
        };
        aChild.attr = new TreeViewItemModelAttributes
                      {
                          id = "2",
                          other_attribute = "another value"
                      };
        aChildrenlist.Add(aChild);
        aItem.children = aChildrenlist;

        return Json(aItem,JsonRequestBehavior.AllowGet);
    }

和模型

public class TreeViewItemModel
{
    public TreeViewItemModelData data { get; set; } 
    public string state { get; set; } //'open' to display node children when loaded, 'closed' to make an AJAX call to retrieve the children, 'string.empty' to not display the child nodes when loaded and do not make ajax calls to get the children
    public TreeViewItemModelAttributes attr { get; set; }
    public List<TreeViewItemModel> children { get; set; }
}

public class TreeViewItemModelData
{
    public string title { get; set; } //text do be displayed in the node
    public string icon { get; set; } //remove this property if not wanting to customize node icon

}

public class TreeViewItemModelAttributes
{
    public string id { get; set; }
    public string other_attribute { get; set; }
}

希望这对于任何使用 jstree 的人来说都是一个很好的起点。