Question

在我的项目中，我使用ui-grid来过滤表。

这里是javascript代码：

(function () {
    "use strict";

    angular.module("workPlan").controller("workPlanListController", ["workPlans",
        "clients",
        "inspectionAuthority",
        "$http",
        "config",
        "workPlanServise",
        workPlanListController
    ]);


    function workPlanListController(workPlans,
        clients,
        inspectionAuthority,
        $http,
        config,
        workPlanServise
    ) {
        var self = this;

        this.workPlanList = workPlans;
        this.lookups = {
            client: clients,
            authority: inspectionAuthority
        };

        this.gridOptions = {
            expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
            expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: false,
            enableToopTip: true,
            enableHorizontalScrollbar: 0,
            onRegisterApi: function (gridApi) {
                gridApi = gridApi,
                gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            enableColumnMenus: false,
                            enableSorting: true,
                            enableFiltering: false,
                            enableToopTip: true,
                            enableHorizontalScrollbar: 0,
                            columnDefs: [{ name: 'Frequency', field: 'inspectionFrequencyName', cellTooltip: true },
                                         { name: '# Sites', field: 'siteCount', cellTooltip: true },
                                         { name: 'Fixed Sites', field: 'normalSitesCount', cellTooltip: true }]
                        };
                        var arr = [];

                        workPlanServise.getSubGridContent(row.entity.clientId).then(function (result) {
                            row.entity.subGridOptions.data = result.data;

                            for (var i = 0; i < result.data.length ; i++) {
                                arr.push(
                                     {
                                         inspectionFrequencyName: row.entity[i].inspectionFrequencyName,
                                         items2inspect: row.entity[i].itemssiteCount2inspect,
                                         normalSitesCount: row.entity[i].normalSitesCount,
                                     });
                            }
                            row.entity.subGridOptions.data = arr;
                        });
                    }
                });
            }
        }

        this.gridOptions.columnDefs = [
        { name: 'Client', field: 'clientName', cellTooltip: true, headerTooltip: true },
        { name: '# Sites', field: 'siteNumbers', cellTooltip: true, headerTooltip: true },
        { name: '#FixedSites', field: 'siteNumbersInspected', cellTooltip: true, headerTooltip: true }];

        this.gridOptions.data = self.workPlanList;


        this.filterByClient = function () {
            gridApi.grid.refresh()
            singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
        };


        this.singleFilter = function (renderableRows, field, filterValue) {
           var matcher = new RegExp(filterValue);
            renderableRows.forEach(function (row) {
               var match = false;

               if (row.entity[field].match(matcher)) { match = true; }

               if (!match) {
                   row.visible = false;
               }
           });
            return renderableRows;
        };
    }
})();

观点：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4>work plan</h4>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter by client...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ng-click='list.filterByClient()'>
                        <i class="glyphicon glyphicon-filter"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div ui-grid="list.gridOptions" dir="rtl" ui-grid-expandable ui-grid-resize-columns class="grid"></div>

</div>

当我在视图中按过滤器时，此功能已被调用：

    this.filterByClient = function () {
        gridApi.grid.refresh()
        singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
    };

并在此行中：

gridApi.grid.refresh()

我明白了：错误：

Cannot read property grid of undefined

虽然在这个类似的example中它可以正常工作。

我知道为什么会出现上述错误？

Answer 1

您必须像示例那样将gridApi注入范围：

onRegisterApi: function(gridApi){
  $scope.gridApi = gridApi;
  // [...]
},

然后您可以参考：

$scope.gridApi.grid.refresh();

在您的情况下，只需使用$scope

更改this即可

Answer 2

问题是，gridApi参数只能在onRegisterApi函数内访问，除非您将其分配给其他变量。

onRegisterApi: function (gridApi) {
    gridApi = gridApi, // Nothing happens by this line
}

你必须尝试这种方式。

 var gridApi;
 this.gridOptions = {
            expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
            expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: false,
            enableToopTip: true,
            enableHorizontalScrollbar: 0,
            onRegisterApi: function (gridApiParam) {
               gridApi = gridApiParam, //Or assign the `gridApiParam` to `this` and access it the same way
               .......................
               .......................
            }
            .......................
            .......................
}

为什么我得到错误参数是未定义的？

2 个答案: