javascript - Angular ui-grid自定义过滤器不适用于多个网格

我在同一页面上有两个网格，数据正在流入两个单独的选项卡。此功能运行正常，没有问题。

我的问题是自定义排序和过滤似乎很麻烦，并且我只能使过滤和排序在一个网格上工作而在另一个网格上无法工作。

以下是我的两个sortListener函数

    var sortListener = function( grid, sortColumns ) {
      console.log('sort');
      var page = $scope.gridApi.pagination.getPage();
      var pageSize = $scope.gridOptions1.paginationPageSize;
      var url = getGridPageUrl(page, pageSize);
      var columns = $scope.gridApi.grid.columns;
      var payload = getGridPagePayload(sortColumns, columns);
      sendGridPageRequest(url, payload);
    };

    var sortSiteListener = function(grid, sortColumns) {
      console.log('sortOnSiteListener');
      var page      = $scope.gridApi.pagination.getPage();
      var pageSize  = $scope.gridOptions12.paginationPageSize;
      var urlOnSite = getOnSiteGridPageUrl(page, pageSize);
      var columns   = $scope.gridApi.grid.columns;
      var payloadOnSite   = getGridPagePayload(sortColumns, columns);
      sendOnSiteGridPageRequest(urlOnSite, payloadOnSite);
    };

玉

tabset(ng-if="dataConstant.item.location_type !== 'On-Site Depot'")
    tab(heading="Audit Grid", select="tabShown = !tabShown", desselect="tabShown = !tabShown")
      div(ui-grid-auto-resize, id="grid1", ui-grid="gridOptions1", ui-grid-pagination, ui-grid-edit, ui-grid-row-edit, class="auditGrid")
    tab(heading="On Site Depot Parts", select="tabShown = !tabShown", desselect="tabShown = !tabShown")
      div(ui-grid-auto-resize, id="grid12", ui-grid="gridOptions12", ui-grid-pagination, ui-grid-edit, ui-grid-row-edit, class="auditGrid")

它们在onRegisterApi中为$ scope.gridOptions1和$ scope.gridOptions12触发。

在$ scope.gridOptions1中调用函数时，所有内容均应按sortListener的方式运行，但也会触发sortOnSiteListener。

我似乎无法弄清楚为什么这样冒泡。

最佳答案

您可能不会将相同的filterfunction-reference传递到不同的gridOptions中。

如果您得到以下信息：

var genderFilter = { someFilter }; // mistake

var gridOptions1 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter },
  ...
};

var gridOptions12 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter },
  ...
};

而是对每个网格使用新功能。

var genderFilter1 = { someFilter };
var genderFilter2 = { someFilter };

var gridOptions1 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter1 },
  ...
};

var gridOptions12 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter2 },
  ...
};

您可以使用克隆功能或手动创建新实例。

请参见Plunkr with WRONG setup和Plunkr with RIGHT setup。性别专栏是一个值得关注的地方。