在控制器中創建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的人來說都是一個很好的起點。