easyUI中combobox的使用心得

拼搏现实的明天。 2022-08-13 00:35 150阅读 0赞

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

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的形式来显示，像下面这样：

![Center][]

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

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

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

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

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

easyUI is not very easy to use~

[Center]: /images/20220810/2597d5b0a26f4aa7ae42f8b23ef66078.png

发表评论取消回复

表情：

评论列表（有 0 条评论，150人围观）

还没有评论，来说两句吧...

相关阅读

相关 =C# +easyui--combobox

C\ +easyui–combobox ![我偏向][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

左手的ㄟ右手/ 2023年01月11日 09:25/ 0 赞/ 151 阅读

相关 EasyUI使用心得——中文化

由于EasyUI是个国外开发的前端框架，所以将其的提示，日期等改成中文就变得尤为重要。只需要在html中引入它的中文js就可以实现 <script type="

偏执的太偏执、/ 2022年10月01日 00:59/ 0 赞/ 124 阅读

相关 jquery easyui combobox

普通的combobox： <input id="brandid_C" class="easyui-combobox" name="brandid" d

爱被打了一巴掌/ 2022年08月23日 11:53/ 0 赞/ 195 阅读

相关 easyUI中combobox的使用心得

纯属分享自己的心得，若对大家有用，那真是极好的~ 1、editable:true + hasDownArrow:false 可以作为一组打造自动提示输入框的好基友，再也找不到

拼搏现实的明天。/ 2022年08月13日 00:35/ 0 赞/ 151 阅读

相关在EasyUI的DataGrid中嵌入Combobox

在做项目时，需要在EasyUI的DataGrid中嵌入Combobox，花了好几天功夫，在大家的帮助下，终于看到了它的庐山真面：

淩亂°似流年/ 2022年08月01日 15:45/ 0 赞/ 154 阅读

相关 easyui combobox

<div id=id+"_type"></div><span style="white-space:pre"> </span> var data=[

雨点打透心脏的1/2处/ 2022年07月21日 08:56/ 0 赞/ 177 阅读

相关 Easyui combobox onChange事件

Easyui combobox onChange事件：注册事件： $(function () { $('cc_id').combob

比眉伴天荒/ 2022年07月18日 05:55/ 0 赞/ 203 阅读

相关 easyui-combobox

在做功能的时候用到easyui的combobox，下拉框经常使用，因此把它的使用方法简单总结如下： html代码部分： <pre name="cod

梦里梦外;/ 2022年07月15日 13:19/ 0 赞/ 160 阅读

相关 easyui-combobox用法

以省份下拉框为例，两种写法，第一种设置默认值有问题，推荐第二种。 1）第一种方法 HTML代码： <th>省份</th> <td> <s

Myth丶恋晨/ 2022年06月05日 12:12/ 0 赞/ 159 阅读

相关 easyui combobox disabled的控制

在easyui中，通过常用的方式去控制disabled是失败的，例如； $('demo').css('disabled',true); 或者 $(

忘是亡心i/ 2022年02月09日 11:23/ 0 赞/ 310 阅读