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);