ui网格过滤下拉菜单答案

【问题标题】：ui grid filtering dropdownui网格过滤下拉菜单
【发布时间】：2017-02-23 00:38:25
【问题描述】：

我的列中的数据（由下拉菜单提供）和列的过滤器应该匹配。所以我使用相同的数组来填充两者。但是对于数据，我可以告诉 ui 网格用于 editDropdownValueLabel 和 editDropdownIdLabel 的字段名称。过滤器属性有这样的东西吗？

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

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

{
    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 数据中填充单元格下拉列表和过滤器下拉列表。

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

【问题讨论】：

标签： javascript angularjs ui-grid

【解决方案1】：

如果没有看到更多代码，很难准确地说出发生了什么，但在下面的示例中，我动态添加了 Status 列定义。

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>

【讨论】：

如果我从 api 调用返回的数据具有标签和值的属性，那么它可以工作。我没有意识到这是 ui-grid 正在寻找的属性。小写也一样。这导致了答案，所以你得到了信用。谢谢！

【解决方案2】：

在处理 ui 网格上的下拉列表时，我使用的一个简洁功能是我将它们视为始终是动态的，因此我不再需要处理 OptionsArray、过滤器、标签等（这对于动态数据来说很痛苦）。

当您计划扩展您在角度 ui 网格中的知识时，您需要研究一下。

HTML：

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

控制器：

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

【讨论】：

当您有几列时，这很有效，但我有大约 15 列，并且不想为每一列都有一个 htm 文件。它实际上是更少的代码，或者应该是，填充选项数组。知道怎么走那条路吗？
您是否尝试过在数据集中使用过滤方法？ docs.angularjs.org/api/ng/filter/filter 看看这个 - 这可能会有所帮助。
@KaushalPatel 我想我不确定在哪里或为什么要使用它？我的数据数组很好。它只是将这些数组作为我需要显示的列过滤器。现在他们正在显示所有“未定义”，这似乎 ui-grid 无法找出数组对象中用作标签/值的字段。
请参阅我为每一列应用了一个新的新 html。它使我可以轻松地进行更改。但我确实为像你提到的那样有几列的网格这样做了。