ui 网格过滤下拉菜单

Question

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

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

当我定义我的网格时，我省略了单元格和过滤器的数组，因为我将在网络 api 使用该数据调用 returns 时填充它。

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

我如何从网络 api 数据填充单元格下拉列表和过滤器下拉列表。

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

Answer 1

我在处理 ui 网格上的下拉菜单时使用的一个巧妙功能是，我将它们视为它们始终是动态的，因此我不再需要处理 OptionsArray、过滤器、标签等（是动态数据的痛苦）。

当您计划在 angular 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>

Answer 2

在没有看到更多代码的情况下，很难确切地说出发生了什么，但在下面的示例中，我动态添加了 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>

ui 网格过滤下拉菜单

ui grid filtering dropdown

javascript

angularjs

ui-grid