easyui datagrid combobox多选第一个时最前面会多加“,”逗号

最新推荐文章于 2025-01-08 09:05:14 发布
原创 最新推荐文章于 2025-01-08 09:05:14 发布 · 6.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#easyui #combobx

本文介绍了一个关于使用easyUI 1.3.4版本时，在datagrid组件中使用combobox字段时出现自动添加逗号的问题，并提供了解决方案——将对话框嵌入到iframe中。
部署运行你感兴趣的模型镜像

项目中遇到的小问题，却不知道从何下手去改。

easyui,datagrid,edatagrid,某一列设置为combobox，数据从后台查询出来，当选择第一个数据的时候，前面总会自动添加上一个“,”逗号，找了半天都没有发现问题。后来请教了公司其他同事，这个dialog不能再父页面中直接打开，需要嵌入到iframe中才能避免逗号的出现。他说这是easyui1.3.4的一个bug,修改后问题果然解决了。

找时间把代码整理下贴出来。

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

在easyui-combobox多选模式下加入选择所有选项
04-18
在IT行业中，EasyUI是一个基于jQuery的前端框架，它提供了丰富的UI组件，使得开发者能够快速构建用户界面。本文将深入探讨如何在EasyUI的Combobox组件中实现多选模式，并添加“选择所有”选项的功能。 Combobox是...
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
当用户在第一级combobox中选择一个值时，触发该事件，此时可以获取到所选值并根据这个值动态更新第二级combobox的`url`，然后调用`reload`方法重新加载数据。这样，第二级combobox的选项就会基于第一级的选择进行...
comboBox的多选框之疑难杂症——逗号篇
weixin_34113237的博客
09-02 721
          提笔写正文之前，首先要再次提醒一下自己，因为总是记不住，以至大神同事们都开始用“嫌弃”的眼光看自己了——遇到问题，自己去解决，没有什么问题是解决不掉的，不要在没认真努力思考之前就去麻烦大神同事，切记切记！同样的问题，希望真的可以记住，记住！         记得使用easyui中的combobox吗？效果是酱紫滴：   平常使用的时候，也就是很普通的下拉选框，即单选...
easyui datagrid combobox多选编辑时第一个时最前面会多加“,”逗号
李木子的博客
05-13 960
<tr> <td>抄送人：</td> <td style="text-align: left;"> <input id="ccIds" name="ccIds" value="" type="hidden"/> <select id="billCcIds" name="billCcIds" class="easyui-combobox" style="width: 100%; height: .
easyui comboBox的多选框之疑难杂症——逗号篇
yb305
06-10 794
<input id="steels" name="stids" class="easyui-combobox" data-options="prompt:'请选择钢厂',valueField:'id',textField:'name',multiple:true,url:'/vip/users/steellist', panelHeight:'200px'" style="width: 150px">
关于easyui select多选下拉框重置后多余显示了逗号
不积跬步，无以至千里
01-08 502
select选项卡回显，再次选择时，最前面多余了逗号。
关于easyui select多选下拉框重置后多出来了一个‘，’
weixin_42830933的博客
05-12 614
关于easyui select多选下拉框重置后多出来了一个‘，’ 记录一下使用easyui做项目遇到的一些问题。 之前做的页面都是单选的，后来客户提出要多选，所以就做了；做了后测试时发现，先选择后点击重置，下次选择的时候会多出一个‘，’ // 清除select的数据 $(".searchContent .clertselect").combobox('setValue', ''); 改成下面这个就可以了 // 清除select的数据 $(".searchContent .clertselect").com
easyui的combobox默认选中第一个选项
reg183的专栏
07-25 3076
vardata=pmProjectSelect.combobox(‘getData’);//获取所有下拉框数据。//如果有数据的话默认选中第一条数据。//combobox默认选中第一个。
EasyUI 系列之 combobox 默认选中第一个 添加请选择选项
热门推荐
Deep C
09-05 3万+
1.先看哈效果图
在easyui-combobox多选模式下添加选全部项
最新发布
10-19
Combobox是EasyUI中的一个下拉框组件，它结合了输入框和下拉列表的优点，常用于数据筛选或选择操作。在单选模式下，用户只能选择一个选项。然而，在某些场景下，用户可能需要同时选择多个选项，这时就需要开启...
easyui的下拉框多选
06-15
在本文中，我们将深入探讨EasyUI的下拉框多选功能，这是一个常用的功能，尤其在构建Web应用程序时，用户可能需要从多个选项中选择不止一个。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架，它提供了丰富的...
EasyUI实现下拉框多选功能
08-28
1. 简洁易用：EasyUI框架提供了一个简洁易用的API，方便开发者快速实现下拉框多选功能。 2. 高度灵活：EasyUI框架提供了高度灵活的配置选项，方便开发者根据需要进行自定义。 3. 广泛应用：EasyUI框架广泛应用于Web...
EasyUI:easyui-combobox(清除选中项)
awangwu的博客
08-29 4417
开发十年，就只剩下这套Java开发体系了 &gt;&gt;&gt;    ...
easyui的combobox的一点小问题
weixin_33747129的博客
10-26 207
2019独角兽企业重金招聘Python工程师标准>>> ...
easyui combox 输入多选时，去掉输入值
shenchengxinsunwei的博客
11-23 2004
说明：easyui在使用combox，支持多选属性：multiple：true,并支持在输入框中搜索，但是输入的搜索值不会自动去掉 较笨的解决方式,利用onHidePanel函数，处理如下：  $("#Box").combobox({onHidePanel: function() {                 var valueField = $(this).combobox("opt...
Easyui常用语法 Combobox
细节决定成败 点滴铸就辉煌
08-24 873
Easyui常用语法 Combobox
easyui前端实现多选框_easyui combobox 实现复选框多选
weixin_39702559的博客
02-06 469
$('#comboxid').combobox({ url:'comboboxData.json', method:'post', valueField:'id', textField:'name', panelHeight:'a...
easyui combobox 实现复选框多选
清叶 的专栏
08-22 1万+
$('#comboxid').combobox({                 url:'comboboxData.json',                 method:'post',                 valueField:'id',                 textField:'name',                 panelHeight:'a
mui自定义图标
一只喜欢学习的猪仔
12-13 1万+
mui使用的图标并不是图片，并不是在img标签中显示的，而是在span标签中：<span class="mui-icon iconfont icon-chuguofuwu">从阿里图库中选择需要用到的图标，添加入库 点击购物车，你选择的图标都在，添加至项目。 然后会来到这个页面： 下载到本地，我们会看到下载的文件夹目录： iconfont.css和iconfont.ttf是我们项目中需要
easyui-combobox多选下拉框
09-05
<think> 我们参考提供的引用信息来解答关于EasyUI combobox多选下拉框的实现方法和配置。 根据引用[1]和[2]，实现多选的关键配置是设置`multiple:true`，并且可以指定分隔符`separator`（默认是逗号）。 同时，在初始化时，如果需要设置默认选中的值，可以在`onLoadSuccess`事件中使用`setValues`方法，将字符串按分隔符分割成数组设置。 引用[3]提到在选中和取消选中时通过`getValues`获取值并赋值给隐藏域（或其他地方），这说明了如何实时获取多选的值。 引用[4]展示了后端获取数据的方法，但这不是前端配置的重点。 因此，我们可以总结如下： 1. 配置多选：`multiple: true` 2. 可选配置分隔符（例如分隔符为逗号）：`separator: ','` 3. 设置默认值：在`onLoadSuccess`事件中，使用`combobox('setValues', array)`，其中array是值的数组。 4. 获取多选的值：使用`combobox('getValues')`，返回的是数组，也可以用分隔符连接成字符串。 下面是一个完整的配置示例，参考引用[1]和[2]： ```javascript $('#comboId').combobox({ url: '...', // 数据源URL editable: false, // 是否可编辑 multiple: true, // 开启多选 separator: ',', // 分隔符，默认也是逗号，所以可以不写 valueField: 'id', // 值字段 textField: 'text', // 显示文本字段 onLoadSuccess: function() { // 设置默认值，假设默认值是一个用逗号分隔的字符串 var defaultValue = "value1,value2,value3"; $(this).combobox('setValues', defaultValue.split(',')); } }); // 获取选中的值（数组形式） var selectedValues = $('#comboId').combobox('getValues'); // 如果需要字符串形式，可以用分隔符连接 var selectedString = selectedValues.join(','); ``` 另外，引用[2]中还展示了在面板显示时调整面板高度的例子（根据选项数量动态调整高度），这也是一个常用的优化。 注意：在设置默认值时，`setValues`方法需要传入一个数组，所以我们把字符串用`split`方法分割成数组。 如果需要实时将选中的值更新到某个地方（如隐藏域），可以监听`onSelect`和`onUnselect`事件，例如： ```javascript onSelect: function(record) { var values = $(this).combobox('getValues'); $('#hiddenField').val(values.join(',')); }, onUnselect: function(record) { var values = $(this).combobox('getValues'); $('#hiddenField').val(values.join(',')); } ``` 这样，每次选择或取消选择时，隐藏域的值都会被更新为当前选中的值（以逗号分隔的字符串）。 以上便是EasyUI combobox实现多选下拉框的主要方法和配置。 </think> ### EasyUI Combobox 多选下拉框的实现方法与配置 要实现 EasyUI combobox 的多选功能，需通过以下关键配置和事件处理（参考引用[1][2][3]）： #### 1. **核心配置属性** ```javascript $('#yourCombo').combobox({ multiple: true, // 启用多选模式 [^1] separator: ',', // 值分隔符（默认逗号）[^1] valueField: 'id', // 值字段（如数据库ID） textField: 'name', // 显示文本字段 editable: false, // 禁止手动输入（推荐）[^2] url: 'data_source.json' // 数据源URL }); ``` #### 2. **设置默认值** 在 `onLoadSuccess` 事件中初始化选中值（引用[1][2]）： ```javascript onLoadSuccess: function() { // 将字符串（如"v1,v2"）转为数组设置 $('#yourCombo').combobox("setValues", "val1,val2".split(',')); } ``` #### 3. **获取选中值** ```javascript // 返回数组：["val1", "val2"] const values = $('#yourCombo').combobox('getValues'); // 返回逗号分隔的字符串（配置的分隔符） const str = values.join(','); ``` #### 4. **动态监听选择** 实时响应选择/取消操作（引用[3]）： ```javascript onSelect: function(record) { const currentValues = $(this).combobox('getValues'); console.log("当前选中值:", currentValues); }, onUnselect: function(record) { const currentValues = $(this).combobox('getValues'); console.log("取消后剩余值:", currentValues); } ``` #### 5. **高度动态调整** 根据选项数量自动调整下拉高度（引用[2]）： ```javascript onShowPanel: function() { const count = $(this).combobox('panel')[0].childElementCount; $(this).combobox('panel').height(count > 10 ? 200 : "auto"); } ``` #### 6. **后端数据示例（Java）** 返回数据需匹配 `valueField/textField`（引用[4]）： ```java public List<Map> getComboboxData(String code) { String sql = "SELECT id AS valueField, name AS textField FROM table"; // 执行查询并返回 List<Map> } ``` > **注意事项** > - 多选时数据源字段需唯一，避免重复值冲突 > - 大量数据建议启用分页（需配合 `pagination:true`） > - 默认值字符串格式需与 `separator` 配置一致 --- ### 相关问题 1. EasyUI combobox 多选时如何实现全选/全不选功能？ 2. 当 combobox 多选数据量过大时，应该如何优化性能？ 3. 如何将 combobox 多选的值提交到表单并后台接收？ 4. 在多选模式下，如何自定义下拉选项的显示样式？ [^1]: easyui combobox 多选 [^2]: EasyUI实现combobox下拉框多选以及取值 [^3]: 关于easyui combobox下拉框实现多选框的实现 [^4]: easyui combobox下拉框实现多选框以及全选、全不选的实现
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值