easyui使用总结

1   概述

        本文档内容包括easyui的引入和easyui的使用实践，编写该文档的目的，主要为了给下次须要使用的easyui的同事作参考，提升开发效率。

2       EasyUI的引入说明

2.1         Jquery库引用

项目中使用EasyUI版本为1.3.3版本其中中自带了Jquery的库，版本是V2.0.0，请注意该版本不必定适用于你的项目场景，关于Jquery V2.0.0对IE浏览器的支持也是每个开发人员须要注意的。Jquery V2.0.0支IE9+。为了统一项目中的jquery版本，因此就把easyui自带的jquery版本换成项目中使用的版本1.7.2。

2.2         关于easyui包目录结构调整说明

一般从jquery-easyui官网中下载下来的包，是一个至关完整的包其中包括一下文件夹及目录：

demo目录是easyui使用示例；

locale目录是国际化支持；

src目录是部分easyui插件的源码；

plugins目录是easyui使用的插件；

themes目录包含多套easyui可以使用的主题。

一般在项目中使用的话，demo目录、src目录能够不用，locale能够去除没用的js库，主题若是只使用默认的主题，也能够去除不用的主题。

2.3         使用easyui须要引用的js和css

要使用easyui的功能，须要引入一下样式及js。引入代码以下

<link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/icon.css"> <script type="text/javascript" src="<%=webContext %>/js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

Js和css文件说明：

        easyui.css是easyui框架的主样式；

        icon.css是easyui中用到的图标的样式；

        jquery-1.7.2.min.js是easyui使用的基础；

        jquery.easyui.min.js是easyui的核心javascript库；

        easyui-lang-zh_CN.js是easyui对中文的国际化支持；

3       关于easyui控件的使用

        easyui库做为一个相对成熟的js前端框架，提供了很是丰富的UI控件，包括form表单控件、layout布局控件、gird控件等等。

        这里对使用easyui控件过程当中的一些注意事项进行说明。

3.1         控件组成部分

每个easyui控件一般都是由属性（Properties）、事件（Events）和方法（Methods）这些组成部分。

控件自身用到的信息能够经过属性存储，控件能够利用某些属性（好比url）完成特定的操做；控件基于事件驱动，开发人员能够在控件初始化的时候，为控件绑定一些特定事件（比：form的onSubmit事件）；easyui为每一个控件提供了操做控件相关内容的函数，每一个函数对应特定的功能（好比：datagrid的options方法，能够获取datagrid控件的属性设置）。

小贴士：对控件属性、事件、方法的理解，能够参考HTML的input元素（有属性、事件）。

3.2         控件的继承特性

        在easyui中使用了继承特性，在定义了一部分基础控件的基础上（好比：tree、combo等），能够扩展出功能更完善的控件，好比：基于combo的扩展combotree、combogrid、combobox，基于panel的扩展有tab、layout、Accordion等。

        Easyui控件的继承特性，在父控件中定义的属性适用于子控件，好比有这么一个业务场景，combobox中输入框默认是能够编辑，在咱们的业务上须要屏蔽对combobox的编辑功能。针对刚才的业务场景，咱们去查看combobox的属性（一般控件的属性能够对控件进行控制），可是在combobox的一堆属性中没有一个能够用于控制输入框的编辑性。不过因为easyui控件拥有继承特性，父控件中定义的属性适用于子控，因此能够查看combobox继承了哪些控件，API告诉咱们combobox继承了combo这个控件，同时combo的属性中有editable这一项，专门用于控制编辑框的可编辑性，因此easyui控件的继承特性很好的解决了咱们项目中遇到的问题。

3.3         调用控件的方法

Easyui控件在初始化以后，javascript语言中对控件的操做经过控件相关的方法完成。

下面经过combobox控件来讲明怎样来调用控件的方法：

var options = $(“#datagrid”).datagrid(“options”); $(“#datagrid”)经过控件的id熟悉，经过Jquery获取到datagrid对象； 获取datagrid对象后，接控件名称，参数是控件中提供的方法名。

3.4         修改控件的属性

Easyui中控件初始化时，全部的初始化信息（包括属性的值、事件对应调用函数）都存储在一个javascript对象中，基本上全部的控件都提供了一个方法“options”，经过这个方法能够获取到这个对象。下面的例子是修改datagrid控件的url属性：

var options = $(“#datagrid”).datagrid(“options”); options.url = “targetUrl”;

说明：easyui控件的属性均可以做为options的属性来操做，达到修改的目的，特别说明，对datagrid控件的url属性的修改会触发一次datagrid的远程调用。因此这个须要慎重。若是没处理好就可能引发二次加载的问题。

3.5         控件事件的注册

Easyui控件支持事件，当相应的操做触发时，能够调用特定的函数，完成自定义的处理动做。

下面的几个例子用来讲明怎么注册：

例子一 在初始化tab控件的时候注册onSelect事件

<!—- 普通的HTML代码 --> <div id="baseTab" >        <div id="tab001" title="电脑清单" selected="true"></div>        <div id="tab002" title="笔记本清单"></div>        <div id="tab003" title="网线清单"></div> </div> <script type="text/javascript"> $(function(){        $('#baseTab').tabs({              border:false, plain:true, fit:true, tools:'#tab-tools',            onSelect:function(title,index){                                   localSearch();               }          });}); </script> 说明以下 上面的HTML代码没有任何特别之处，着重解释js初始化的动做。 上面的js代码能够分红两部分：$('#baseTab').tabs()和{border:false,…}，两部分的结合使用表明tab控件的初始化，tabs方法的参数是一个javascript对象，如上所说，在该对象中就包括了对tabs控件属性的赋值，好比border的值false；以及注册了onSelect事件，其中函数的参数，在easyui提供的api中有说明。

例子二 在HTML中为Editor注册onSelect事件

<!—- 普通的HTML代码 --> <th editor='{type:"combobox",options:{onSelect:onSelectDeviceType,valueField:"itemValue",textField:"itemName",data:<c:out value="${deviceType}" />}}' data-options="field:'deviceType' ">设备类型</th> <!—- Js处理脚本--> <script type="text/javascript"> function onSelectDeviceType(){     //处理过程 } </script> 说明以下 HTML中为Editor控件注册了onSelectDeviceType，同时须要在script脚本中提供该函数。

例子三 初始化datagrid后注册onDblClickCell事件

<!—js代码  --> table.datagrid({               onDblClickCell:function(rowIndex,field,value){}        }); 说明以下 同js初始化控件同样，不过在函数对应的参数中，只指定了要注册的事件。

 

4       关于Datagrid

4.1         Datagrid中列表宽度的设置建议

        Datagrid的column有width属性，说明column是能够精确的指定列的宽度，极端的作法是每列指定具体的值。若是预留一列不设置width属性，系统会为其余列分配宽度后，将剩余的宽度留给该列，注意一点：未设置列宽的column其具体的width值未知，可是大概能够判断出他的值，根据业务须要，决定是否设置具体的width。可是这样自动计算最后一列的宽度就容易影响性能，因此这里仍是看界面数据量再进行设置取舍了。

4.2         关于editor的使用说明

        Easyui支持可编辑的datagrid控件，其中datagrid中行（row）的可编辑功能经过editor实现。

关于editor的几点说明：

    一、能够把editor当作一个控件，他也有一些属于本身的方法，好比getValue、setValue；

    二、在指定editor的时候，有两个参数很重要：类型和初始对象，对初始对象的理解能够当成脚本初始化控件中的参数，类型主要指编辑控件的类型，好比text、combobox、combotree等；

    三、在指定editor的类型以后，editor就关联了一个target的jquery对象，根据editor的类型，target对象的类型也不同。有以下规律：若是editor的类型能够对应到easyui中定义的控件，则target就是一个相应类型的easyui控件；特殊的若是editor的类型是text或者numberbox等，对应的target其实就是一个普通的表明input的jquery对象；再有的话，须要根据edtior的具体类型具体判断。

四、在datagrid中，有相应的方法控制一行全部editor的编辑状态，在js脚本中须要得到行eidtor对象时，须要先调用datagrid的beginEdit，打开行编辑；

五、  js中有两种方法获取单元格对应的editor对象，分别调用datagrid对象的getEditors和getEditor方法，具体使用请参考easyui的API；

六、当editor的target中提供的事件不能知足须要的时候，须要为target对象注册更多的事件，好比为类型为text的editor注册keyup事件，这时候，须要探究target对象的本质（好比：combobox、jquery的input对象等），在此基础上为target绑定事件。

七、提交数据前须要把编辑的行关闭编辑状态endEdit

总结

   这篇文章只是简单记录easyui大概的入门及个别控件的简单用法，具体仍是须要你们多实践、多差api，后期还会有问题总结更新。