最近在公司制作内部使用数据管理网页，用到了easyui，使用过程中发现与jquery的写法有比较多不一样的地方，趁现在有空，先做个笔记。
(这里主要说明的是combobox的用法，其他的像textbox和datebox，用法都相似的)
easyui里的combobox就是把html的select标签变成winform里的combobox，优势在于不仅可以下拉选择，还可以输入，并且自动匹配，常用的代码有：
1、数据绑定：
<input id="product" class="easyui-combobox" data-options="
valueField: 'pro_id',
textField: 'pro_name',
url: 'lot_getPro.ashx',
panelHeight:500,
onSelect: function(rec){
$('#customer').combobox('loadData', {});
var url = 'lot_getCus.ashx?proId='+rec.pro_id;
$('#customer').combobox('reload', url);
$.parser.parse('#customer');
$('#customer').combobox('setText','').combobox('setValue','');
if($('#mingro')!=undefined){
$('#mingro').combobox('loadData', {});
$.parser.parse('#mingro');
$('#mingro').combobox('setText','').combobox('setValue','');
}
}" style="width:280px;"/> <input id="customer" class="easyui-combobox" data-options="valueField:'cus_id',textField:'cus_name',panelHeight:500" style="width:260px;" /> <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会出现不知名的数字。
$(function() {
$('#customer').combobox({
onChange: function(n, o) {
$('#mingro').combobox("loadData", {}); var proId = $.trim($('#product').combobox("getValue"));
var cusId = $.trim($('#customer').combobox("getValue"));
var proName = $.trim($('#product').combobox("getText"));
var cusName = $.trim($('#customer').combobox("getText")); if (proName == "" || cusName == "") {
return;
} $.getJSON(
'lot_getMinGro.ashx',
{
proId: proId,
cusId: cusId
},
function(json) {
$('#mingro').combobox('loadData', {});
$('#mingro').combobox({
data: json,
valueField: 'min_gro_id',
textField: 'min_gro_name',
multiple: false, //允许多选
editable: false //禁止编辑
});
$.parser.parse('#mingro');
$('#mingro').combobox('setValue', '').combobox('setText', '');
});
}
});
});
这里就是通过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标签
先分享到这里。
