剑道树视图无法正确加载

Question

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

但我什至无法将这些图像放到 treeView 中。

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

1. 姓名
2. 身份证
3. 子对象列表（List childs）

这是我在控制器上的代码

  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>

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

Answer 1

您的树视图配置不正确。每次选择冗余节点时，您似乎都在重新初始化它。我建议您检查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"
     }
  }