easyUI的combobox实现级联

easyUI的combobox实现级联easyUI的combobox实现级联

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

先简单介绍下combobox:

easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox

1、使用select标签,并加上class=”easyui-combobox”,这种方式比较适用于静态的选项

2、使用input标签,并加上class=”easyui-combobox”,后面跟上data-options,可以用local或是remote方式加载数据

3、使用js方式,和2基本相同,只是把combobox一些属性的设置分离到了js中

下面是级联的思路:

combobox实现级联基本上和select类似,比如省份和城市的级联

当省份选完这个事件发生之后,城市的选择框里就会刷新数据,得到当前省份下的所有城市

那么关键点就是——》接收事件——》刷新第二级的选择框

combobox有提供onSelect这个事件点,且传入一个选中的记录rec,比如说我们可以取rec的主键rec.id(比如是浙江,id是29),那么我们可以拿到这个29去后台查询浙江省下的城市Json数据,这串Json就是需要放到城市combobox中的数据

那么开始动手吧:

<tr>
    <td>省份:</td>
    <td><input class="easyui-combobox" name=”province” data-options="
     	method:'get',
     	mode:'remote',
     	url:'test/getProvinceList',
     	onSelect:function(rec){
     		$('[comboname=city]').combobox('clear');
     		$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + rec.id);
     	},
     	onLoadSuccess:function(){
     		var value = $(this).combobox('getValue');
     		if(value != ''){
    		<span style="white-space:pre">	</span>$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + $(this).combobox('getValue'));
    			}
     	}
    	">
    </td>
    
    <td>城市:</td>
    <td><input class="easyui-combobox" panelHeight="auto" name="city" data-options="
     		prompt:'请先填入省份名称'
    	">
    </td>
</tr>

Jetbrains全家桶1年46,售后保障稳定


使用中可能碰到的问题:

1、为combobox指定name后,经过easyUI自己解析后,生成的combobox(也就是select)没有name这个属性,取而代之的是comboname,因为name要作为input的name。所以要根据name得到combobox要使用comboname

2、$(‘[comboname=city]’).combobox(‘clear’); 这一步也是必要的,不然combobox中之前选中的值将无法清除,比如之前选的是浙江–杭州(id为1),若此时更改省份变为江苏,那么若不加clear,此时城市则变成当前省份id为1的城市,也就是南京(id为1)。要是此id在对应省份无记录,那么就只会显示一个id,那么显然不是我们想看到的。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/201103.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 堆积柱形图_excel堆叠图分层怎么做

    堆积柱形图_excel堆叠图分层怎么做今天我们用reportservice开发堆积图,先上个图,见上方。1.新建rdlc文件,工具箱图片,新建一个图标类型(三维堆积圆柱图),然后把三维效果去掉就0了。2.绑定数据源(事先最好新建一个x

    2022年8月2日
  • loadrunner12使用手册_loadrunner脚本编写教程

    loadrunner12使用手册_loadrunner脚本编写教程首先我们安装好loadrunner12之后,出现这三个图标,然后开始操作。操作:1.打开VirtualUserGenerator,新建脚本2.选择脚本协议,对脚本名称位置可以进行编辑。此处以web-http/html为例。3.点击创建后,选择录制脚本,填写好录制的地址,应用程序,然后选择开始录制,此处以测试登录为例4.结束录制后,点击关联回放,确保脚本无误5.对代码进行进一步完善,插入事务或集合点6.对脚本进行执行回放,确保脚本无误,对脚本进行参数化可以直

    2022年10月14日
  • 应届毕业生java面试准备_Java应届生面试

    应届毕业生java面试准备_Java应届生面试应届没工作经验的可以看看。背景介绍:非名校,软件工程专业,无相关工作经验,实际编程只有在学校学习时。刚刚毕业,找工作中。大家都知道,开发这一行没有工作经验相当的吃亏,如果没有丰富的知识,对知识良好的理解,与优秀的自学能力,很难找到工作。经过近一个月的面试,总结一些信息。面试过程…

    2022年9月23日
  • idea创建maven项目时一直在 Process Running[通俗易懂]

    idea创建maven项目时一直在 Process Running[通俗易懂]今天打算用idea写个maven项目时,创建到最后就一直在加载。等了大概20分钟,还在Process Running,我就等不下去了,各种查资料,最终解决了这个问题,写篇笔记,以防后期所需。解决方案:1、设置maven的配置 File—&gt;Settings(Ctrl+Alt+S)—&gt;Build—&gt;Build Tools—&gt;Maven—&…

    2022年6月13日
  • poj3617Best Cow Line

    poj3617Best Cow Line

    2021年12月7日
  • 使用 tar 压缩和解压缩的常用参数

    使用 tar 压缩和解压缩的常用参数tar常用参数:-A新增文件到已压缩文件中-c新建新压缩文件-r将新文件添加到已压缩文件的末尾-x解压缩文件-k保留原压缩文件-f待压缩或待解压缩文件-jbzip2格式-zgzip格式-v显示过程 常用解压缩:tar-xzvffile.gztar-xjvffile.bz2常用压缩:tar-czvfarchi…

    2022年5月25日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号