asp.net-mvc-3 - ツリー ビューの作成

Question

MVC3 コントロール ツールキットを使用してツリー ビューを作成し、データベースからのデータを再帰リストに動的にバインドしたいと考えていました。

Answer 1

ステップ 1: List や ArrayList などのように、db から obj への詳細を取得する

ステップ 2: リストをコントローラのアクション結果の viewdata に割り当てます。

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

そして最終的に次のようなツリーを取得しました：