easyui 常用代码

最近在公司制作内部使用数据管理网页，用到了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标签

先分享到这里。