使用HTML Table作为Kendo UI jQuery数据源，行内编辑下拉框异常问题

我明白你遇到的问题了——双击编辑状态列后，单元格显示的是StatusID而不是友好的StatusName，这确实影响用户体验。下面我会一步步帮你修正这个问题：

1. 确保HTML Table包含完整的状态数据（ID+Name） #

首先，你的原始HTML Table里的状态列可能只显示了名称，没有存储对应的ID。我们需要给状态单元格加上data-*属性来保存StatusID，这样Grid的数据源才能同时获取到ID和名称：

<table id="grid">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td data-statusid="1">Active</td> <!-- 新增data-statusid存储对应ID -->
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td data-statusid="2">Inactive</td>
    </tr>
  </tbody>
</table>

2. 配置Grid的状态列：模板显示名称，下拉框绑定ID #

接下来在Grid的列配置中，我们要做两件核心事情：

• 用template指定非编辑状态下显示StatusName
• 用editor配置下拉框编辑器，绑定StatusID作为存储值，显示StatusName作为文本

// 定义所有可选状态的数据源
var statusOptions = [
  { StatusID: 1, StatusName: "Active" },
  { StatusID: 2, StatusName: "Inactive" },
  { StatusID: 3, StatusName: "Pending" }
];

$("#grid").kendoGrid({
  editable: "inline", // 启用行内编辑模式
  columns: [
    { field: "ID", title: "ID", editable: false },
    { field: "Name", title: "Name" },
    { 
      field: "StatusID", // 数据源绑定的是ID字段
      title: "Status",
      // 自定义模板：根据ID匹配并显示状态名称
      template: function(dataItem) {
        var matchedStatus = statusOptions.find(item => item.StatusID === dataItem.StatusID);
        return matchedStatus ? matchedStatus.StatusName : "";
      },
      // 配置下拉框编辑器
      editor: function(container, options) {
        $('<input required name="' + options.field + '"/>')
          .appendTo(container)
          .kendoDropDownList({
            dataSource: statusOptions,
            dataTextField: "StatusName", // 下拉框显示的文本字段
            dataValueField: "StatusID"   // 实际存储到数据源的value字段
          });
      }
    },
    { command: "edit", title: "Actions", width: "150px" }
  ],
  dataSource: {
    schema: {
      model: {
        id: "ID",
        fields: {
          ID: { type: "number" },
          Name: { type: "string" },
          StatusID: { type: "number" }
        }
      },
      // 解析HTML Table数据，把行数据转换成包含StatusID的结构化对象
      parse: function(data) {
        return $.map(data, function(row) {
          return {
            ID: parseInt(row.cells[0].innerText),
            Name: row.cells[1].innerText,
            StatusID: parseInt(row.cells[2].dataset.statusid) // 读取单元格的data-statusid属性
          };
        });
      }
    }
  }
});

3. 关键逻辑说明 #

• 数据源映射：通过schema.parse方法，我们把HTML Table的原始行数据转换成包含StatusID的结构化数据，让Grid能正确关联ID和对应的状态名称。
• 模板显示：状态列的template函数会根据当前行的StatusID，从状态选项中匹配对应的名称并渲染，确保非编辑状态下显示友好的文本。
• 下拉框绑定：编辑器的下拉框把dataValueField设为StatusID（保证数据源存储的是ID值），dataTextField设为StatusName（让用户看到友好选项），编辑完成后模板会自动更新显示对应的状态名称。

这样修改后，双击编辑状态列时，下拉框会展示所有状态名称，选择后单元格会显示对应的名称，而不再是StatusID了。

内容的提问来源于stack exchange，提问作者Rohullah Rajaee Rad