컨트롤러에서 jstree jquery_ajax 만들기

Question

MVC3, Jquery 및 jstree를 사용하고 있습니다. 내 목표는 컨트롤러에서 json_data를 사용하여 jstree를 표시하는 것입니다.이 방법을 최대한 연구했지만 해결하지 못했습니다. 문제는 컨트롤러의 동작에 함수 (n/노드)를 연결하는 방법이며, 컨트롤러 동작에서 만든 노드 목록을 뷰에 다시 보내고 데이터를 구문 분석하는 방법에 대해 도움을 주거나 조언을 부탁드립니다. .

[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); 
    } 

어떤 예를 나 조언이 크게 감사합니다 :

<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() 내 컨트롤러 코드입니다!

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를 사용하는 모든 사람에게 좋은 출발점이되어야합니다.