使用 angular-ui-grid 在加载时预选择行 [英] Pre-Select rows on load with angular-ui-grid

问题描述

我想在页面加载时选择某些行(工作日)

I want to select certain rows on page load(working days)

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

有什么建议吗?

推荐答案

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

Add the following property to your $scope.gridOptions object :

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

这会设置一个 $scope.gridApi 以便您可以在此函数之外需要时访问它.

This sets a $scope.gridApi so you can access it if you need it outside of this function.

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

You need to call the modifyRows method in order to be able to make changes to your rows.

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

Then the first row is selected (just as an example).

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

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

To select the working days, maybe you can try replacing the last line by something like this :

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

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

row.isWorkingDay can simply check if the day is among a list of given days.

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

If your data is loaded by an async call you can simply select the rows in the callback :

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

这篇关于使用 angular-ui-grid 在加载时预选择行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！