我MVC 4.0項目

我有這個目錄對象定義，像這樣中集成jsTree：我MVC 4.0項目

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插件。最後，樹形視圖頗像：上衣 - >產品目錄 - >類別 - >子類別

在我的控制，我填一個視圖模型（HomeModel），然後調用查看。

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

的看法是，當然，強類型的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插件似乎很好地適用於我的手工建造的TreeView，但基本的「點擊父節點不檢查/選擇所有的孩子節點」。

我該如何做到這一點？

在此先感謝！

來源

2012-09-07 Vlince

你必須在你的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內提交。

來源

2012-11-27 09:13:59 Elisa

回答

相關問題