Question

你好我是AngularJS的新手，我正在尝试在ui网格中填充我的列下拉列表的值。目前它只显示整个列表的未定义。

这是我的专栏定义：

{ field: "FullName", displayName: "Employee", editableCellTemplate: 'ui-grid/dropdownEditor', validators: { required: true }, minWidth: 150, width: "25%", cellFilter: 'mapEmployee', editDropdownIdLabel: 'Value', editDropdownValueLabel: 'Text', editDropdownOptionsArray: dataService.getEmployees() },

这是我的服务功能：

function getEmployees() {
  return $.ajax({
    url: '/EmployeeSkills/GetEmployees',
    type: 'POST',
    dataType: "json",
    success: getEmployeesComplete,
    error: getEmployeesFailed
  });

  function getEmployeesComplete(r) {
    return r;
  }

  function getEmployeesFailed(e) {
    $log.warn("Failed to get employees. " + e.data);
    return $q.reject(e);
  }
}

这是我的Controller方法：

[HttpPost]
public JsonResult GetEmployees()
{
    try
    {
        List<string> tecPosition = new List<string>() { "SUB", "" };
        IEnumerable<SelectListItem> Employees = db.Employees.Where(x => tecPosition.Contains(x.JobPosition) && x.Active).Select(c => new SelectListItem
        {
            Value = c.EmployeeNumber.ToString(),
            Text = c.FullName
        });
        return Json(new SelectList(Employees), JsonRequestBehavior.AllowGet);
    }
    catch (Exception e)
    {
        return null;
    }
}

这是我的网格：

<div class="row">
<div class="grid" ui-grid="gridOptions"
ui-grid-pagination
ui-grid-selection
ui-grid-edit
ui-grid-row-edit
ui-grid-validate
ui-grid-exporter
ui-grid-cellNav
style="height: 500px;">
</div>
</div>

非常感谢任何帮助。它确实使它成为我的Controller方法并且似乎正在工作，但在显示中它只是反复列出未定义。感谢

Answer 1

我必须添加griddropdown:editDropdownOptionsArray:editDropdownIdLabel:editDropdownValueLabel‌:row.entity.employees.fullname的cellFilter。并编写一个过滤器，以便在单元格失去焦点时将值映射到id。

.filter('griddropdown', function () {
    return function (input, map, idField, valueField, initial) {
        if (typeof map !== "undefined") {
            for (var i = 0; i < map.length; i++) {
                if (map[i][idField] == input) {
                    return map[i][valueField];
                }
            }
        } else if (initial) {
            return initial;
        }
    return input;
};

使用javascript服务

1 个答案: