EasyUI DataGrid中Combogrid与Combobox编辑显示优化

datagrid

combogrid

需积分: 50 114 浏览量更新于2024-09-07 收藏 8KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这篇资源主要讨论了在使用EasyUI的datagrid进行行编辑时，combogrid和combobox组件在显示方面遇到的问题以及解决方案。在datagrid中，combogrid和combobox是两种常用的下拉选择控件，它们在数据绑定、查询和用户交互上有所区别。在上一个资源版本中，可能存在的问题是：当结束编辑时，combobox可能不会正确显示文本，而combogrid可能无法根据每行的不同参数加载相应数据。" 在描述中提到的三个问题及解决策略如下： 1. **combogrid每行参数不同查询问题**：当字段类型为combogrid时，每一行的参数可能不同，这通常意味着需要根据当前行的数据动态查询并返回对应的数据结果。为了解决这个问题，可以在编辑器的options中设置url，使其指向一个可以根据当前行id（例如`sourceTableId`）动态查询数据的后台接口，如`tbMdTable/searchColumnById.action`。通过传递适当的参数（比如当前行的tableId），确保返回的数据与当前行相关联。 2. **combobox显示图标按钮和事件处理**：对于combobox，用户可能期望在输入框内看到一个图标按钮，以便触发下拉列表的显示。要实现这个功能，可以设置combobox的editable属性为true，这样就会显示一个触发按钮。同时，可以添加事件监听器，例如`onOpen`或`onClick`，来处理按钮点击后触发的事件，如打开下拉列表、执行查询等。 3. **combobox显示为value而非text问题**：这个问题通常发生在数据绑定时，combobox默认可能只显示value字段，而用户通常希望看到的是textField字段的值（即文本）。为了解决这个问题，需要在combobox的options中明确指定textField属性，例如设为'columnName'，确保在显示时使用正确的文本字段。在提供的代码段中，datagrid的配置包括多个字段，如'srcName'、'stnames'和'sourceColumn'，其中'sourceColumn'字段使用了combogrid作为编辑器，并配置了相关的选项，如url、panelWidth、multiple、editable等。这些配置确保了combogrid的正常工作，能够根据用户的选择加载多列数据，并且在编辑模式下不可编辑。这个资源主要关注了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',