简介

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

目录结构

demo文件夹：一些示例，（正式项目中删除）

locale：一些不同语言的文件，其实是对easyui的扩展。（只须保留你想用的语言相对应的文件）

plugins：easyui提供的各个功能的文件。（使用方式二加载必须保留，方式一加载可以删除）

src :各个插件的源文件，不是全部，其实有些功能不是开源的，是商业授权，因此没有源文件。（可以删除）

themes：主题，就是css文件和要用到的图标文件，里边提供5种风格。（可以只保留要使用的风格，并且具体到一个风格里，又分为两部分：easyui.css和其它所有css。easyui.css是其它所有css的合并后结果，在不同的加载方式中只会用到一部分。）

easyloader.js：暂且称之为加载器文件。在使用方式一加载也不会被使用。

jquery.easyui.min.js：easyui的主文件。它是plugins下所有文件合并后的结果，因些它在使用方式一加载必须保留，方式二加载不会使用到，可以删除。

jquery.min.js：jquery文件，easyui是基于jquery的，因此是必须的。

其它的是一些授权文件和更新日志之类的，就不说了。

两种引用加载方式

1：饿汉式加载

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

这种也是最常用的方式。这种方式会加载easyui提供的所有功能。

2：懒汉式加载

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyloader.js"></script>

这种方式就相对比较懒，只会在使用特定功能的时候才会加载相对应的plugins下的js和风格里css文件，而其它不使用的功能对应的js和css永远不会被下载。而easyloader.js就是负责用于加载各个插件的。

不同加载方式产生问题

风格

方式1的加载我们通过引用 themes/default/easyui.css来指定，引用不同风格下的easyui.css来使用不同的风格，但是方式2我们并没用指定风格？如何指定风格？

不指定时，默认是引用default风格下的样式，就会去下载该风格下的样式。如果你使用方式2时且没有指定风格，不存在default风格就会出现问题。

当然我们可以在页面加载后通过

easyloader.theme = "gray";

来指定风格。

语言

同样的对于语言文件，对于方式1我们可以直接在页面引用jquery.easyui.min.js的后面引用。

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

但是这对于方式2的加载，这是不起作用的。

因些语言文件其实是对各个插件默认配置的修改，当插件都还没有加载时，语言文件对它的修改当然是不会起作用的。

因此我们可以通过下面

easyloader.locale = "zh_CN";

来指定使用何种语言。

两种渲染方式

1：javascript方式

<input id="cc" style="width:200px" />

$('#cc').combobox({

url: ...,

required: true,

valueField: 'id',

textField: 'text'

});

2：html标记方式

<input id="cc" class="easyui-combobox" name="dept"

data-options="valueField:'id',textField:'text',url:'get_data.php'" />

注：具网上传言，html标记方式相对JS加载方式而言，（在IE）渲染性能差些。

这个我还没感觉到，只是个人觉得JS加载方式相对html标记方式要更加灵活，你可以在DOM加载完毕之后再去渲染控件，也可以在使用到某个控件时，再去渲染。

由于EasyUI是基于jQuery的，而上面2种方式使用到了jQuery的选择器。根据给定ID去匹配元素比根据给定的class去匹配元素性能更佳。

所以选择哪一种，你懂的。。。。。。

说说IE兼容性问题

EasyUI本身控件功能是很不错，效果也漂亮，使用方式也简单，但是对于IE不同版本的兼容性不是很好，性能问题尤其突出，所以，如果你是用IE浏览器，那么就不建议使用EasyUI。

如果你是在项目中使用EasyUI，又要兼容IE8及以下浏览器。那么可以搭配

EasyUI 1.3.1+EasyUI 1.3.2+jQuery 1.8.x

来使用（本人在实际项目中使用过，期间发现较少问题，总的情况还算稳定，就是页面控件渲染是硬伤，网上针对部分EasyUI控件的优化办法也有一些，聊胜于无，总的效果不是很理想）。

注：jQuery Easy UI从1.3.3到现在的最新版本1.3.4都是基于jQuery2.0的，而jQuery2.0是不支持IE6、7、8的了，所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想继续兼容IE8以前的版本，只能使用jQueryEasyUI1.3.2或以前的版本了。另外jQuery1.9对IE8兼容性不是很好，所以不建议选择。

插件列表如下：

以及几个常用的扩展插件

1 autocomplete自动完成控件，类似百度搜索框
2 lookup控件，这是一个比较中国化的东西，企业应用中使用的频率很高
3 daterange这个是国外网站上找到了，很炫的一款控件，略做了一些修改并引入

对于EasyUI几个常用控件的源码分析，学习和优化，可以去这个网址看看。

http://www.easyui.info/