剑道网格绑定在angularjs中不起作用答案

【问题标题】：Kendo grid binding not working in angularjs剑道网格绑定在angularjs中不起作用
【发布时间】：2016-12-09 02:10:10
【问题描述】：

我正在尝试绑定在收到 API 响应后填充的列表。我可以看到列表中的对象，但我仍然不明白为什么剑道网格没有绑定数据源。我的代码如下。

vm.getAccounts = function () {
        acctSearchService.searchAccounts(null, vm.AccountSearchModel)
            .then(getAccountsSuccess, getAccountsFailure);
    }

    vm.accountGridData = [];
    function getAccountsSuccess(response) {
        vm.accountGridData.push(response.model);
        return vm.accountGridData;
    }

在收到 API 调用的响应后，我将结果输入到 vm.accountGridData，我正在尝试将其绑定到剑道网格的数据源，如下所示。

$("#grid").kendoGrid({
        dataSource: { data: vm.accountGridData },
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: vm.mainGridColumns
    });

我需要做其他事情来获取数据吗？

【问题讨论】：

在哪里尝试做 .kendoGrid？我认为它是在指令而不是控制器中完成的，对吧？
这是在控制器中。
啊，把它移到一个指令，你的控制器中的任何东西都不会受到影响，因为页面已经呈现了
你能举个例子吗，我不知道如何实现。
你能分享你的html吗？ @tt0206

标签： kendo-grid

【解决方案1】：

你需要像这样创建一个指令：

app.directive('myDirective', function () {
  return {
    restrict: 'EA',    
    scope: {},
    template: [].join(''),
    controllerAs: 'vm',
    controller: function () {
        var vm = this;
        vm.getAccounts = function () {
             acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure);
        }

        vm.accountGridData = [];
        function getAccountsSuccess(response) {
            vm.accountGridData.push(response.model);
            return vm.accountGridData;
        }
    },
    link: function () {
        $("#grid").kendoGrid({
            dataSource: { data: vm.accountGridData },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: vm.mainGridColumns
        }); 
    }
  };
});

在你的 html 中：

<div my-directive></div>
<div id="grid"></div>

【讨论】：

【解决方案2】：

如果您没有为它实现自定义读取功能，则您不需要数据源中的数据属性。 Datasource 属性应该是一个数组或 kendo-datasource 对象。

试试这个：

$("#grid").kendoGrid({
        dataSource: vm.accountGridData,
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: vm.mainGridColumns
    });

并检查网格文档：http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

【讨论】：

我已尝试按照您建议的方式将 arraylist 分配给数据源，但我认为您已经指出 控制器中的任何内容都不会受到影响，因为页面已经呈现这可能是它不起作用的原因。
据我所知，网格围绕您的数组进行包装，并且在初始化后不引用它。如果要更新数据源，可以将 kendo-grid="grid" 指令添加到网格 html 中，稍后在收到数据时将其加载到 $scope.grid.datasource.read(myDataArray) 或者如果不想使用指令则使用 jquery 进行操作
感谢@Layonez 指出。我在获取数据源及其工作的函数内部添加了 $("#grid").kendoGrid({})。
但是分页和过滤没有按预期工作。即使在 pageSize: 5 提供了加载所有数据之后。这有点奇怪。

【解决方案3】：

我在战斗后终于找到了路。一步到位。

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/grid/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
      </div>
    </div>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope, $http){

        $scope.data = new kendo.data.ObservableArray([]);

        $http({
          method: 'GET',
          type:"json",
          url: '//jsonplaceholder.typicode.com/posts'
        }).then(function successCallback(response) {
          $scope.grid.dataSource.data(response.data);
        }, function errorCallback(response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
        });

        $scope.mainGridOptions = {
          dataSource: {
            data: $scope.data,
            pageSize: 5
          },
          sortable: true,
          pageable: true,
           filterable: {
                    mode: "row"
                },
          resizable: true,
          columns: [{
            field: "userId",
            title: "userId",
            width: "120px"
          },{
            field: "id",
            title: "ID",
            width: "120px"
          },{
            field: "title",
            width: "120px"
          },{
            field: "body",
            width: "120px"
          }]
        };

      })
    </script>


  </body>
</html>

【讨论】：