MALE/FEMALE 的角度 ui-grid 过滤器问题答案

【问题标题】：angular ui-grid filter issues with MALE/FEMALEMALE/FEMALE 的角度 ui-grid 过滤器问题
【发布时间】：2020-03-25 17:54:06
【问题描述】：

我使用角度 ui-grid，底线是我有一个“性别”列，其中包含“男性”和“女性”。当我单击“MALE”下拉菜单时，所有 MALE 和 FEMALE 都会出现（显然是因为 m-a-l-e 在 f-e-m-a-l-e 中）。如何让过滤器区分两者？

      {
        field: 'sex'
        , displayName: 'SEX'
        , width: '120'
        , editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
        , filter: {
            type: uiGridConstants.filter.SELECT,
            selectOptions: [
                { value: 'male', label: 'male' },
                { value: 'female', label: 'female' }
            ]
          }
      },

【问题讨论】：

标签： angular-ui-grid

【解决方案1】：

您可以提供自定义功能进行过滤。更改您的column def 以具有自定义过滤功能。

{
    filter: {
        type: uiGridConstants.filter.SELECT,
        selectOptions: [
            { value: 'male', label: 'male' },
            { value: 'female', label: 'female' }
        ],
        condition: customFilterSelected
      }
  },

然后定义customFilterSelected

function customFilterSelected(function filterSelected(term, value, row, column) {
    return term === value;
}

每次过滤器更改每行时都会运行此函数。参数term是filter的值，value是当前行的值。如果此函数返回 true，则会显示一行。

【讨论】：

【解决方案2】：

试试这个

name: 'gender', displayName: 'Gender', enableHiding: false, resizeable: true,
filter: {
     type: uiGridConstants.filter.SELECT,
     condition: uiGridConstants.filter.EXACT,
     selectOptions: [{ value: 'Male', label: 'Male' }, { value: 'Female', label: 'Female' }, { value: 'Other', label: 'Other' }]
}

【讨论】：