jQuery EasyUI datagrid中combobox编辑器的数据源设置与文本值问题解决

在jQuery EasyUI的Datagrid中，使用Combobox作为编辑器进行数据输入是一项常见的需求。本文主要探讨如何在Datagrid的单元格内实现Combobox编辑功能，并解决特定情况下文本值显示的问题。 首先，我们来理解在Datagrid中集成Combobox的基本步骤。Datagrid允许我们在每一行中添加可编辑的单元格，其中Combobox提供了一个下拉列表供用户选择。在创建Combobox编辑器时，我们需要指定一个数据源（如var Address），它通常是一个包含value和text属性的对象数组，如`var Address = [{ "value": "1", "text": "CHINA" }, ...]`。 问题的核心在于，当我们用户从Combobox中选择一个值并点击保存时，实际显示在单元格中的将是"value"字段的值，而非"text"字段的文本。为了解决这个问题，我们利用了Datagrid的`formatter`选项。`formatter`函数在这里扮演了转换器的角色，它会在数据绑定到视图之前应用一个格式化规则。在这个例子中，`unitformatter`函数被设置为： ```javascript function unitformatter(value, rowData, rowIndex) { if (value === 0) { return; } for (var i = 0; i < Address.length; i++) { if (Address[i].value == value) { return Address[i].text; } } } ``` 这个函数遍历Address数组，查找与选中的"value"匹配的项，然后返回对应的"text"值。这样，当用户编辑完Combobox并保存时，显示在单元格中的将是用户选择的实际文本，而非"value"字段的数值。 在实际的代码片段中，Datagrid配置如下： ```javascript function GetTable() { var editRow = undefined; $("#Student_Table").datagrid({ height: 300, width: 450, title: '学生表', collapsible: true, singleSelect: true, url: '/Home/StuList', idField: 'ID', columns: [ [ { field: 'ID', title: 'ID', width: 100 }, { field: 'Name', title: '姓名', width: 100, editor: { type: 'text', options: { required: true } } }, { field: 'Age', title: '年龄', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } }, { field: 'Address', title: '地址', width: 100, formatter: unitformatter, align: 'center', editor: { type: 'combobox', options: { data: Address, valueField: "value", textField: "text" } } ] ], // 其他Datagrid配置... }); } ``` 通过这种方式，我们确保了在jQuery EasyUI Datagrid中使用Combobox编辑器时，用户的选择将正确地以文本形式显示，提高了数据的可读性和用户体验。同时，`unitformatter`函数也为其他类似场景提供了灵活的解决方案。