Question

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

我问，因为我设置了单元格数据下拉值以及从网络API调用中检索到的数组中的过滤器，并且我的单元数据下拉列表已正确填充，但我的过滤器都说“未定义”＆＃39; ，这让我相信它不知道要使用的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];

Answer 1

我在处理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>

Answer 2

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

＆＃13;

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

＆＃13;

.grid {
  height: 200px;
}

＆＃13;

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

＆＃13;

ui网格过滤下拉列表

2 个答案: