Question

我正在寻找有关 Angular UI Grid 功能的一些帮助。具体来说，我正在探索 filtering ，虽然我能够在我的应用程序中使用自由格式文本字段成功实现排序，就像在 example on their site <中一样/ strong> 我希望找到一些方法，使用预先填充的某些列的下拉菜单进行排序。

澄清：通过预先填充，我的意思是我希望通过我的代码填充下拉列表。我很好，如果解决方案包含硬编码数据，但我最终的目标是让预填充由被分类列的唯一数据值组成：）

我在（例如）Kendo UI（kendodropdownlist）中看到了这个功能，但我对该解决方案附带的价格标签不感兴趣。我想坚持上面提到（和链接）的Angular UI-grid。在StackOverflow上，我发现了一个 similar question ，但不幸的是它似乎并没有太多牵引力。我希望通过对我正在寻找的内容给出更详细的解释，我会得到比我在那里找到的更完整的答案。

以下是我的控制器中的内容：

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

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我最近也有同样的要求。我自己已经弄明白了。这就是我所遵循的步骤。如果你想在ui-grid中使用过滤器，你可以使用两种方法使用现有的ui-grid {{ 3}}或创建一个标题模板并将其绑定到grid.There有一篇很好的文章，如何custom_filters。基于这些代码，我已经自定义了我的代码片段。我做的是我在索引中创建了自定义模板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有自己的add drop downs in ui-grid。所以你应该这样调用你的函数。

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

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

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

这是我的工作parent scope。

希望这会对某人有所帮助。

Answer 4

我刚刚通过反复试验发现了对已接受答案的扩展。您可以在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' }
                    ]
                }
            },

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

4 个答案: