3

当我尝试在 ui-grid 中使用下拉菜单从数据库传递给它的字段时，我在这里遇到了一些问题。在docs之后，在 gridOptions.columnDefs 中，我创建了一个 id 和一个值数组，例如：

{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
  cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
  { id: 1, gender: 'male' },
  { id: 2, gender: 'female' }
] },

但是，在我的情况下，“id”和“value”必须是数据库中的字段，如下所示：

 { id: data.Id, gender: data.Nome }

它只是行不通。关于如何解决这个问题的任何想法？谢谢！！

4

3 回答 3

2

您可以考虑使用Angular Grid - 它允许您拥有自定义单元格渲染器，您可以在其中拥有一个交互式单元格渲染器。我让它在我的工作中工作（不能发布代码示例，因为它属于我工作的公司）但是如果这是一个选项，我可以模拟一些东西并发布它。

于 2015-03-06T21:38:30.823 回答
1

尝试这样的事情

editableCellTemplate: 'ui-grid/dropdownEditor', 
editDropdownOptionsArray: YourDataArray, 
editDropdownIdLabel: 'Id', 
editDropdownValueLabel: 'Nome'

YourDataArray 可能是一个服务调用——例如，对我来说，我调用了 MyServiceName.Get()——返回的对象可能具有像你的问题中的“Id”和“Nome”这样的属性。

于 2014-11-18T00:19:14.747 回答
1

这是我的方法。它基于这个线程：

https://github.com/angular-ui/ng-grid/issues/2808

1）我定义了一个 uiGridFactory.js 作为这个：

angularFactories.factory('uiGridFactory', function ($http, $rootScope) {

var factory = {};

/* It returns a dropdown filter to help you show editDropdownValueLabel
 *
 * Parameters:
 *
 * - input: selected input value, it always comes when you select a dropdown value
 * - map: Dictionary containing the catalog info. For example:
 *    $scope.languageCatalog = [ {'id': 'EN', 'description': 'English'}, {'id': 'ES', 'description': 'Español'} ]
 * - idLabel: ID label. For this example: 'id'.
 * - valueLabel: Value label. For this example: 'description'.
 *
 * 1) Configure cellFilter this way at the ui-grid colDef:
 *
 * { field: 'languageId', name: 'Language'), editableCellTemplate: 'ui-grid/dropdownEditor',
 *   editDropdownIdLabel: 'id', editDropdownValueLabel: 'description', 
 *   editDropdownOptionsArray: $scope.languageCatalog,
 *   cellFilter: 'mapDropdown:row:row.grid.appScope.languageCatalog:"id":"description":languageCatalog' },
 *
 * 2) Append this snippet to the controller:
 * 
 * .filter('mapDropdown', function(uiGridFactory) { 
 *    return uiGridFactory.getMapDrowdownFilter()
 * });
 *
 */
factory.getMapDrowdownFilter = function() {

    return function(input, map, idLabel, valueLabel) {

        if (map != null)
        {
            for (var i = 0; i < map.length; i ++) {
                if (map[i][idLabel] == input)
                {
                    return map[i][valueLabel];
                }
            }
        }
        return "";
    }
}

return factory;

});

2）然后我在需要下拉逻辑的控制器末尾添加了过滤器mapDropdown

.filter('mapDropdown', function(uiGridFactory) { 
    return uiGridFactory.getMapDrowdownFilter()
});

3) 我将此 cellFilter 添加到包含下拉列表的列定义中：

 columnDefs: [
     { field: 'id', 'ID')},
     { field: 'languageId', name: 'Language',
           editableCellTemplate: 'ui-grid/dropdownEditor', 
           editDropdownIdLabel: 'id', editDropdownValueLabel: 'description', 
           editDropdownOptionsArray: $scope.languageCatalog,
           cellFilter: 'mapDropdown:row.grid.appScope.languageCatalog:"id":"description"' },
     { field: 'comments', 'Comments' }
 ]

其中 mapDropdown() 参数是：

a) 目录图（row.grid.appScope.languageCatalog）

b) ID 标签

c) 价值标签

注意：在我的示例中，我使用了从带有工厂的数据库加载的 $scope.languageCatalog 变量。你必须实现你自己的。

factory.getLanguages = function (callback) {

    $http.get(RESOURCES.REST_ADDRESS + 'getLanguages').
        success(function (data, status, headers, config) {

            callback(data);
        }).
        error(function (data, status, headers, config) {

        });
}
于 2015-03-08T23:21:23.403 回答