EasyUI DataGrid与Editor的Combogrid、ComboBox实例与问题解决方案

TXT文件

combogrid

combobox

datagrid

4星 · 超过85%的资源 | 下载需积分: 49 | 7KB | 更新于2024-09-09 | 161 浏览量 | 举报 1 收藏

立即下载

在使用EasyUI datagrid进行数据表格操作时，尤其是涉及到行编辑功能时，有两个主要的组件需要特别注意：combogrid和combobox。这两个组件在不同的应用场景下提供了不同的交互体验。 1. **Combogrid**: 当我们在datagrid中的某列设置`editor`属性为`type: 'combogrid'`时，每一行的编辑行为会与特定的查询结果相关联。例如，在示例代码中，当用户点击单元格时，会触发一个名为`tbMdTable/searchColumnById.action`的后台服务，这个服务根据`sourceTableId`字段来查找匹配的数据，返回包含`columnName`、`tableId`和`columnId`等字段的结果。combogrid组件允许多选，并且设置了`multiple: true`，这意味着用户可以选择多个列名。此外，由于设置了`editable: false`，实际上用户可能只是查看选择的选项，而不是可以直接修改值，这有助于保持数据的一致性。 2. **Combobox**: Combobox是另一种编辑控件，其特点是在输入框旁边显示一个图标按钮。在EasyUI datagrid中，如果将`editor`类型设置为`'combobox'`，用户可以直接在输入框中输入值，同时，点击图标按钮可能会触发特定的事件，如查询数据、获取下拉列表选项等。在处理combobox时，用户输入的是文本（`textField: 'columnName'`），但可能希望显示的实际上是值（如数据库中的id），而不仅仅是显示名称。解决这一问题通常涉及两个步骤：首先，确保后台服务能够提供正确的`valueField`和`textField`映射；其次，可能需要在客户端进行一些逻辑处理，比如在数据显示时转换`value`为`text`。 3. **显示问题**: 如果在使用combobox时遇到显示值而非文本的问题，可能是配置上的疏忽。在`options`对象中，需要明确指定`valueField`（用于存储实际数据库ID）和`textField`（用于用户看到的文本）。通过设置`valueField: 'columnId'`和`textField: 'columnName'`，可以确保用户在输入框中看到的是列名，而实际的选择值则是对应的列ID。 EasyUI datagrid中的combogrid和combobox分别用于展示和选择关联数据，它们提供了不同的编辑模式。理解并正确配置这些组件，以及处理好后台服务接口与前端显示之间的数据映射，是实现有效行编辑的关键。

function showdataGrid() {

$('#data-list').datagrid({
title : '字段测试信息',
// url : "",
idField : 'sourceTableId',
pagination : false, // 分页
rownumbers : true, // 行号
singleSelect : false,// 单选
checkOnSelect : true,
autoRowHeight : false,// 是否设置基于该行内容的行高度
remoteSort : false,
striped : true,// 奇偶行显示不同背景色
fitColumns : true,// 自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
columns : [ [ {
field : 'sourceTableId',
checkbox : true
},{
field : 'sourceConnection',
hidden : true
},{
field : 'sourceTable',
hidden : true
},{
field : 'srcName',
title : '源链接',
width : 120,
sortable : true
},{
field : 'stnames',