目录[-]
一、引言
为了方便没有接触过easyui的同学快速入门,考虑写easyui学习笔记。easyui组件非常多,本笔记打算只介绍几个开发MIS中常用的组件,包括layout,tab,tree,datagrid,theme,combobox,form,dialog等。此外介绍与后台java代码传递数据的问题。笔记中代码参考了一些博客和项目。初步打算写7篇,争取1天1篇。
EasyUI是一个基于Jquery的Web富客户端UI框架。为什么使用UI框架呢?
(1) 使用UI框架可以让没有美工的情况下也能开发出美观漂亮的系统界面。
(2) 掌握基本使用方法后,能帮助开发团队快速、简单地实现很多功能,如分页、排序、多对多等。
二、环境准备
(1) 因为IE对js支持不够友好,建议安装firefox或chrome浏览器。本笔记代码暂不考虑浏览器兼容问题。
(2) 编写代码过程中如果出错,界面直接显示空白,难以调试错误。因此,如果使用firefox,建议安装firebug插件。如果使用chrome,点击页面右键选择“审查元素”也可以辅助调试。
(3) 一个代码文本编辑器。我自己喜欢用EditPlus,其他当然也可以。
(4) 从官方网站上下载EasyUI库。网址是:www.jeasyui.com , 如果访问不了,可以从中文站点http://www.jeasyui.net/ 下载。
(5) 学习过程中建议要多看教程和示例demo。EasyUI官网上有很多教程和示例demo。如果讨厌E文,依旧建议http://www.jeasyui.net/ 。
(6) 如果不用到动态数据或Json数据,可以直接运行html网页即可测试代码。否则需要一个web服务器,tomcat即可。可在tomcat的webapps目录内编写代码,修改代码后不需要重启服务器。
三、HelloWorld
1. 在tomcat的webapps目录下新建easyui文件夹作为项目空间。解压下载的easyui库,本笔记本笔记使用的是3.1.5版本。
2. 新建子文件夹easyui/jslib/ easyui1.3.5用于存放easyui的库文件。在实际项目中,我们可能用到多个UI库,建议都扔到jslib内,每个UI库一个文件夹。我们需要将easyui根目录下3个文件拷贝到easyui1.3.5目录下。再将themes拷贝进来,然后再将locale目录拷贝进来,locale目录只留下easyui-lang-zh_CN.js(因为咱是中国人),其它删除。如下图所示
3. 在easyui目录下新建about.html网页。为了应用easyui,需要在页面引入easyui的样式和js库文件。代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>easyui学习笔记</
title
>
<
link
id
=
"easyuiTheme"
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jslib/easyui1.3.5/themes/default/easyui.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jslib/easyui1.3.5/themes/icon.css"
/>
<
script
type
=
"text/javascript"
src
=
"jslib/easyui1.3.5/jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jslib/easyui1.3.5/jquery.easyui.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js"
charset
=
"utf-8"
></
script
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
>
$.messager.alert('About','Hello EasyUI World!');
</
script
>
</
body
>
</
html
>
|
每个文件作用如下。
easyui.css为主题样式文件。Easyui提供浅蓝、灰色、黑色、Metro和Bootstrap等5种风格主题皮肤。
icon.css 为图标样式文件。
jquery.min.js 为压缩版jquery库文件
jquery.easyui.min.js 为压缩版easyui库文件
easyui-lang-zh_CN.js为本地化文件,可让easyui支持中文。
网页中就一句js,弹出一个消息框。$.messager是easyui的消息组件。
4. 运行tomcat,在浏览器中输入localhost:8080/easyui/about.html。如显示如下界面,恭喜你,环境配置成功。