easyui中combobox和combotree多选的使用

最新推荐文章于 2020-05-19 10:34:29 发布
最新推荐文章于 2020-05-19 10:34:29 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： web 文章标签： easyui combobox combotree ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huazhangena/article/details/52609370
版权
这篇博客介绍了如何在EasyUI中设置Combobox和Combotree组件进行多选操作。通过AJAX从后台获取JSON数据，结合JSP处理，实现数据绑定。Combobox的值字段和文本字段可根据后台返回的数据结构调整。同时，文章提供了获取选中值的方法，并给出了处理IE浏览器多选时的CSS解决方案。对于Combotree，数据需要包含id和text属性，以及可能的children字段，以支持多级目录选择。
摘要由CSDN通过智能技术生成

首先easyui相关js和css文件需要准备好，这个就不详细说明
其次本文主要针对ajax和jsp的处理。


1.combobox 贴代码

$.ajax({

type : "post",

data : {

infotype:1

},

url : "${pageContext.request.contextPath}/getData.action",

dataType : "json",

success : function(data) {

$('#mySelectul').combobox({data:data,

  valueField:"value",

                  textField:"value"});

//alert("ok");

},

error : function(XMLHttpRequest, textStatus, errorThrown) {

alert("获取查询条件数据失败，请刷新页面！");

最低0.47元/天 解锁文章
huazhangena
关注
专栏目录
easyui combobox多选
qq_27492711的博客
12-01 763
最近接触easyui的一些控件，用下拉框要搜索一些数据，以前下拉列表都是写死的，最近要实现动态的并且可以进行多选，网上找了很久都没有自己需要的，然后用jquery写了一个，感觉代码有些麻烦，但是还是实现了。主要功能是：在combobox基础上可以输入多个条件，中间用分号分割。并且当删除最后的分号时，删除最后一个条件。话不多说看代码： easyui的下拉框 jquery代码： var s
jQuery EasyUI 在datagrid上使用combotree 进行多选
iteye_5696的博客
09-27 524
datagrid本身有编辑功能，根据官方说明，在需要编辑的列上，加上editor 属性即可。具体的类型有以下几种： text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. 最近想利用combotree实现一个可以多选的树，途中遇到一些问题，放到这里分享一下： 1. 基本写法： editor="...
Easy-UI combotree多选
写博客只为学习
06-24 438
页面： 获得多选值的方法是 [code="js"] $('#cc').combotree('getValues'); [/code] [color=red]multiple="false"选项表示可以多选[/color] [code="html"] xxx： [/code] [code="Js"] //加载input标签的下拉框 $('#cc').combotree(...
easyui之combotree下拉框多选框
热门推荐
sinJack的博客
05-19 3万+
1、导入easyui相关jar包 注意：引入easyui的js时，如果同时需要引入jquery.js。在使用的时候，需要先加载jquery.js,否则的话，会导致easyui的js失效。 2、前端代码的实现 注意：在html或jsp页面，写一个select下拉列表，class='easyui-combotree’即可。 3、获取数据并渲染到标签上 注意： 通过$("#ddlLine").combobox(“getValues”);获得选中的所有value值。 通过$("#ddlLine").combobox
easyui combobox 多选
Mdboom的专栏
11-27 744
easyui combobox 多选 添加属性   multiple:true 切分字符   separator : ','//默认 获取时,在控件添加方法:onLoadSuccess:function() 并在方法中设置combobox      $('[控件名]').combobox("setValues","[数据]".split(",")); 例子:
easyui-combobox、combotree后台数据数据组装与前台绑定实例
09-18
总结来说，"easyui-combobox、combotree后台数据数据组装与前台绑定实例" 主要涉及两个部分：后端 C# 数据组装成 JSON 格式，以及前端使用 EasyUI 的 Combobox 和 Combotree 组件进行数据绑定。通过这样的方式，我们...
EasyUI中的Combotree checkbox坑
masuz
11-09 6230
在EasyUI中使用Combotree控件时，多选开关multiple属性即时tree的checkbox属性，它不仅可以接受bool值，也可以配置为函数，控制每个节点是否显示checkbox多选框。
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
10-20
本文介绍在使用jQuery EasyUI框架开发Web界面时，如何为Combo和Combobox组件添加清除值的功能。在很多Web应用中，提供一个清除输入的功能是十分必要的，可以提高用户的交互体验。jQuery EasyUI提供了一套丰富的UI...
EasyUI 中combotree 默认不能选择父节点的实现方法
09-01
在使用EasyUI框架进行前端开发时，`combotree`组件是一个非常实用的控件，它结合了下拉框和树形结构，常用于展示层级关系的数据。在某些场景下，我们可能希望用户只能选择最底层的节点（即叶子节点），而不能选择父...
jquery.combotree 多选下拉树
06-02
bootstrap风格的多选下拉树，基于jquery、ztree，混点下载积分
在easyui-combobox多选模式下加入选择所有选项
04-18
NULL 博文链接：https://wusuobuai.iteye.com/blog/1848724
Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件
10-29
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用
10-23
Extjs4 comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用。来源于网络，稍作修改。
easyui combobox支持多选
qq_40997700的博客
06-24 678
jQuery EasyUI combobox多选及赋值
HilaryHe
09-06 2730
（1）单选赋值setValue $('#Id').combobox('setValue','key') （2）多选赋值setValues $('#Id').combobox('setValues','key1,key2,key3'.split(','))
EasyUI 中多选下拉框 combotree 学习研究
szlixin的专栏
12-12 2782
增加可以获取的两个选择属性: //alert($("#cc").combotree("getValue"));  //获取key var wordstr=   $("#aa").combotree("getValues");  //获取多选的key alert($("#cc").combotree("getText"));      //获取文本 添加 multiple="true"  支
easyui-combobox多选下拉框
dianzijinglin的博客
08-02 1467
设置easyui-combobox多选下拉框属性为：multiple:true, separator:","multiple为是否多选，separator为key值之间的间隔形式
easyui-combobox下拉多选
大奶爸爸的博客
08-29 345
$("#postname").combobox({                          valueField: 'uuid',                          textField: 'text',                          url:'${pageContext.request.contextPath}/system/systemUserLi...
easyui combobox下拉框实现多选
最新发布
04-01
easyui combobox下拉框默认是单选的，如果要实现多选，需要做以下修改： 1. 在combobox的options中添加multiple:true，表示启用多选模式。 2. 在combobox的options中添加onSelect和onUnselect两个事件，用于在选择和取消选择时更新选中的值。 3. 在combobox的panel中添加checkbox或者复选框，用于选择多个选项。 以下是实现多选的示例代码： HTML代码： ``` <input id="cc" class="easyui-combobox" style="width:200px;"> ``` JavaScript代码： ``` $('#cc').combobox({ url: 'get_data.php', valueField: 'id', textField: 'text', multiple: true, panelHeight: 'auto', onSelect: function(record){ var value = $(this).combobox('getValues'); value.push(record.id); $(this).combobox('setValues', value); }, onUnselect: function(record){ var value = $(this).combobox('getValues'); var index = value.indexOf(record.id); if (index >= 0){ value.splice(index, 1); } $(this).combobox('setValues', value); }, onLoadSuccess: function(){ var data = $(this).combobox('getData'); var value = $(this).combobox('getValues'); var panel = $(this).combobox('panel'); panel.find('.combo-panel-checkbox').remove(); $.each(data, function(index, item){ var checkbox = $('<input type="checkbox" class="combo-panel-checkbox">').val(item.id); if (value.indexOf(item.id) >= 0){ checkbox.prop('checked', true); } checkbox.insertBefore(panel.find('.combo-panel-list')); }); }, onShowPanel: function(){ var data = $(this).combobox('getData'); var value = $(this).combobox('getValues'); var panel = $(this).combobox('panel'); panel.find('.combo-panel-checkbox').prop('checked', false); $.each(data, function(index, item){ if (value.indexOf(item.id) >= 0){ panel.find('.combo-panel-checkbox[value="'+item.id+'"]').prop('checked', true); } }); } }); ``` 注：示例代码中的get_data.php是一个返回JSON格式数据的接口，可以根据实际情况修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值