Question

我正在使用Angular http://ui-grid.info/。当我在网格中有一个下拉列表时遇到问题。

以下代码我用于DropDown： -

objCombos = $scope.getComboValues('DEPARTMENT');

$scope.gridOptions.columnDefs.push({
field: fieldName.toUpperCase(), displayName: displayName,
columnType: 'columnDb',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'DEPARTMENT',
editDropdownOptionsArray: objCombos,
name: fieldName.toUpperCase()
});

DropDown数组就像这个objCombos： -

[
    { id: 1, department: 'Branch1' },
    { id: 2, department: 'Branch2' }
];

当我选择＆amp;更改下拉值从Branch1更改为Branch2，更改值后，它会在下拉列表中显示所选值的id 2。

enter image description here

Answer 1

将editDropdownIdLabel设置为与editDropdownValueLabel匹配，对于不真正需要id的情况是可以的。也就是说，您的基础数据结构存储字符串（“Branch1”，“Branch2”）而不是整数（1,2）。

如果不，则使用自定义过滤器。我最近有一种情况，即一周中的几天作为整数（1-7）存储在后端，但是用户希望在网格中看到全名字符串。以下是我的解决方案 - 针对此示例进行了修改：

angular.module('myApp').filter("branchFilter", function() {
    var vals = ["Branch1", "Branch2"];
    return function(id) {
        var i = id-1, ret = "?";
        if(i>=0 && i< vals.length) {
            ret = vals[i];
        }
        return ret;
    };
});

然后在columnDefs中添加cellFilter: 'branchFilter'。

说完后，ui-grid假设您需要在下拉菜单中区分id和value，但随后会显示ID，这很烦人，除非编辑。很难想到这种行为对用户有用的情况。

我注意到您将组合值存储在单独的数组中。这是一种重用这种结构的方法。首先，将组合值放在可以在应用程序中访问它们的位置：

angular.module('myApp').value('ComboValues', {
    branches: [
        {id:1, value:"Branch1"},
        {id:2, value:"Branch2"},
        ...
    ]
});

然后告诉自定义过滤器如何使用值：

angular.module('myApp').filter("comboFilter", function(ComboValues) {
    return function(id, comboName, idName, valName) {
        idName = idName || "id";      //optional - defaults to 'id'
        valName = valName || "value"; //optional - defaults to 'value'
        var opts = ComboValues[comboName];
        if(angular.isArray(opts)) {
            var ret = id; //default return value if no match found
            opts.some(function(opt) {  //look for matching option
                if(opt[idName]===id) {
                    ret = opt[valName];
                    return true; //break
                }//else keep looking
            });
            return ret;
        } else {
            return comboName+ " not an array";
        }
    };
});

然后在columnDefs中，使用： cellFilter: "comboFilter:'branch':'id':'value'" 或者如果默认值没问题： cellFilter: "comboFilter:'branch'"

请注意，在此示例中，参数需要额外的引号，因此过滤器将它们视为字符串而不是范围变量。即："comboFilter:'branch'"而非"comboFilter:branch"。

Answer 2

我通过添加以下属性解决了这个问题： -

editDropdownIdLabel: 'DEPARTMENT',

Angular ui-grid - DropDown Selection显示Id

2 个答案: