劍道網格綁定不工作在angularjs

我想綁定列表，我收到API響應後填充列表。我可以看到列表中的對象，但我仍然不明白爲什麼劍道網格不綁定數據源。我的代碼如下。劍道網格綁定不工作在angularjs

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

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

我得到的結果爲vm.accountGridData接收來自API調用響應後，我試圖綁定，爲劍道電網的數據源如下。

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

我需要做其他事情來獲取數據嗎？

來源

2016-12-09 tt0206

，其中正在做.kendoGrid？我認爲這是在一個指令而不是控制器中完成的嗎？ – Yaser

這是在控制器中。 – tt0206

啊把它移動到一個指令，無論是在你的控制器不受影響，因爲該頁面已經呈現 – Yaser

終於讓我找到的方式戰鬥之後。這只是簡單的一步。

<!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>

來源

2016-12-16 03:20:40 tt0206

您需要創建一個這樣的指令：

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：

來源

2016-12-09 03:35:12 Yaser

你不需要的數據屬性在你的數據源，如果你不爲它實現自定義閱讀功能。數據源屬性應該是一個數組或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

來源

2016-12-09 08:18:21

我曾嘗試將數據源分配給你所建議的方式，但我認爲yeaer指出**你的控制器中的任何東西都不會受到影響，因爲頁面已經被渲染**，這可能是它不工作的原因。 – tt0206

因爲我知道網格圍繞你的數組進行包裝，初始化後沒有引用它。如果你想更新數據源，你可以在你的grid html中添加'kendo-grid =「grid」'指令，稍後當你收到數據時將它加載到'$ scope.grid.datasource.read（myDataArray）'或者用jquery如果不想使用指令 –

感謝@Layonez指出。我已經添加** $（「＃grid」）。kendoGrid（{}）**之後，我正在獲取數據源和它的工作。 – tt0206

劍道網格綁定不工作在angularjs

回答

相關問題