kendo-ui - 剑道树视图无法正确加载

Question

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

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

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

1. 姓名
2. ID
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

您的树视图配置不正确。每次选择冗余节点时，您似乎都在重新初始化它。我建议您查看实现与您的案例非常相似的远程绑定演示。这是树视图声明的外观：

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.c​​om /service/Employees?EmployeeId=2 发出请求，这意味着“返回 EmployeeID 等于 2 的节点的子节点”。为什么是“EmployeeId”？因为这就是数据源模型的“id”：

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