概述
本文档内容包括easyui的引入和easyui的使用实践，编写该文档的目的，其一是为了下次再使用easyui的时候，有章可循，提高开发效率；其次记录使用过程中遇到的一些关键的问题，供自己和其他的同学参考。
EasyUI的引入说明
Jquery库引用
EasyUI中自带了Jquery的库，版本是V2.0.0，请注意该版本不一定适用于你的项目场景，关于JqueryV2.0.0对IE浏览器的支持也是每一个开发人员需要注意的。
Jquery V2.0.0支持IE9+。
最新的不一定是最好的，有时候，请果断更换你的jquery版本。
还有一点注意的是，项目中通常不会只有一个地方使用jqeury，使用easy ui时，使用项目中统一的jquey版本库，也不失为一种好的方案。
关于easyui包目录结构调整说明
通常从jquery-easyui中下载下来的包，是一个相当完整的包：其目录结构如下：
其中：
demo目录是easyui使用示例；
locale目录是国际化支持；
src目录是部分easyui插件的源码；
plugins目录是easyui使用的插件；
themes目录包含多套easyui可使用的主题。
通常在项目中使用的话，demo目录、src目录可以不用，locale可以去除没用的js库，主题如果只使用默认的主题，也可以去除不用的主题。项目中，清理后的easyui目录结构参考如下：
其中extends目录是项目中，基于easyui框架做的一些扩展。
使用easyui需要引用的js和css
这次项目中主要为了使用easyui的datagrid控件，才引入了easyui框架。由于不同的模块都会使用的easyui，所以把easyui相关的js和css统一放到了editInclude.jsp页面中，editInclude.jsp页面的内容如下：
<%@ page contentType="text/html; charset=gbk" language="java" %>
<%
    String webContext = ContextPath();
%>
<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 jquery在线库type="text/javascript" src="<%=webContext %>/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/extends/easyui.formatter.js"></script>
<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/extends/easyui.edit.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对中文的国际化支持；
easyui.formatter.js和easyui.edit.js是项目中使用到的两个扩展js库。
关于easyui控件的使用
easyui库作为一个相对成熟的js前端框架，提供了非常丰富的UI控件，包括form表单控件、layout布局控件、gird控件等等。
这里对使用easyui控件过程中的一些注意事项进行说明。
控件组成部分
每一个easyui控件通常都是由属性（Properties）、事件（Events）和方法（Methods）这些组成部分。
控件自身用到的信息可以通过属性存储，控件可以利用某些属性（比如url）完成特定的操作；控件基于事件驱动，开发人员可以在控件初始化的时候，为控件绑定一些特定事件（比：form的onSubmit事件）；easyui为每个控件提供了操作控件相关内容的函数，每个函数对应特定的功能（比如：datagrid的options方法，可以获取datagrid控件的属性设置）。下面是一个简单的例子：
Form
上面列出了form控件的属性列表和事件列表。
小贴士：对控件属性、事件、方法的理解，可以参考HTML的input元素（有属性、事件）。
控件的继承特性
在easyui中使用了继承特性，在定义了一部分基础控件的基础上（比如：tree、combo等），可以扩展出功能更完善的控件，比如：基于combo的扩展combotree、combogrid、combobox，基于panel的扩展有tab、layout、Accordion等。
Easyui控件的继承特性，在父控件中定义的属性适用于子控件，比如有这么一个业务场景，combobox中输入框默认是可以编辑，在我们的业务上需要屏蔽对combobox的编辑功能。针对刚才的业务场景，我们去查看combobox的属性（通常控件的属性可以对控件进行控制），但是在combobox的一堆属性中没有一个可以用于控制输入框的编辑性。不过由于easyui控件拥有继承特性，父控件中定义的属性适用于子控，所以可以查看combobox继承了哪些控件，API告诉我们combobox继承了combo这个控件，同时combo的属性中有edita
ble这一项，专门用于控制编辑框的可编辑性，所以easyui控件的继承特性很好的解决了我们项目中遇到的问题。
对于控件的继承特性中，属性的继承是用得比较多的，关于事件和方法的继承，个人觉得是支持的，不过没有实践。
调用控件的方法
Easyui控件在初始化之后，javascript语言中对控件的操作通过控件相关的方法完成。
下面通过combobox控件来说明怎样来调用控件的方法：
var options = $(“#datagrid”).datagrid(“options”);
                |        |      |
                A        B      C   
说明如下
上面的代码可以分成三部分解读：
A：通常每个控件都会有一个ID属性，通过Jquery获取到datagrid对象；
B：通常该部分对应控件的名字；
C：参数是控件中提供的方法名。
修改控件的属性
Easyui中控件初始化时，所有的初始化信息（包括属性的值、事件对应调用函数）都存储在一个javascript对象中，基本上所有的控件都提供了一个方法“options”，通过这个方法可以获取到这个对象。下面的例子是修改datagrid控件的url属性：
var options = $(“#datagrid”).datagrid(“options”);
options.url = “targetUrl”;
说明：easyui控件的属性都可以作为options的属性来操作，达到修改的目的，特别说明，对datagrid控件的url属性的修改会触发一次datagrid的远程调用。
控件事件的注册
Easyui控件支持事件，当相应的操作触发时，可以调用特定的函数，完成自定义的处理动作。
下面的几个例子用来说明怎么注册：
例子一在初始化tab控件的时候注册onSelect事件
<!—-普通的HTML代码 -->
<div id="baseTab" >
    <div id="matter" title="111" selected="true"></div>
    <div id="object" title="222"></div>
    <div id="project" title="333"></div>
</div>
<!—- Js处理脚本-->
<script type="text/javascript">
$(function(){
    var selectedIndex = -1;
    $('#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事件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。