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;
    });

} ]);

下面是输出 - 带有自由格式的文本字段

对于此特定示例列客户,数量和当前日期我可能会留下自由格式下拉列表,但我真的希望能够使用预先填充的下拉列表进行过滤(并将其放在我的工具箱中)对于未来的项目当然!).

谢谢!

Answer 1

您可以通过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网格教程中找到在自定义过滤器中设置条件的示例,网址为http://ui-grid.info/docs/#/tutorial/103_filtering

Answer 2

您可以使用此处记录的内置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>