ui网格过滤下拉菜单 [英] ui grid filtering dropdown

问题描述

我的列中的数据(由下拉列表提供)和列的过滤器应该匹配.因此，我使用相同的数组来填充两者.但是对于数据，我可以告诉ui网格用于editDropdownValueLabel和editDropdownIdLabel的字段名称.filter属性有这样的东西吗?

The data in my columns (provided by dropdown) and the filter of a column should match. So I use the same array to populate both. However for the data I can tell ui grid the field names to use for editDropdownValueLabel and editDropdownIdLabel. Is there such a thing for the filter property?

我问是因为我正在设置单元格数据下拉列表值以及从Web api调用中检索到的数组中的过滤器，并且单元格数据下拉列表已正确填充，但是我的过滤器全都说未定义"，这使我相信不知道要使用selectOptions数组属性中的哪个字段.

I ask because I'm setting the cell data dropdown values and the filter from an array retrieved from a web api call and my cell data dropdown is populated correctly but my filters all say 'undefined', which leads me to believe it doesn't know what field in the selectOptions array property to use.

当我定义网格时，我会省略单元格的数组并进行过滤，因为当Web api调用返回该数据时，我将填充该数组.

When I define my grid I leave out the arrays for the cell and filter as I'll populate that when the web api call returns with that data.

{
    name: 'Status',
    field: 'Status',
    width: 200,
    editType: 'dropdown',
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownIdLabel: 'Value',
    editDropdownValueLabel: 'Value',
    filter: {
        type: uiGridConstants.filter.SELECT,
        condition: uiGridConstants.filter.EXACT
    }
}

我如何从Web api数据中填充单元格下拉列表和过滤器下拉列表.

How I populate both the cell dropdown and filter dropdown from web api data.

$scope.gridStore.columnDefs[i].editDropdownOptionsArray = response.data[colFieldName];
$scope.gridStore.columnDefs[i].filter.selectOptions = response.data[colFieldName];

推荐答案

没有看到更多代码，很难确切说明正在发生什么，但是在以下示例中，我动态添加了Status列定义.

Without seeing more of your code it's hard to say exactly what's happening, but in the following example I add the Status column definition dynamically.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

  $scope.myData = [{
    "Name": "Cox",
    "Number": 41,
    "Status": 1,
    "Date": "10/06/1981"
  }, {
    "Name": "Lorraine",
    "Number": 431,
    "Status": 2,
    "Date": "03/04/1983"
  }, {
    "Name": "Nancy",
    "Number": 341,
    "Status": 1,
    "Date": "10/06/1981"
  }];

  // grid setup
  $scope.gridStore = {
    data: $scope.myData,
    enableSorting: true,
    enableFiltering: true,
    flatEntityAccess: true,
    fastWatch: true,
    enableHorizontalScrollbar: 1,
    enableCellSelection: true,
    enableCellEditOnFocus: true,
    columnDefs: [{
        name: 'Number',
        field: 'Number',
        width: 100,
        pinnedLeft: true,
        enableCellEdit: false
      }, {
        name: 'Name',
        field: 'Name',
        width: 200,
        pinnedLeft: true,
        enableCellEdit: false
      }, {
        name: 'Date',
        field: 'Date',
        width: 100
      }
    ]
  };
  
  this.typeLookup = function (val, arr) {
    var result = arr.filter(function(v) {
        return v.id === val;
    })[0].type;

    return result;
  };


  /* simulate getting JSON settings data here ... */
  
  var jsonDef = { name: 'Status', field: 'Status', width: 150, editType: 'dropdown', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownIdLabel: 'id', editDropdownValueLabel: 'type', filter: { type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } };

  var options = [{
    id: 1,
    type: 'Closed'
  }, {
    id: 2,
    type: 'Pending'
  }, {
    id: 3,
    type: 'Open'
  }];

  $scope.gridStore.columnDefs.push(jsonDef);
  
  var idx = $scope.gridStore.columnDefs.length - 1;
  
  $scope.gridStore.columnDefs[idx].cellTemplate = '<div class="ui-grid-cell-contents">{{ grid.appScope.Main.typeLookup(COL_FIELD,' + JSON.stringify(options) + ') }}</div>';
  $scope.gridStore.columnDefs[idx].editDropdownOptionsArray = options;
  $scope.gridStore.columnDefs[idx].filter.selectOptions = options.map(function(obj) { 
    var rObj = {'value': obj.id, 'label': obj.type};
    return rObj;
  });
  
  /* end simulated JSON retrieval */

}]);

.grid {
  height: 200px;
}

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl as Main">
    <div id="grid1" ui-grid="gridStore" ui-grid-edit class="grid"></div>
  </div>

</body>

</html>

这篇关于ui网格过滤下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！