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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Source Insight 3.5 简介

    Source Insight 3.5 简介SoureInsight3.5

    2022年7月1日
    21
  • Ubuntu15安装RabbitVCS(SVN)客户端

    Ubuntu15安装RabbitVCS(SVN)客户端Windows下常用的SVN管理工具是TortoiseSVN,而它不支持Linux。如果你想在linux下也使用同样的图形化界面来管理SVN,那么RabbitVCS是一个不错的选择。它支持和TortoiseSVN同样的操作。一、安装官方的wiki上指出了安装方法:http://wiki.rabbitvcs.org/wiki/install/ubuntu第一步

    2022年7月18日
    16
  • 1100000/1011模二除法_四位数除以两位数的除法算式

    1100000/1011模二除法_四位数除以两位数的除法算式原题链接这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如,111111就可以被13整除。 现在,你的程序要读入一个整数x,这个整数一定是奇数并且不以5结尾。然后,经过计算,输出两个数字:第一个数字s,表示x乘以s是一个光棍,第二个数字n是这个光棍的位数。这样的解当然不是唯一的,题目要求你输出最小的解。提示:一个显然的办法是逐渐增加光棍的位数,直到可以整除x为止。但难点在于,s可能是个非常大的数 ——

    2022年8月9日
    5
  • xml转json工具类_json文件导入数据库

    xml转json工具类_json文件导入数据库点击:http://xmlgrid.appspot.com

    2022年8月22日
    3
  • 绘图软件Origin新手使用教程「建议收藏」

    绘图软件Origin新手使用教程「建议收藏」*写在前面:本文为便于博主自己学习进行的摘录整理,由于经过实际软件操作验证,故投稿原创,主要来源为知乎*绘图软件Origin使用教程一、新手绘制新图(1)创建新图1.新建图2.文字输入3.绘制箭头4.新建图表选择(2)绘图实例讲解1.创建工程2.将数据导入book3.创建空的graph,设置画布尺寸4.添加坐标系,设置坐标系的位置与尺寸5.添加图线6.设置坐标轴格式7.设置图的标题8.设置图线的格式9.设置并添加图例10.导出图片二、导入数据(1)支持导入的数据格式1.主要介绍2.导入数据3.数据格式转

    2022年5月31日
    560
  • 漏洞扫描 渗透测试_什么是渗透

    漏洞扫描 渗透测试_什么是渗透渗透测试阶段信息收集完成后,需根据所收集的信息,扫描目标站点可能存在的漏洞,包括SQL注入漏洞、跨站脚本漏洞、文件上传漏洞、文件包含漏洞及命令执行漏洞等,然后通过这些已知的漏洞,寻找目标站点存在攻击的入口。那么今天我们就介绍几款常用的WEB应用漏洞扫描工具。一、AWVSAcunetixWebVulnerabilityScanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞。在漏洞扫描实战过程中,一般会首选AWVS,因为这个能扫描出来的漏洞很多,而

    2022年9月12日
    0

发表回复

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

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