二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI

回《【开源】EFW框架系列文章索引》       

EFW框架源代码下载V1.2：http://pan.baidu.com/s/1hcnuA

EFW框架实例源代码下载：http://pan.baidu.com/s/1o6MAKCa

前言：EFW框架主要用于行业软件软件开发，所以软件的界面需要体现专业、漂亮、风格统一的效果；在Web方便这种界面框架还是有不少，如强大的EXT，基于Jquery的JqueryUI，还有一些国产的也都比较漂亮；而EFW框架中推荐的是JqueryEasyUI，为什么选择它了，一是界面风格比较合适，控件也很全，已经满足系统的功能；二是JqueryEasyUI是基于Jquery，对于它的编码方式是非常舒服的，而且整个框架够轻量级；三是它的学习成本低，实例代码很全，花得几个小时熟悉一下就会使用；以前在项目中有用过ExtJS做界面开发，说实话用得比较痛苦，它那种编码方式不是一般人能接受的，界面都是用JS代码编写的，看起来不太直观，特别大家编码又不是太规范，日积月累最后一个页面js也是老长，最后出现对应闭合符号不对都要找半天；现在的项目都是使用JqueryEasyUI开发，那叫一个舒服啊；当然如果还是觉得JqueryEasyUI不够强大，你可以在EFW框架中非常方便的扩展你自己的界面框架；

本文要点：

1.JqueryEasyUI介绍

2.JqueryEasyUI常用控件使用详解

3.EFW框架中使用JqueryEasyUI开发的编码风格

4.在JqueryEasyUI基础上自定义的控件

1.JqueryEasyUI介绍

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。

   特点

1 基于jquery用户界面插件的集合

2 为一些当前用于交互的js应用提供必要的功能

3 使用 EasyUI你不需要写很多的javascript代码，通常只需要写HTML标记来定义用户界面即可

4 支持HTML5

5 开发产品时可节省时间和资源

6 简单，但很强大

7 支持扩展，可根据自己的需求扩展控件

8 目前各项不足正已版本递增的方式不断完善

2.JqueryEasyUI常用控件使用详解

接下来我们结合EFW框架来详细讲解JqueryEasyUI的控件如何使用；同时根据自己结合自己对它的理解挑选几个有代表性的控件；页面中使用控件前必须先引用几个JqueryEasyUI的文件；

1）Layout布局控件

学习一套控件首先要掌握的就是布局控件，分别上下、左右、居中等，还有嵌套布局，比如在居中面板再分为上下布局；布局用得好对以后得界面调整是非常方便，代码也看上去更加清晰漂亮；编写一个<div>标签且class="easyui-layout"，这样就表示把div层变成一个布局控件，所有其他控件的代码编写都是这种方式使用；

2）datagrid表格控件

表格控件在系统中用得最多的一个控件，在Winform中就有datagridview表格控件，只需将DataTable数据绑定给DataGridView就可以显示数据非常简单；而datagrid是bs的，肯定没有这么方便，但EFW框架也把它封装得使用起来非常方便；首先编写datagrid界面代码，定义好显示列，然后在js代码中给控件的url属性指定请求地址，利用jquery的ajax发送http请求调用后台WebController，返回Json数据显示在datagrid控件；

3）Dialog弹窗控件

这个控件也是用的非常多的，比如新增、修改操作的时候更偏向于弹出一个小界面进行操作；

其他更多控件学习参考：http://www.jeasyui.com

3.EFW框架中使用JqueryEasyUI开发的编码风格

JqueryEasyUI代码编写有两种风格，一种是用html标签编写界面代码，还有一种可以编写js代码动态生成界面，从上面的控件举例就能看出，个人坚持一定要采用第一种方式编写界面代码，js代码只是一些数据请求操作；

4.在JqueryEasyUI基础上自定义的控件

介绍两个自己的两个控件，是基于JqueryEasyUI之上扩展的，给需要自己开发控件的提供两个示例，有个参考的东西；一个是在日期控件上的扩展控件，可以按月查、按季度查、按上下半年查、按年度查；另一个是把表格控件用卡片的形式展现；代码放在EFWWeb项目中的WebPlugin目录。