使用 angular-ui-网格加载前 Select 行

Question

我想select页面加载的某些行（工作日）

这就是笨蛋 plnkr.co/edit/48NyxngWNGIlOps1Arew?p=preview

有什么建议吗？

Answer 1

将以下属性添加到您的 $scope.gridOptions 对象中：

onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}

这设置了一个 $scope.gridApi 以便您可以在该函数之外访问它。

您需要调用 modifyRows 方法才能对行进行更改。

然后第一行 selected（仅作为示例）。

http://plnkr.co/edit/mvwlfaJiPDysbn2IrNpv?p=preview

到select工作日，也许你可以尝试用这样的东西替换最后一行：

$scope.gridOptions.data.forEach(function (row, index) {
    if (row.isWorkingDay()) {
        $scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
    }
});

row.isWorkingDay 可以简单地检查这一天是否在给定日期列表中。

如果您的数据是通过异步调用加载的，您可以简单地 select 回调中的行：

asyncCall.then(function (data) {
    $scope.gridOptions.data = data;
    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
});

Answer 2

我发现接受的答案并不可靠。在组件内部使用 ui-grid，并将 gridOptions.data 设置为绑定到组件的属性，api.grid.modifyRows() 抛出异常，因为尚未创建列，这是在ui-grid dataWatchFunction.

以下是对我有用的方法。也许它可以帮助别人。

gridOptions =
  {
  /*--------------------------------------------------------*/
  /* `data` Property - Sets/Returns `rawData`. Setter calls */
  /* `selectRows()` to select rows from the loaded items.   */
  /*                                                        */
  /* If `onRegisterApi()` has not been executed, the API is */
  /* not available and the grid has not been configured.    */
  /* `selectRows()` is called in `onRegisterAPI()`.         */
  /*--------------------------------------------------------*/
  get data()     { return (this.rawData || (this.rawData = [])); },
  set data(data) 
    { 
    this.rawData = data;
    if (this.api)
      this.selectRows(this);
    },

  /*------------------------------------------------*/
  /* Select rows for the initial setting of `data`. */
  /*------------------------------------------------*/
  onRegisterApi: function(api) 
    {
    this.selectRows(this);
    },

  /*------------------------------------------------------*/
  /* `selectRows` is called after the `data` property has */
  /* been updated and waits for a ROW data change event.  */
  /*------------------------------------------------------*/
  selectRows: function(self)
    {
    /*-------------------------------------------------------------*/
    /* Register handler to select rows on next ROW event that have */
    /* `IWantSelected` set `true`. Deregister after execution.     */
    /*-------------------------------------------------------------*/
    var deregister = self.api.grid.registerDataChangeCallback(function(grid) 
      {
      self.data.filter(function(item) { return item.IWantSelected; }).some(function(item)
        {
        self.api.selection.selectRow(item);
        });
      deregister();
      }, [uiGridConstants.dataChange.ROW]);
    }
  };

使用 angular-ui-网格加载前 Select 行

Pre-Select rows on load with angular-ui-grid

angularjs

angular-ui-grid