Question

我有这样的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插件。最后，树视图看起来有点像：顶 - ＆GT;产品目录 - ＆GT;分类 - ＆GT;小组分类

在我的Controller中，我填充一个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插件似乎很适用于我手动构建的树视图，但基本的“单击父节点不会检查/选择所有子节点”。

我怎样才能做到这一点？

提前致谢！

Answer 1

您必须添加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"]
});

您的复选框将具有li语句的ID，因此您无需手动添加它们。选中后，ID将在FormCollection内自动提交。

在我的mvc 4.0项目中集成jsTree

1 个答案: