ui-grid将单元格显示为选择标记

I have an example of ui-grid that one of the column represent sex type ('Gender':male , female..). The json data that binding to the grid contain just the code type like (1, 2, 3...) But I want to display the sex name like 'male' if the code is 1 and so on And when the user choose from list new gender i want to display the new sex name And update the sex code in the json data.

我有一个ui-grid的例子,其中一列代表性别类型('性别':男性,女性......)。绑定到网格的json数据只包含代码类型,如(1,2,3 ......)但是如果代码是1,我想显示性别名称如'male'等等当用户选择时列出新的性别我想显示新的性别名称并更新json数据中的性别代码。

In fact, it was so far when I used basic HTML table (I add example in plnkr link)

事实上,到目前为止,当我使用基本的HTML表格时(我在plnkr链接中添加了示例)

any idea ?

任何的想法 ?

// Code goes here and link for plunker :http://plnkr.co/edit/g6xYama3MidekeDqI3p8?p=preview

//代码在这里链接为plunker:http://plnkr.co/edit/g6xYama3MidekeDqI3p8?p = preview

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

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

    $scope.genderTypes = [{
      ID: 1,
      type: 'male'
    }, {
      ID: 2,
      type: 'female'
    }, {
      ID: 3,
      type: 'both'
    }, {
      ID: 4,
      type: 'none'
    }, ];


    $scope.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enableCellEditOnFocus: true,
      columnDefs: [{
        field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      }, {
        field: 'gender',
        editType: 'dropdown',
        enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.genderTypes,
        editDropdownIdLabel: 'ID',
        editDropdownValueLabel: 'type'
      }, {
        field: 'company',
        enableSorting: false
      }],
      onRegisterApi: function(gridApi) {
        grid = gridApi.grid;
      }
    };
    $scope.gridOptions.data = [ { "name": "Ethel Price", "gender": "1", "company": "Enersol" }, { "name": "Claudine Neal", "gender": "2", "company": "Sealoud" }, { "name": "Beryl Rice", "gender": "3", "company": "Velity" }, { "name": "Wilder Gonzales", "gender": "4", "company": "Geekko" }, { "name": "Georgina Schultz", "gender": "1", "company": "Suretech" }]


  }
]);

1 个解决方案

#1

You need to apply a cell filter. I've forked your plunkr with a solution.

您需要应用单元格过滤器。我已经用一个解决方案分叉了你的plunkr。

Filter:

app.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female',
    3: 'both',
    4: 'none'
  };

  return function(input) {
    if (!input){
      return '';
    } else {
      return genderHash[input];
    }
  };
});

Column Def:

{
    field: 'gender',
    editType: 'dropdown',
    cellFilter: 'mapGender',
    enableCellEdit: true,
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownOptionsArray: $scope.genderTypes,
    editDropdownIdLabel: 'ID',
    editDropdownValueLabel: 'type'
}

Plunker: http://plnkr.co/edit/hnaMJjBGaQgMGcgt3Hc2?p=preview

References:

Custom UI-Grid Filters: http://ui-grid.info/docs/#/tutorial/306_custom_filters

自定义UI网格过滤器:http://ui-grid.info/docs/#/tutorial/306_custom_filters

Angular Filter: https://docs.angularjs.org/api/ng/filter/filter

角度过滤器:https://docs.angularjs.org/api/ng/filter/filter

#1