asp.net-mvc-3 - 创建树视图

Question

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

Answer 1

第 1 步：从 db 获取详细信息到 obj，如 List 或 ArrayList

第 2 步：将列表分配给控制器操作结果中的视图数据，例如

     viewdata["name"]=List;

第 3 步：将 viewdata 分配给 cshtml treeview 中的另一个 List

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 步：使用 List 使用嵌套的 for 循环将值分配给树视图节点

步骤 5：编写 onselect 客户端事件并从 Javascript 中获取选定的值并将其分配给 Grid 过滤器的 javascript 方法。

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

希望这会给你一些想法来开始你的过程，然后你可以从这里提出问题。

Answer 2

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

我使用 jquery 创建对我很有帮助的树。

找了很久，发现是这样的：

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

索引.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> 
}

最后得到了这样的树：