Question

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

Answer 1

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

步骤2：将List分配给控制器Action Result中的viewdata，如

     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中获取所选值，并将其分配给网格过滤器的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);
            }
        }
    }

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

最后得到这样的树： enter image description here

创建树视图

2 个答案: