创建树视图

Question

我想使用MVC3控件工具包创建树视图，并将数据从数据库动态绑定到递归列表。

Answer 1

我终于找到了这个问题更好的解决方案..

我用jQuery来创建这是没什么太大的帮助，我的树。

seaching了很长一段时间后，我发现这样的事情：

public class TreeView 
    { 
     public static List<Model> GetAllCategories() 
     { 
      string query="select * from tableName"; 
      string connString = "connectionString"; 
      var itemList = new List<Model>(); 

     using (var con = new SqlConnection(connString)) 
     { 

      using (var cmd = new SqlCommand(qry, con)) 
      { 
       con.Open(); 
       SqlDataReader reader = cmd.ExecuteReader(); 
       if (reader.HasRows) 
       { 
        while (reader.Read()) 
        { 
          //added my code here to get the data.. 
         itemList.Add(
          new Model(){ 
           categoryId= reader.GetInt32(reader.GetOrdinal("categoryId")) 
          )}; 
        } 
       } 
      } 
     } 
     return itemList; 
    }   
} 

在我写我的代码作为控制器：

public ActionResult Index() 
    { 
     List<Model> itemList= new List<Model>(); 
     itemList = TreeView.GetAllCategories(); 


      var president = itemList. 
           Where(x => x.Model.PAId == 0).ToList(); //  
      foreach (var item in president) 
      { 
       SetChildren(item, itemList); 
      } 
      return View(president); 
     } 

    private void SetChildren(Model model, List<Model> itemList) 
    { 
     var childs = itemList. 
      Where(x => (x.Model.PAId == model.categoryId)).ToList(); 
     if (childs.Count > 0) 
     { 
      foreach (var child in childs) 
      { 
       SetChildren(child, itemListList); 
       model.Categories.Add(child); 
      } 
     } 
    } 

Index.cshtml：

<div id="divtree"> 
    @foreach (var item in Model) 
    { 
     <ul id="tree" > 
      <li> 
       @Html.ActionLink(item.Model.categoryName, "Action") 
       @Html.Partial("Childrens", item) 
      </li> 
     </ul> 
    } 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#treeViewContent').load('@Url.Action("CreateCategory","Category")'); 

     $('#divtree').jstree({ 
      "plugins": ["themes", "html_data", "ui", "cookies"] 
     }) 
     .bind('loaded.jstree', function() { 
      $(this).jstree('open_all'); 
     }); 
    }); 
</script> 

Childrens.cshtml：

@foreach (var item in Model.Categories) 
{ 
    <ul> 
    @if (item != null) 
    {   
     <li> 
      @Html.ActionLink(item.Model.categoryName, "Action") 
      @if (item.Categories.Count > 0) 
      {   
       @Html.Partial("Childrens", item)   
      } 
     </li> 
    } 
    </ul> 
} 

终于拿到了树是这样的：

Answer 2

步骤1：获得从DB中的细节，以类似列表或ArrayList中的OBJ

步骤2：分配列表来在控制器操作结果可视数据等

 viewdata["name"]=List; 

步骤3：分配可视数据在CSHTML树状另一个列表

ArrayList col = (ArrayList)ViewData["name"]; 
@if (col != null) 
{ 
    Html.Telerik().TreeView() 
    .Name("HierarchyTreeView") 
    .Items(items => 
    { 
     for (int i = 0; i < col.Count; i++) 
     { 
       items.Add() 
       .Text(col[i].ToString()) 
       .Value().Selected(True) 
       .Items((subItem) => 
        { 
        subItem.Add() 
        .Text(Child.ToString()) //Here place child value 
        .Value(); 
        }); 
      } 
    }).ClientEvents(events => events 
     .OnSelect("onSelect") 
    ).Render(); 
} 

步骤4：使用列表分配的值来使用嵌套for循环

树视图节点

第5步：编写选择客户端事件并从Javascript中获取所选值，并将其分配给网格过滤器的JavaScript方法。

function onSelect(e) { 
    var HNKey = treeView().getItemValue(e.item); 
    var HNText = treeView().getItemText(e.item); 
} 

希望这会给你一些启动你的过程的想法，然后你可以提出问题。