文档介绍：概述
本文档内容包括easyui的引入和easyui的使用实践,编写该文档的目的,其一是为了下次再使用easyui的时候,有章可循,提高开发效率;其次记录使用过程中遇到的一些关键的问题,供自己和其他的同学参考。
EasyUI的引入说明
Jquery库引用
EasyUI中自带了Jquery的库,,请注意该版本不一定适用于你的项目场景,。
Jquery +。
最新的不一定是最好的,有时候,请果断更换你的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,,:
<%@ page contentType="text/html; charset=gbk" language="java" %>
<%
String webContext = ();
%>
<link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/gray/">
<link rel="stylesheet" type="text/css" href="<%=webContext
%>/js/jquery-easyui/themes/">
<script type="text/javascript" src="<%=webContext %>/js/jquery/jquery-"></script>
<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/"></script>
<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/locale/easyui-lang-.js"></script>
<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/extends/"></script>
<script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/extends/"></script>
Js和css文件说明:
;
;
jquery-;
;
easyui-lang-.js是easyui对中文的国际化支持;
。
关于easyui控件的使用
easyui库作为一个相对成熟的js前端框架,提供了非常丰富的UI控件,包括form表单控件、layout布局控件、gird控件等等。
这里对使用easyui控件过程中的一些注意事项进行说明。
控件组成部分