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

Question

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

我的问题是自定义排序和过滤似乎冒泡，我只能让过滤和排序在一个网格而不是另一个网格上工作。

下面是我的两个 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")

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

当调用 $scope.gridOptions1 中的函数时，sortListener 一切正常，但 sortOnSiteListener 也会触发。

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

Answer 1

您不能将相同的 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 and Plunkr with RIGHT setup。性别栏是需要注意的一栏。

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

Angular ui-grid custom filter not working on multiple grids

javascript

angularjs

angular-ui

angular-ui-grid

翡翠