easyUI的combobox实现级联

先简介下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>

使用中可能碰到的问题:

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,那么显然不是我们想看到的。

时间: 2024-10-25 05:55:05

easyUI的combobox实现级联的相关文章

使用EasyUI的combobox控件实现级联搜索条件

昨天接到一个需求,是做一个简单的查询页面,相对于目前公司系统有一个新的东西,需要实现多级机构的级联查询.公司系统的前端框架采用的是jquery-easyui-1.4.3, 在以前接触到的系统中,前端做的不是太多,有采用velocity+html的,实现这种级联倒是做过,只是没怎么记录.现在使用easyui,需要学习一下. 看了些关于easyui的东东,打算采用combobox的input来实现这个级联查询功能. 首先,combobox 实现 动态加载 选项的方法有: reload(url)  .

利用easyUI的combobox打造自动提示组件

自动提示是时下一个很流行的功能,比如说百度.谷歌的搜索输入框都使用到了这么一个功能. 由于easyUI的combobox设计师已经考虑到了这个功能,所以只需简单几步我们可以轻松打造自己的自动提示组件. 自动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将所有的数据都加载到客户端页面,之后仅仅是在这些已加载的数据中去过滤,不会向服务器发出额外的请求 而remote呢,也就是说事先并不加载所有数据,而是等到用户输入关键字之后,再向服务器发出请求,返

利用easyUI的combobox打造自己主动提示组件

自己主动提示是时下一个非常流行的功能,比方说百度.谷歌的搜索输入框都使用到了这么一个功能. 因为easyUI的combobox设计师已经考虑到了这个功能.所以仅仅需简单几步我们能够轻松打造自己的自己主动提示组件. 自己主动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将全部的数据都载入到client页面,之后不过在这些已载入的数据中去过滤,不会向server发出额外的请求 而remote呢,也就是说事先并不载入全部数据.而是等到用户输入keyw

easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库"字段,并且在下拉的时候,"全部数据库"一直排在最顶部. 初始化效果如下: 下拉之后的效果如下: 实现方式: easyui的combobox有一个loader属性,easyui的API对loader属性说明如下: easyui的combobox有一个onLoadSuccess事件,eas

vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)

?? vs2013+MVC3.0+EasyUI的ComboBox联动使用(二) 简单介绍:在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用. 载入ComboBox数据,而且实现联动效果, 本文将採用EasyUI中的Date控件与ComboBox实现联动效果,如图: ----------------------------------------------------------------------------------------------

jquery 的combobox 处理级联

随笔---jquery 的combobox 处理级联 ------------------------html------------- <select id="groupId" name="groupId" style="width: 123px;"> </select> --------------------------js------------------------ $(document).ready(func

EasyUI combogrid/combobox过滤时限制只能选择现有项

EasyUI combogrid/combobox过滤时限制只能选择现有项,有需要的朋友可以参考下. 在使用EasyUI的combogrid时可以通过输入进行过滤,达到快速选择的目的,但是手工输入不存在的项也不会出错,结果提交到数据库后就会产生错误. 比如idField是int型的,输入的数据通过是检索textField,并非int型,无法提交到后台. 如果直接禁止输入,在选项多的时候就很难快速选择了. 现在的解决方案是通过多个事件来判断是否输入了不存在的项目: $("#artName"

easyui enableFilter combobox级联 combotree

//网格过滤         function datagridFilter(dg){             dg.datagrid('enableFilter');             dg.datagrid('enableFilter',[{                 field:'townName',                  type:'combobox',                  options:{                    url:'area

easyui combobox 三级级联 input 两种实现

/**<img src='${pageContext.request.contextPath}/images/block.png'/> * @param 默认载入 省市 */ $(function(){ $("input[id^='area_']").css({"height":"39px","width":"250px"}); var city = "",district