在控制器中创建jstree jquery_ajax

Question

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

    <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()编写的控制器代码：

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

提供树视图数据的控制器：

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的人来说都是一个很好的起点。