想做带有checkbox的tree,由于项目一直用kendo ui for mvc,感觉 牛逼的kendo肯定有tree。结果碰到了选中的问题。
无法根据后台传来的IsChecked字段来设置 tree的选中状态。暂时不知道原因。
后台 接口
#region 地区 tree
public JsonResult GetAreasTree(int? id)
{
//id = id.GetValueOrDefault();
//List<Area> allAreas = _commonService.GetAreas().ToList();
//List<int> allCheckedItemIds = _commonService.GetUserAreaIdNew(UserId());
//allCheckedItemIds.Add(3);
//allCheckedItemIds.Add(101);
//var areaTreeData = GetChildren(allAreas, allCheckedItemIds,0);
var areaTreeData = new List<KendoTreeModel>();
areaTreeData.Add(new KendoTreeModel()
{
Id = 1,
Name = "大陆",
IsChecked = false,
Expanded = false,
Items = new List<KendoTreeModel>
{
new KendoTreeModel()
{
Id = 11,
Name = "huabei",
IsChecked = true,
Expanded = false
},
new KendoTreeModel()
{
Id = 12,
Name = "huanan",
IsChecked = false,
Expanded = false
}
}
});
return Json(areaTreeData, JsonRequestBehavior.AllowGet);
}
private List<KendoTreeModel> GetChildren(List<Area> allItems,List<int> allCheckedItemIds, int parentId)
{
List<KendoTreeModel> models = new List<KendoTreeModel>();
var sonItems = allItems.FindAll(c => c.ParentId == parentId).OrderBy(c => c.SortNumber);
foreach (var son in sonItems)
{
models.Add(new KendoTreeModel()
{
Id = son.Id,
Name = son.Text,
Expanded = son.ParentId.GetValueOrDefault() != 1,
IsChecked = allCheckedItemIds.Contains(son.Id),
Items = GetChildren(allItems, allCheckedItemIds, son.Id)
});
}
return models;
}
#endregion
public class KendoTreeModel { public int Id { set; get; } public int ParentId { set; get; } public string Name { set; get; } public bool IsChecked { set; get; } public bool Expanded { set; get; } public List<KendoTreeModel> Items { set; get; } }
前端 代码
<div id="treeview" class="demo-section"></div>
var homogeneous = new kendo.data.HierarchicalDataSource({
transport : {
read : {
url : "@Url.Action("GetAreasTree", "CommonAjax")",
dataType : "json",
data: function() {
var id= 0;
return { id: id}
}
}
},
schema : {
model : {
id : "Id",
children:"Items",
expanded: "Expanded",
checked: "IsChecked"
}
}
});
$("#treeview").kendoTreeView({
loadOnDemand : true,
dataSource : homogeneous,
dataTextField: "Name",
checkboxes : {
checkChildren: true
}
});