使用 javascript 服务从数据库填充下拉值

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);
  }
}

这是我的控制器方法：

[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;
    }
}

这是我的 ui 网格：

<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 方法并且似乎可以正常工作，但在显示中它只是一遍又一遍地列出 undefined 。谢谢

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 服务从数据库填充下拉值

Populate dropdown values from database using javascript service

javascript

c#

asp.net-mvc

angular-ui-grid