zoukankan      html  css  js  c++  java
  • kendo treeview checkbox初始化选中问题,没解决,暂时记录下

    想做带有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
                }
            });
    

      

  • 相关阅读:
    html5图片异步上传/ 表单提交相关
    node 常用命令
    windows下 nvm下载node被墙了解决办法
    36.迷宫(广度优先搜索)
    36.迷宫(广度优先搜索)
    35.大质数
    35.大质数
    35.大质数
    35.大质数
    35.大质数
  • 原文地址:https://www.cnblogs.com/taoshengyujiu/p/10041739.html
Copyright © 2011-2022 走看看