DevExtreme dxGrid编辑弹窗Lookup列显示ID而非DisplayExpr值问题

我之前也碰到过这个一模一样的问题！网格里Lookup显示正常，但编辑弹窗一打开就变成ID值，下拉选项却没问题，折腾了好一阵才找到根源。给你几个最可能的排查方向和解决方案：

1. 编辑表单的Lookup配置必须和网格列完全对齐 #

这是最常见的坑——很多人在网格列里配置了Lookup，但编辑表单的对应字段要么漏了Lookup配置，要么参数不匹配。比如你网格列里指定了valueExpr: "id"和displayExpr: "name"，但表单里的Lookup没设置这两个属性，或者数据源用了不同的集合，导致无法匹配显示值。

举个JS的正确配置例子：

$("#gridContainer").dxDataGrid({
  dataSource: userDataSource,
  columns: [
    // 其他列...
    {
      dataField: "departmentId",
      caption: "所属部门",
      lookup: {
        dataSource: deptDataSource,
        valueExpr: "id",
        displayExpr: "name"
      }
    }
  ],
  editing: {
    mode: "popup",
    allowUpdating: true,
    form: {
      items: [
        // 其他表单项...
        {
          dataField: "departmentId",
          // 这里的Lookup必须和网格列的配置完全一致！
          lookup: {
            dataSource: deptDataSource,
            valueExpr: "id",
            displayExpr: "name"
          }
        }
      ]
    }
  }
});

2. 检查数据类型是否完全匹配 #

如果你的departmentId是数字类型，但部门数据源里的id是字符串（或者反过来），就会出现匹配失败——网格渲染时可能自动做了类型转换，但编辑表单的Lookup严格匹配类型，找不到对应项就会显示原始ID。

比如用户数据里departmentId: 1，但部门数据里id: "1"，这时候要统一类型：要么把用户数据转成字符串，要么把部门数据的id转成数字。

3. 确保Lookup数据源在弹窗打开前已加载完成 #

如果你的部门数据源是远程加载的（比如从API获取），可能弹窗打开时数据源还没加载完毕，Lookup找不到匹配项就会显示ID。可以在编辑开始事件里提前加载数据源：

editing: {
  // ...其他配置
  onEditingStart: function(e) {
    const deptDS = e.component.columnOption("departmentId", "lookup.dataSource");
    if (!deptDS.isLoaded()) {
      deptDS.load().done(() => {
        // 加载完成后刷新表单显示
        e.component.refresh();
      });
    }
  }
}

4. 自定义表单模板的坑 #

如果你给表单项用了自定义模板，一定要确保模板里正确渲染了dxLookup组件，而不是直接绑定departmentId的值。比如错误的模板：

<!-- 错误：直接显示ID -->
<div data-options="dxTemplate: { name: 'deptTemplate' }">
  <span>{{data.departmentId}}</span>
</div>

正确的模板应该是：

<!-- 正确：渲染dxLookup -->
<div data-options="dxTemplate: { name: 'deptTemplate' }">
  <dx-lookup
    [dataSource]="deptDataSource"
    [value]="data.departmentId"
    valueExpr="id"
    displayExpr="name"
  ></dx-lookup>
</div>

5. 验证编辑数据的有效性 #

最后确认一下，你要编辑的用户对象里的departmentId确实存在于部门数据源中。如果是个无效值（比如null或者不存在的ID），Lookup自然显示原始值。

按照这几步排查，应该能解决问题！

内容的提问来源于stack exchange，提问作者AlaaL