数据绑定 - ui 网格

Question

我正在尝试在我的应用程序中实施 UI-grid。当我将静态数据分配给 gridOptions.data 时一切正常；但是，当我从服务器加载数据后动态地将数据分配给 gridOptions.data 时，我总是得到一个空字符串。我尝试使用 $timeout 函数复制动态行为，如下所示，结果仍然相同：空网格。

//ctrl 开始

This works.

 $scope.data = [
             { addedBy :"user", displayName:"Name1" },
             { addedBy :"user2", displayName:"Name2" },
             { addedBy :"user3", displayName:"Name3" }
           ];

This does not; leaving grid empty.

 $timeout(function () {
       $scope.data = [
         { addedBy :"user", displayName:"Name1" },
         { addedBy :"user2", displayName:"Name2" },
         { addedBy :"user3", displayName:"Name3" }
       ];
     });

其余代码保持不变。

$scope.columnDefs = [
        {name: 'displayName'},
        {name: 'addedBy'}
      ];

$scope.gridOptions = { 
columnDefs: $scope.columnDefs, 
data: $scope.data 
};

//ctrl结束

//html开始

<div class="col-md-12 no-padding" ui-grid="gridOptions" class="grid"></div>

//html 结束

我很高兴 ui-grid 应该能够在数据变量更改时更新数据；那么我在这里缺少一些基本的东西吗？

Answer 1

初始化网格时数据不可用。您必须手动调用 notifydataChange 才能让网格更新或重新分配它，就像 Ronald 所说的那样。

他们在 documentation 中有后者的例子

Answer 2

您可以做的另一个选择是将网格定义默认为空数组，并在服务器调用的响应中将其分配给网格。

$scope.columnDefs = [
        {name: 'displayName'},
        {name: 'addedBy'}
      ];

$scope.gridOptions = { 
columnDefs: $scope.columnDefs, 
data: []
}; 

 $timeout(function () {
       $scope.data = [
         { addedBy :"user", displayName:"Name1" },
         { addedBy :"user2", displayName:"Name2" },
         { addedBy :"user3", displayName:"Name3" }
       ];
 $scope.gridOptions.data=$scope.data;
     });

Answer 3

我有非常动态的网格，其中有很多参数的数据刷新。我总是将数据直接分配回 $scope.gridOptions.data。

即

$timeout(function () {
   $scope.gridOptions.data = [
     { addedBy :"user", displayName:"Name1" },
     { addedBy :"user2", displayName:"Name2" },
     { addedBy :"user3", displayName:"Name3" }
   ];
 });

正在此处为您的每个搜索结果重新分配数据

NotifyDataChange 事件可以这样使用：

$scope.gridOptions.onRegisterApi = function (gridApi) {
     //set gridApi on scope
     $scope.gridApi = gridApi;
        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
   };

您必须在控制器中添加 uiGridConstants 依赖项。但是从我的 findings/tests 来看，如果您将数据重新分配给 gridOptions.data，则不需要 notifyDataChange 事件。

数据绑定 - ui 网格

data binding - ui grid

angularjs

data-binding

angular-ui-grid

ui-grid