easyui 常用代码
最近在公司制作内部使用数据管理网页，用到了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标签
先分享到这里。
