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

在控制器中创建jstree jquery_ajax

1 个答案: