在我的项目中,我使用 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;
};
}
})();
View :
<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>
当我在 View 中按“过滤器”时,此函数已被调用:
this.filterByClient = function () {
gridApi.grid.refresh()
singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
};
在这一行中:
gridApi.grid.refresh()
我得到这个:错误:
Cannot read property grid of undefined
虽然在这个类似example效果很好。
知道为什么我会收到上面的错误吗?
最佳答案
您必须将 gridApi
注入(inject)范围,如示例所示:
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
// [...]
},
然后您可以通过以下方式引用它:
$scope.gridApi.grid.refresh();
在您的情况下,只需将 $scope
更改为 this
关于javascript - 为什么我收到错误参数未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33752045/