Angular UI Grid：如何为列过滤创建预填充的下拉菜单

Question

我正在寻求关于 Angular UI Grid 功能的帮助。具体来说，我正在探索筛选过滤，虽然我已经能够成功地在我的应用程序中使用自由形式文本字段实现排序，就像他们网站上的示例一样，但是我想找到一种方法来使用预填充的下拉菜单来对某些列进行排序。

澄清一下：我想要的预填充数据是通过我的代码来生成的。如果解决方案包含硬编码数据，那么我可以接受，但我的最终目标是将预填充数据集合设置为该列中的唯一数据值。

我在（例如）Kendo UI（kendodropdownlist）中看到了这个功能，但我不感兴趣的是该解决方案附带的价格标签。我想坚持使用上面提到（并链接）的 Angular UI-grid。在 StackOverflow 上，我找到了一个类似的问题，但不幸的是它似乎没有得到太多关注。我希望通过更详细地解释我所寻求的内容，能够获得比我在那里找到的更完整的答案。

这是我控制器中目前的内容：

var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate',
                                                         'ngTouch', 'ui.grid' ]);

simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http',
                                                  'uiGridConstants', function($scope, $http, uiGridConstants) {
    $scope.columns = [ {
        field : 'trans_detail',
        displayName : 'Transaction'
    }, {
        field : 'cust_name',
        displayName : 'Customer'
    }, {
        field : 'quantity',
        displayName : 'Quantity',
        filters : [ {
            condition : uiGridConstants.filter.GREATER_THAN,
            placeholder : 'greater than'
        }, {
            condition : uiGridConstants.filter.LESS_THAN,
            placeholder : 'less than'
        }
        ]
    }, {
        field : 'today_date',
        displayName : 'Current Date'
    } ];
    $scope.gridOptions1 = {
            enableSorting : true,
            enableFiltering : true,
            columnDefs : $scope.columns,
            onRegisterApi : function(gridApi) {
                $scope.grid1Api = gridApi;
            }
    };

    $http.get("../services/Coherence/Cache").success(function(data) {
        $scope.gridOptions1.data = data;
    });

} ]);

以下是输出结果-带有自由格式文本字段

对于此特定示例，我可能会将客户、数量和当前日期列保留为自由格式下拉列表，但我真的很想使用预先填充的下拉列表来筛选交易（并在将来的项目中拥有它！）。

谢谢！

- laurenOlga

---

你能把你的解决方案的代码发上来吗？我还没有解决这个问题。我遇到的一个问题是，如果我给出一个模板名称，它不会使用该文件...我必须放入字符串中。但我很想知道你是如何完成其余部分的 - 比如下拉列表的填充！ - Phil

Answer 1

你可以使用内置的selectOptions过滤器功能，此处有相应的文档：http://ui-grid.info/docs/#/tutorial/103_filtering 示例：

angular.module('exampleApp', ['ui.grid'])
  .controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
    var animals = [
      { id: 1, type: 'Mammal', name: 'Elephant' },
      { id: 2, type: 'Reptile', name: 'Turtle' },
      { id: 3, type: 'Mammal', name: 'Human' }
    ];
                                                          
    var animalTypes = [
      { value: 'Mammal', label: 'Mammal' },
      { value: 'Reptile', label: 'Reptile'}
    ];
  
    $scope.animalGrid = {
      enableFiltering: true,
      columnDefs: [
        {
          name: 'type', 
          field: 'type', 
          filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
        },
        { name: 'name', name: 'name'}
      ],
      data: animals
    };
      
  }]);

<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>

<div ng-app="exampleApp">
  <div ng-controller="exampleCtrl">
    <h1>UI Grid Dropdown Filter Example</h1>
    <div ui-grid="animalGrid" class="grid"></div>
  </div>
</div>

- Justin Fisher

---

太棒了！在我发布问题时，这个内置功能还没有。现在看到有一个超级简单/内置的方法来获取这个功能，真是太好了 - 谢谢分享！现在它可用了，我以后肯定会使用这个选项 :) - laurenOlga

如何从JSON动态加载selectOptions中的值？ 我希望根据列值填充每一列中的选择下拉过滤器，类似于Excel提供的功能。 - Zameer Fouzan

Answer 2

您可以通过在 columnDefs 中使用 headerCellTemplate 在标题中放置下拉菜单。

  columnDefs: [
     {field:'myField',headerCellTempalte: 'mypulldowntemplate.html"...}
  ]

mypulldowntemplate.html

  <div ng-class="{ 'sortable': sortable }">
  <div class="ui-grid-vertical-bar">&nbsp;</div>
<div class="ui-grid-cell-contents {{col.headerClass}}" col-index="renderIndex">
    {{ col.displayName CUSTOM_FILTERS }}
    <br>
    <select ng-model="getExternalScopes().value[col.field]" ng-change="$event.stopPropagation();getExternalScopes().yourFilterFunction(col.field)">
    </select>
      
  ....

yourFilterFunction()可以过滤任何你想要过滤的内容。也许只需设置一些变量，然后将自定义过滤器分配给网格即可。在ui Grid教程http://ui-grid.info/docs/#/tutorial/103_filtering中可以找到设置条件的示例。

- Scott

---

是的，这正是我要找的 - 因为它给了我一个（空白）下拉菜单，使用您的最终建议应用自定义筛选器，我可以定制下拉菜单以带入我要查找的筛选选项 - 谢谢 :) - laurenOlga

@Scott - 为什么我使用getExternalScopes()时，在angular.js文件中会出现一些未定义的函数错误？但是这个对我有用：<select ng-model="grid.appScope.value[col.field]" ng-change="$event.stopPropagation(); grid.appScope.yourFilterFunction(grid.appScope.value[col.field])"> <option value="222">222</option> </select> - bokkie

我不确定，但我使用getExternalScopes()如下，并且它运行正常。 <select ng-model="getExternalScopes().value[col.field]" ng-change="$event.stopPropagation();getExternalScopes().checkUncheckAll(col.field)"> - Scott

getExternalScopes() 在最新版本的 ui-grid 中已经发生了变化。现在您应该使用 grid.appScope.YOUR_VALUE 而不是 getExternalScopes()。 - Scott

@Scott - 现在 ui-grid 已经内置了一个功能，可以用来填充列下拉菜单中的唯一列值，因此我已经更改了接受的答案。你的答案是我自己使用的，但现在答案已经在 ui-grid 中可用，我认为这对于任何查看此问题的人来说都是更好的选择。 - laurenOlga

所以这个内置功能实际上已经存在一段时间了，但是如果您在显示的下拉列表中涉及到逻辑，它就不够强大。仅仅通过某些过滤器来填充下拉列表在我的情况下是行不通的，因为我有其他影响下拉列表显示方式的条件。我使用的应用程序实际上对于某些下拉列表使用了内置方法，但对于其他下拉列表来说，它并没有提供足够的灵活性。很高兴听到您的情况下可以使用内置的下拉列表功能。 - Scott

Answer 3

对已接受答案的扩展是我通过试错刚刚发现的。您可以在 selectOptions 中使用正则表达式：

           columnDefs: [
            {
                name: 'starRating',
                headerCellClass: 'blue',
                headerTooltip: 'Star Rating',
                maxWidth: 100, 
                filter:
                {
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: [
                        { value: /(THREE|FOUR|FIVE)/, label: 'Positive' },  // Here I wanted the user to be able to choose one option that would filter by several of the possible values in the data set
                        { value: /(ONE|TWO)/, label: 'Negative' },  // ...and Here
                        { value: 'ONE', label: '1' },
                        { value: 'TWO', label: '2' },
                        { value: 'THREE', label: '3' },
                        { value: 'FOUR', label: '4' },
                        { value: 'FIVE', label: '5' }
                    ]
                }
            },

- Adam Hey

---

“按多个可能值筛选”功能真是帮了我大忙。非常感谢这个功能。 - vinhboy

Answer 4

最近我也有同样的需求。我已经自己解决了这个问题。以下是我遵循的步骤。如果您想在ui-grid中使用过滤器，您可以采用两种方法：要么使用现有的ui-grid custom_filters，要么创建一个标题模板并将其绑定到网格中。有一篇很好的文章介绍了如何在ui-grid中添加下拉菜单。基于那些代码，我定制了我的代码片段。我所做的是在index.html中创建自定义模板。

<script type="text/ng-template" id="uiSelect">

      <ui-select-wrap>
        <label> Gender</label>
        <ui-select ng-model="MODEL_COL_FIELD" theme="selectize" ng-disabled="disabled" append-to-body="true" on-select="grid.appScope.filterTableBasedonDropDownSelect($item)">
          <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
          <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search">
            <span>{{ item }}</span>
          </ui-select-choices>
        </ui-select>
      </ui-select-wrap>
    </script>

我创建了一个名为filterTableBasedonDropDownSelect($item)的函数，它将处理过滤逻辑。请注意，在ui-grid中调用函数时，普通的函数声明不起作用。因为ui-grid有自己的parent scope。所以你应该像这样调用你的函数。

on-select="grid.appScope.filterTableBasedonDropDownSelect($item)"

然后你可以在控制器下声明你的函数逻辑。

$scope.filterTableBasedonDropDownSelect= function(item){
     $scope.gridOptions.data  = $filter('filter')($scope.jsonData,item, undefined);};

这是我的工作 示例。

希望对某些人有所帮助。

- gihan-maduranga