Asp.net mvc 4 在我的MVC4.0项目中集成jsTree

我将此类别对象定义为：

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

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

公共类HomeModel
{
//复选框的层次结构。
公共IEnumerable类别结构{get；set；}
//所选类别Id已提交。
公共IEnumerable CategorySelectList{get；set；}
}

当然，视图是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>
    }
}

…一些html…

@类别树（Model.CategoryStructure，0）

…一些html…
@助手类别树（IEnumerable节点，int？parentId）
{
if（nodes.Any（n=>n.ParentCategoryId==parentId））
{ 

@foreach（nodes.Where（n=>n.ParentCategoryId==parentId）中的var节点）
{

@节点描述
@类别树（节点，node.Id）

}

}
}

一切都很好！我有一个漂亮的

和
列表，格式很好。
设置所有必要的jsTree文件后，我将执行以下操作：

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


//

jsTree插件似乎很好地应用于我的手动构建的treeview，但基本的“单击父节点不会选中/选择所有子节点”

我怎样才能做到这一点

提前谢谢
 您必须添加
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
中自动提交

$("#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"]
});