在控制器中创建jstree jquery_ajax

Question

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

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