jQuery Easy Ui使用经验分享一

最近做的项目使用了jQuery Easy Ui插件，所以打算做一些简单、粗浅的使用经验介绍，改天有时间再进行详细分析总结。

1.如何使用cmbobox
需求：在后台的商品管理模块中，添加商品时，必须要从数据库中的商品类型表中获取到所有的商品类型，并且让添加商品时，可以选择商品的类型。于是就选择了使用cmbobox了，我在模板中的使用了<input>标签，代码如下:

<td>商品分类：</td>
<td align="left">
<input id="goodsType" class="easyui-combobox" data-options="valueField:'cat_id',textField:'cat_name',url:'__URL__/listInfo'" value="请选择商品类型"/>
</td>

这里是使用input标签，添加属性class="easyui-combobox"来使用easyui，再加上属性data-options来进行参数设置，可以配置的参数很多，如：valueField-相当于option标签中的value属性值,textField-相当于option标签中显示的文字,<option value='reading'>读书</option>.官方的参数配置说法是(介绍几个我自己用过的)：
valueField：基础数据值名称绑定到Combobox(提交值)textField：基础数据的字段名称绑定的Combobox（显示值）url：从远程URL来加载列表数据data：列表中被加载的数据事件
onBeforeLoad(param): 操作之前将数据加载，返回false就取消这个加载作用onLoadSuccess():触发时，远程数据加载成功onLoadError：触发时，远程数据加载错误ONSELECT：触发，当用户选择一个列表项onUnselect：触发，当用户取消选择一个列表方法
options()：返回选择对象getData():返回加载的数据loadData(data):加载列表数据reload(url):重新加载远程数据列表setValues(values):设置combobox的值数组setValue(value):设置combobox的值clear():清空combobox的值select(value):选中指定的值unselect(value):取消指定的值上面插入的代码是就是配置了url参数，可以直接远程获取数据，并且将控制器(模块)中返回的基础数据按照valueField和textField来设置显示出来。实际上，combobox生成的就是，代码如下:

<div class="combo-panel panel-body panel-body-noheader" title="" style="width: 126px; height: 198px;">
<div class="combobox-item" value="9">中秋礼盒</div>
<div class="combobox-item" value="12">凤梨酥</div>
<div class="combobox-item" value="13">双条装礼盒</div>
<div class="combobox-item" value="11">圆形蛋糕</div>
<div class="combobox-item" value="8">新品上市</div>
<div class="combobox-item" value="14">方形蛋糕</div>
<div class="combobox-item" value="10">长条形蛋糕</div>
</div>

接着介绍一下combobox方法的使用,代码:

//获取显示值
var goodsType=$('#goodsType').combobox('getText');
//获取提交值                                 var typeList1=$('#goodsType').combobox('getValues');
//通过combobox的方法来说为了某一个指定标签设置一个值
//例如：我将上面获取到的显示值，在修改商品时，同时添加回到对应的文本框
$("#typesList").combobox('setValue',goodsType);