剑道树视图无法正确加载

时间:2013-10-01 09:57:02

标签: kendo-ui

我想在Asp.net mvc4中创建一个带有远程数据源的 kendo ui树视图。我对剑道知识有疑问。我在kendo website中尝试过这些例子。

但是我甚至无法将这些图像传递给treeView。

关于项目:此项目是为加载Web表单创建TreeView菜单。每个Web表单都可以作为formObject。该对象具有以下属性

  1. 名称
  2. ID
  3. 子对象列表(List childs)
  4. 这是我在控制器上的代码

      public class HomeController : Controller
    {
        ObjectService service = new ObjectService();
        private int cky = 11;
        private int usrky=28;
    
        public ActionResult Index()
        {
            return View();
        }
    
        public ActionResult GetAllMenu(int prntKy = 1)// initially the parent key is = 1 
        {
            List<ObjectModel> objects = new List<ObjectModel>();
            objects = service.GetObjectsByPrntKy(prntKy, cky, usrky);//get all parent nodes
    
            List<TreeViewModel> tree = new List<TreeViewModel>();
    
            if (objects != null)
            {
                foreach (ObjectModel model in objects)//for each parent node
                {
                    TreeViewModel treeObj = new TreeViewModel();
    
                    treeObj.id = model.ObjKy;
                    treeObj.name = model.ObjNm;
                    treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
                    tree.Add(treeObj);
                }
            }
    
    
            return Json(tree, JsonRequestBehavior.AllowGet);
    
        }
    
        private List<TreeViewModel> GetChileByPrntObjKy(int prntKy)// method to get child nodes
        {
            List<TreeViewModel> tree = new List<TreeViewModel>();
    
            List<ObjectModel> Objects = new List<ObjectModel>();
    
            Objects = service.GetAllObjects();
    
            foreach (ObjectModel model in Objects)
            {
    
                TreeViewModel treeObj = new TreeViewModel();
    
                if (model.PrntObjKy == prntKy)
                {
                    treeObj.id = model.ObjKy;
                    treeObj.name = model.ObjNm;
                    treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
                    tree.Add(treeObj);
                }
    
            }
            return tree;
        }
    
    }
    

    这是模型

        public class TreeViewModel
    {
        public int pid { get; set; }
        public int id { get; set; }
        public string name { get; set; }
        public List<TreeViewModel> childrens { get; set; }
    }
    
        public class ObjectModel
    {
        public long UsrObjPrmsnKy { get; set; }
        public long UsrKy { get; set; }
        public int ObjKy { get; set; }
        public string ObjCd { get; set; }
        public string ObjNm { get; set; }
        public string ObjCaptn { get; set; }
        public bool isPrntObj { get; set; }
        public Nullable<int> PrntObjKy { get; set; }
        public int CallObjKy { get; set; }
        public string ObjPath { get; set; }
        public bool isAlwAcs { get; set; }
        public bool isAlwAdd { get; set; }
        public bool isAlwUpdate { get; set; }
        public bool isAlwDel { get; set; }
        public bool isAlwApr { get; set; }
    }
    

    这是视图

            <div id="treeview">
        </div>
        <script type="text/javascript">
    
            $(document).ready(function () {
                LoadTreeView(1);
            });
    
            function LoadTreeView(prntKy)
            {
                var key = prntKy;
                homogeneous = new kendo.data.HierarchicalDataSource({
                    transport: {
                        read: {
                            url: '@Url.Content("~/Home/GetAllMenu")',
                            data:{'prntKy':key},
                        dataType: "json"
                    }
                },
                    schema: {
                        model: {
                            id: "id",
                            hasChildren: "childrens",
                            name: "name"
                        }
                    }
                });
    
            $("#treeview").kendoTreeView({
                dataSource: homogeneous,
                select: onSelectTree,
                dataTextField: "name",
                dataValueField: "id",
            });
            }
    
            function onSelectTree(e) {
                var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
                alert(data.id);
                LoadTreeView(data.id);
            }
        </script>
    

    我也上传了结果图片。请帮我。 Result 1 Result 2

1 个答案:

答案 0 :(得分:3)

您的树视图配置不正确。每次选择多余的节点时,您似乎都在重新初始化它。我建议你查看remote binding demo,它会对你的案件采取非常类似的案例。以下是树视图声明的外观:

var serviceRoot = "http://demos.kendoui.com/service";
    homogeneous = new kendo.data.HierarchicalDataSource({
       transport: {
          read: {
             url: serviceRoot + "/Employees",
             dataType: "jsonp" // you don't need "json" for your case
          }
       },
       schema: {
          model: {
             id: "EmployeeId",
             hasChildren: "HasEmployees"
          }
       }
   });

$("#treeview").kendoTreeView({
   dataSource: homogeneous,
   dataTextField: "FullName"
});

在此演示中,树视图将要求数据源在扩展父节点时加载新级别的节点。例如,当用户在该演示中展开根节点时,数据源向http://demos.kendoui.com/service/Employees?EmployeeId=2发出请求,这意味着“返回EmployeeID等于2的节点的子节点”。为何选择“EmployeeId”?因为这就是数据源模型的“id”:

  schema: {
     model: {
        id: "EmployeeId",
        hasChildren: "HasEmployees"
     }
  }