Kendo Treeview的复选框不适用于角度js

时间:2016-09-30 15:45:15

标签: javascript angularjs kendo-treeview

我正在以角度实现复选框的kendo树视图。我没有错误,但树没有渲染。我的代码在这里:

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']);

我从webservice获取数据源。这是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渲染。

1 个答案:

答案 0 :(得分:1)

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