easyUI中combobox的使用心得

纯属分享自己的心得,若对大家有用,那真是极好的~

1、editable:true + hasDownArrow:false 可以作为一组打造自动提示输入框的好基友,再也找不到下拉框的影子了~

2、onChange事件可以在有级联项时,作为清空级联项值的一个扩展点。但是并不能作为载入级联项值的地方,因为此时主combobox还没选中呢

3、载入级联项值的地方应该是在onSelect事件中,function中传入有参数rec,也就是选中的那条记录

4、onBeforeLoad函数会在两种情况下触发:①combobox初始化的时候 ②remote方式发起请求成功收到服务器传来的值时

其中①这种情况,无论载入方式是local还是remote,是url还是data方式,都会触发onBeforeLoad。通过url载入会触发onBeforeLoad比较好理解,而通过data方式也会触发就有点让人摸不着头脑了。明明是本地数据且不需要与服务器交互了,触发onBeforeLoad是怎么个意思?data此时已经在本地了。

事实上的确如此,当通过url载入数据的话,若onBeforeLoad返回false,那么就无法载入数据了。

若是通过data载入数据的话,无论onBeforeLoad返回什么,combobox都已经有了data的数据了。

不过可以利用这个函数帮我们处理一些额外的功能:local模式下的级联。

若是不触发这个函数,那么我们进入修改页面的时候如何加载级联combobox的数据呢?

5、onBeforeLoad若return true那就会发起请求到服务器请求数据,若成功获得数据,就会触发onLoadSuccess

6、group也是一个提升用户体验的好东西,若是级联项不是很多,我们还可以用group的形式来显示,像下面这样:

只需要简单设置一下就可以了

                 	groupField:'cls',
                 	groupFormatter:function(group){
                 		return translateCode(eqclsJson, group);
                 	},

这里的groupField就是需要group的字段,一般这个字段存的都是id或code等。

所以再groupFormatter中你可以将其翻译成字面值

差不多就这些吧,希望对学习easyUI的朋友有帮助~

easyUI is not very easy to use~

时间: 2024-10-23 14:18:13

easyUI中combobox的使用心得的相关文章

关于easyUI中combobox多选并附加checkbox的实现

在easyUI的基础组件中combobox只有带radiobutton的效果,而且只支持单选. 但是我们可以在此控件的基础上,对combobox进行重写,就能够实现checkbox多选效果. 大致需要重写以下几个方法: format : function(row){     var opts = $(this).combobox("options");     return "<input type='checkbox' class='combobox-checkbox

EasyUI中combobox的使用方法和一个代码实例

Combobox用法和方法参数: 1. 需要引入class=" easyui-combobox" 2. 参数设置需要在data-options中设置 3. 属性参数配置: valueField:基础数据值名称绑定到Combobox(提交值) textField:基础数据的字段名称绑定的Combobox(显示值) mode:定义当文本改变时如何加载列表数据,当设置为remote模式下,什么类型的用户将被发送http请求参数名为'q'的服务器,以获取新的数据. url:从远程URL来加载列

easyui中combobox 验证输入的值必须为选项框中的数据

当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对输入的值进行确认,输入不正确就清空用户的输入框以达到提示的效果 上代码: [javascript] view plain copy print? onHidePanel : function() { var _options = $(this).combobox('options'); var _d

easyui中combobox 取值

<input id="cmbstrTrainType" class="easyui-combobox" name="cmbstrTrainType" style="width:102px;height: 32px;" data-options=" url:'/Page/Ashx/GetCmbInfo.ashx?strFun=GetstrTrainTypeEasyUI', method:'get', valueF

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

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

easyui中的combobox小知识点~~

一直使用的easyui中,一些不为人知的小知识点,与君共勉: 1.combobox设置高度:使用panelHeight属性: 2.combobox本身自带“自动补全”功能,但是在浏览器中是有限制的,在火狐当中,它的自动补全功能却不是立马实现的,而是需要敲回车或者其他什么的,但是在其他浏览器,比如360或者谷歌当中,这种自动补全功能却是“立竿见影”的,而且,它也是提供手动输入值的,只不过,手动输入的值,貌似用类似于:var  cities= jQuery('#cities').combobox('

easyui中如何设置下拉列表框combobox只能选择,列表框内不能输入

像下面这样,用easyui的combobox做的下拉列表,要使它只可以选择列表里面的值,不可以直接输入或删除值 data-options在支持HTML5的浏览器中有效,如果浏览器版本较低,那么最好直接把配置写成属性,例如: <input id="demoCombo" type="text" class="easyui-combobox" editable="false"/> 或者不行的话就用js来控制: $(&qu

.NET MVC easyUI中Combo Combobox绑定数据源的问题

这个问题我因为没有仔细看书,在网上查资料时看了好多.一直没遇到好的解决方法.经过同学提醒才解决了.问题不大,但是是新手比较头疼的吧.下面我把解决方案写一下. 前台: Emr_Doc_Emr_Info/Index1.aspx <td class="td-right1-color"> 科室:</td> <td style="width: 160px"> <input class="easyui-combobox&quo

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

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