使用angular-ui-grid预先选择加载的行

时间:2015-11-30 13:55:32

标签: angularjs angular-ui-grid

我想在页面加载(工作日)

上选择某些行

enter image description here

这是掠夺者  plnkr.co/edit/48NyxngWNGIlOps1Arew?p=preview

有什么建议吗?

2 个答案:

答案 0 :(得分:5)

将以下属性添加到$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方法才能对行进行更改。

然后选择第一行(仅作为示例)。

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

要选择工作日,也许您可​​以尝试用以下内容替换最后一行:

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

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

如果您的数据是通过异步调用加载的,您只需选择回调中的行:

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

答案 1 :(得分:0)

我发现接受的答案无法可靠地运作。在组件内使用ui-grid,并将gridOptions.data设置为绑定到组件的属性,api.grid.modifyRows()引发了异常,因为尚未创建在ui-grid {{1}中完成的列}}

这对我有用。也许它可以帮助别人。

dataWatchFunction