javascript - 复选框的 Kendo Treeview 在 Angular js 中不起作用

标签 javascript angularjs kendo-treeview

我正在以 Angular 实现复选框的 Kendo Treeview 。我没有收到错误,但树没有渲染。我的代码在这里:

addCtrl.js

$scope.updateTree = function () {
    websiteService.getWebsiteFeaturesTree(webName, function (data) {
                $scope.treeOptions = {
                    checkboxes: {
                        checkChildren: true
                    }
                };

                $scope.treeDataSource = data;
            });

    }

add.html

<div kendo-tree-view k-options="treeOptions" k-data-source="treeDataSource"></div>

app.js

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'kendo.directives']);

我从网络服务获取数据源。这是 json

// 20160930204148
// http://localhost/api/Website/GetWebsiteFeaturesTree?webName=MetisEmptyTemplate

[
  {
    "Name": "Section",
    "text": "Admin",
    "checked": false,
    "items": [
      {
        "Name": "Tab",
        "text": "Matrix Analysis",
        "checked": true,
        "items": [

        ]
      },
      {
        "Name": "Tab",
        "text": "Risk Categories and Questions",
        "checked": true,
        "items": [

        ]
      },
      {
        "Name": "Tab",
        "text": "Risk Colors",
        "checked": true,
        "items": [

        ]
      },
      {
        "Name": "Tab",
        "text": "SWOT Types",
        "checked": false,
        "items": [

        ]
      }
    ]
  },
  {
    "Name": "Section",
    "text": "Strategy",
    "checked": false,
    "items": [
      {
        "Name": "Tab",
        "text": "SWOT Analysis",
        "checked": false,
        "items": [
          {
            "Name": "Grid",
            "text": "SWOT Grid",
            "checked": true,
            "items": [

            ]
          },
          {
            "Name": "Outputs",
            "text": "Outputs",
            "checked": false,
            "items": [
              {
                "Name": "Output",
                "text": "SWOT Box",
                "checked": false,
                "items": [

                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "Name": "Section",
    "text": "Portfolio",
    "checked": true,
    "items": [
      {
        "Name": "Tab",
        "text": "Matrix",
        "checked": true,
        "items": [
          {
            "Name": "Grid",
            "text": "Matrix Grid",
            "checked": true,
            "items": [

            ]
          },
          {
            "Name": "Outputs",
            "text": "Outputs",
            "checked": true,
            "items": [
              {
                "Name": "Output",
                "text": "Matrix Output",
                "checked": true,
                "items": [

                ]
              }
            ]
          }
        ]
      },
      {
        "Name": "Tab",
        "text": "Strategy",
        "checked": true,
        "items": [
          {
            "Name": "Grid",
            "text": "Strategy Grid",
            "checked": true,
            "items": [

            ]
          },
          {
            "Name": "Outputs",
            "text": "Outputs",
            "checked": true,
            "items": [
              {
                "Name": "Output",
                "text": "Investment Level by Objective",
                "checked": true,
                "items": [

                ]
              }
            ]
          }
        ]
      },
      {
        "Name": "Tab",
        "text": "Risk",
        "checked": true,
        "items": [
          {
            "Name": "Grid",
            "text": "Risk Grid",
            "checked": true,
            "items": [

            ]
          },
          {
            "Name": "Outputs",
            "text": "Outputs",
            "checked": true,
            "items": [
              {
                "Name": "Output",
                "text": "Portfolio Risk",
                "checked": true,
                "items": [

                ]
              },
              {
                "Name": "Output",
                "text": "Portfolio Risk Stacked Bar",
                "checked": true,
                "items": [

                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "Name": "Section",
    "text": "Project",
    "checked": false,
    "items": [
      {
        "Name": "Tab",
        "text": "Matrix",
        "checked": true,
        "items": [
          {
            "Name": "Grid",
            "text": "Matrix Grid",
            "checked": true,
            "items": [

            ]
          }
        ]
      },
      {
        "Name": "Tab",
        "text": "Strategy",
        "checked": true,
        "items": [
          {
            "Name": "Grid",
            "text": "Strategy Grid",
            "checked": true,
            "items": [

            ]
          },
          {
            "Name": "Outputs",
            "text": "Outputs",
            "checked": true,
            "items": [
              {
                "Name": "Output",
                "text": "Project Tactic Linkage",
                "checked": true,
                "items": [

                ]
              },
              {
                "Name": "Output",
                "text": "OGTM",
                "checked": true,
                "items": [

                ]
              }
            ]
          }
        ]
      },
      {
        "Name": "Tab",
        "text": "Risk",
        "checked": false,
        "items": [
          {
            "Name": "Grid",
            "text": "Risk Grid",
            "checked": false,
            "items": [

            ]
          },
          {
            "Name": "Outputs",
            "text": "Outputs",
            "checked": true,
            "items": [
              {
                "Name": "Output",
                "text": "Risk Charts",
                "checked": true,
                "items": [

                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

虽然我的数据源是正确的。里面缺少什么东西?我没有收到任何错误。我的树没有以 html 形式呈现。

最佳答案

尝试将数据放入新的 kendo.data.HierarchicalDataSource

关于javascript - 复选框的 Kendo Treeview 在 Angular js 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39795325/

相关文章:

javascript - 如果一个条件设置为 true 并且剩下的 ng-show 为 false,如何处理 AngularJS 中的多个 ng-show 和一个 ng-hide

javascript - 从 websockets 接收到特定数据后仅更改特定值

telerik - 从 Telerik 到 Kendo Treeview ItemDataBound

javascript - 有没有一种方法可以动态地将对象名称传递给函数(作为参数)并使用参数引用该对象的属性?

javascript - nodejs 我不知道为什么帖子没有链接

javascript - Typescript:代码看起来相同,但会产生错误

javascript - Kendo MVC Treeview 获取所有选中的节点并将它们传递给 Controller

javascript - 类型错误 : Cannot read property 'id' of undefined (also 'startWith' )

javascript - 在 iframe 中显示 HTML $scope 变量作为内容

c# - KendoUI 树状 View : remote data issue