Where can I get Angular ui-grid selected items

37

测试 Angular ui-grid(ng-grid v.3.0)。我怎么也找不到选定的行。当用户单击一行时,我只想获取该行或甚至行ID。在这里发现了顶部评论,但我认为这已经过时了:从 ng-grid 获取选择行?

有人知道在 3.0 中 gridOptions.selectedItems 存储在哪里吗?

4个回答

36

这是您正在寻找的内容吗? http://ui-grid.info/docs/#/tutorial/210_selection

  1. 使用ui-grid-selection标签(以及在应用程序中注册ui.grid.selection模块)激活网格选择功能
  2. 注册gridApi并使用gridApi.selection来访问getSelectedRows()

24

除了上述步骤https://dev59.com/KV8e5IYBdhLWcg3wAWns#26188783,你可能还需要通过ng-click事件调用它来获取实际的值/对象。至少这就是我让它工作的方式。

Eg:
$scope.selectRow = function(){
    $scope.gridApi.selection.getSelectedRows();
};

从模板中调用selectRow()。

这是给所有跟我一样感到困惑的人的提示,因为ui-grid的文档并不是最好的(尤其是对于这个选择部分)。


1
谢谢你,Rajush。我很感激这些额外的信息! - Mlalahoi

16

最简单的方法是:

  1. 在您的控制器中添加以下内容以注册gridApi:

    $scope.gridOptions.onRegisterApi = function(gridApi) { $scope.myGridApi = gridApi; };

  2. 访问所选项目的数组:

    $scope.myGridApi.selection.getSelectedRows();


0
使用网格UI时,您必须使用selection.on.rowSelectionChanged来更新存储所选项目的作用域变量。通过这种方式,您可以在绑定表达式中使用该值。
var SelectController = function($scope) {
    ...
    $scope.selectedItem = null;

    $scope.gridOptions = {
            data : 'articles',
            enableRowSelection : true,
            multiSelect : false,
            enableRowHeaderSelection : false,
            ...
        };

        $scope.gridOptions.onRegisterApi = function(gridApi) {
            // set gridApi on scope
            this.$scope.gridApi = gridApi;
        }.bind(this);
        $scope.gridOptions.onRegisterApi = function(gridApi) {
            // set gridApi on scope
            this.$scope.gridApi = gridApi;
            this.$scope.gridApi.selection.on.rowSelectionChanged($scope,
                    function(row) {
                        this.$scope.selectedItem = row.entity;
                    }.bind(this));
        }.bind(this);

如果您需要进行多选操作,请使用数组而不是普通对象。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接