1

この Category オブジェクトを次のように定義しています。

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public int ParentCategoryId { get; set; }
}

次に、次のように架空のデータを作成します。

public ICollection<Category> GetCategories()
{
    List<Category> lst = new List<Category>();
    //Top
    lst.Add(new Category { Id = 1, Name = "Car", Description = "Car", ParentCategoryId = 0 });
    lst.Add(new Category { Id = 2, Name = "Boats", Description = "Boats", ParentCategoryId = 0 });

    //Catalogs
    lst.Add(new Category { Id = 3, Name = "Winter2012", Description = "Parts & Accessories", ParentCategoryId = 1 });
    lst.Add(new Category { Id = 4, Name = "Gear2012", Description = "Gear", ParentCategoryId = 1 });

    //Categories
    lst.Add(new Category { Id = 5, Name = "NewItems", Description = "New Stuff", ParentCategoryId = 3 });
    lst.Add(new Category { Id = 6, Name = "Promo1", Description = "Promo1", ParentCategoryId = 3 });
    lst.Add(new Category { Id = 7, Name = "Promo2", Description = "Promo2", ParentCategoryId = 3 });

    //Sub-Categories (if any)
    lst.Add(new Category { Id = 8, Name = "Men", Description = "Men", ParentCategoryId = 5 });
    lst.Add(new Category { Id = 9, Name = "Women", Description = "Women", ParentCategoryId = 5 });
    lst.Add(new Category { Id = 10, Name = "Kids", Description = "Kids", ParentCategoryId = 5 });

    return lst;
}

チェックボックス TreeView を構築しようとしていますが、現在 jsTree プラグインを見ています。最終的に、ツリービューは次のようになります: トップ-->カタログ-->カテゴリ-->サブカテゴリ

私のコントローラーでは、ViewModel (HomeModel) を入力してから、View を呼び出します。

public ActionResult Index()
{
    Data.Data d = new Data.Data();
    var customerGroups = d.GetCustomerGroups();

    var model = new HomeModel();
    model.CategoryStructure = d.GetCategories();

    return View(model);
}

HomeModel は次のように定義されます。

public class HomeModel
{
    //The checkbox hierarchy structure.
    public IEnumerable<Category> CategoryStructure { get; set; }

    //The selected category Id's once submitted.
    public IEnumerable<int> CategorySelectList { get; set; }        
}

もちろん、View は HomeModel に対して強く型付けされており、次のようになります。

…some html…
<div id="tree">
    <ul id="treeview">
    @CategoryTree(Model.CategoryStructure, 0)
    </ul>
</div>
…some html…

@helper CategoryTree(IEnumerable<Category> nodes, int? parentId)
{
    if (nodes.Any(n => n.ParentCategoryId == parentId)) 
    { 
    <ul>
        @foreach (var node in nodes.Where(n => n.ParentCategoryId == parentId)) 
        {
            <li>
                <input type="checkbox" name="CategorySelectList" id="@node.Id" value="@node.Id" /> <label for="@node.Id">@node.Description</label>
                @CategoryTree(nodes, node.Id)
            </li>
        }
    </ul>
    }
}

すべてがうまく機能します！<ul>’s and <li>’sきれいにフォーマットされたこの美しいリストがあります。必要な jsTree ファイルをすべて設定したら、次の手順を実行します。

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
        $("#treeview").jstree();
    });
    //]]>
</script>

jsTree プラグインは、手動で作成したツリービューにうまく適用されているようですが、基本的な「親ノードをクリックしても、すべての子ノードがチェック/選択されません」。

どうすればこれを達成できますか？

前もって感謝します！

4

1 に答える 1

2

jstreeチェックボックスを正常に機能させるには、スクリプトを追加する必要があります。

$("#tree").jstree({
    checkbox: {
        real_checkboxes: true,
        real_checkboxes_names: function (n) { 
            return [("check_" + (n[0].id || Math.ceil(Math.random() * 10000))), n[0].id] 
        }
    },
    plugins: ["html_data", "types", "themes", "ui", "checkbox"]
});

チェックボックスにはステートメントの ID があるliため、手動で追加する必要はありません。オンにすると、ID が 内に自動的に送信されますFormCollection。

于 2012-11-27T09:13:59.513 に答える