easyui使用总结的.doc

概述 本文档内容包括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 = request.getContextPath(); % 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 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）完成特定的操作；控件基于