最近在公司制作內部使用數據管理網頁，用到了easyui，使用過程中發現與jquery的寫法有比較多不一樣的地方，趁現在有空，先做個筆記。
(這里主要說明的是combobox的用法，其他的像textbox和datebox，用法都相似的)
easyui里的combobox就是把html的select標簽變成winform里的combobox，優勢在於不僅可以下拉選擇，還可以輸入，並且自動匹配，常用的代碼有：
1、數據綁定：
1 <input id="product" class="easyui-combobox" data-options=" 2 valueField: 'pro_id', 3 textField: 'pro_name', 4 url: 'lot_getPro.ashx', 5 panelHeight:500, 6 onSelect: function(rec){ 7 $('#customer').combobox('loadData', {}); 8 var url = 'lot_getCus.ashx?proId='+rec.pro_id; 9 $('#customer').combobox('reload', url); 10 $.parser.parse('#customer'); 11 $('#customer').combobox('setText','').combobox('setValue',''); 12 if($('#mingro')!=undefined){ 13 $('#mingro').combobox('loadData', {}); 14 $.parser.parse('#mingro'); 15 $('#mingro').combobox('setText','').combobox('setValue',''); 16 } 17 }" style="width:280px;"/>
18
19 <input id="customer" class="easyui-combobox" data-options="valueField:'cus_id',textField:'cus_name',panelHeight:500" style="width:260px;" />
20
21 <select id="mingro" class="easyui-combobox" style="width: 200px;"></select>
事例中的代碼有3個下拉combobox，id分別是"product"，"customer"，"mingro"，我要做的是通過選擇product，聯動customer的選項，再通過選擇customer，結合product的值，聯動mingro的選項。
首先，界面初始化給product標簽綁定從“lot_getPro.ashx”中得到的全部機種，“lot_getPro.ashx”處理的是一個List<Product>的集合，Product類的屬性有pro_id和pro_name，經過JavascriptSerializer輸出為json格式，valueField就是value值，textField就是text值，panelHeight就是下拉列表的高度；
接着我綁定了onSelect事件，當選擇product的選項后，執行函數。rec是指選中的項對應的product對象，所以url中連接的handler就能通過get方法傳遞rec.pro_id，
$('#customer').combobox('loadData', {});是指清空customer的選項，嘗試過官網的clear方法，但是不行。
$.parser.parse('#customer');是重新加載一次樣式。
$('#customer').combobox('setText','').combobox('setValue','');這句是比較重要的，之前由於沒有寫這一句，導致第一個combobox的選項發生變化時，第二個combobox會出現不知名的數字。
1 $(function() { 2 $('#customer').combobox({ 3 onChange: function(n, o) { 4 $('#mingro').combobox("loadData", {}); 5
6 var proId = $.trim($('#product').combobox("getValue")); 7 var cusId = $.trim($('#customer').combobox("getValue")); 8 var proName = $.trim($('#product').combobox("getText")); 9 var cusName = $.trim($('#customer').combobox("getText")); 10
11 if (proName == "" || cusName == "") { 12 return; 13 } 14
15 $.getJSON( 16 'lot_getMinGro.ashx', 17 { 18 proId: proId, 19 cusId: cusId 20 }, 21 function(json) { 22 $('#mingro').combobox('loadData', {}); 23 $('#mingro').combobox({ 24 data: json, 25 valueField: 'min_gro_id', 26 textField: 'min_gro_name', 27 multiple: false, //允許多選 28 editable: false //禁止編輯 29 }); 30 $.parser.parse('#mingro'); 31 $('#mingro').combobox('setValue', '').combobox('setText', ''); 32 }); 33 } 34 }); 35 });
這里就是通過javascript和jquery，綁定customer的onChange事件，就不用多說了。
2、取值和賦值
取Value值：$('#id').combobox("getValue");
取Text值：$('#id').combobox("getText");
賦值：$('#id').combobox("setValue","這里是Value值").combobox("setText","這里是Text值，即顯示的值");
3、寬度設定
easyui默認的combobox寬度是一致的，有可能不夠長，可以通過style的width屬性進行設置。
4、字體大小
easyui默認的combobox字體大小是12px，是比較小的，可以在easyui.css，查找含有combobox的關鍵字，修改font-size就可以了。
同理，我是把整個easyui.css的font-size都改為16px了。
5、驗證提示
在編寫驗證功能時，如果出現了錯誤，我希望效果是這樣的：
因為我輸入了option中的不存在的內容，所以希望全選並且后面跟着紅*
首先看一下瀏覽器加載生成后的html代碼：
可以看到，其實easyui是在原有的select標簽周圍追加了輔助的標簽，所以根據結構關系，我通過以下代碼實現：
全選：$('#id span:first > input:first').select();
紅*：$('#id').next().next().html("*"); =>這里的修改的就是strong標簽
先分享到這里。