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

时间:2022-01-17 07:59:25

回《【开源】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更轻量。

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

   特点

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

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

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

4 支持HTML5

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

6 简单,但很强大

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

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

2.JqueryEasyUI常用控件使用详解

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

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

1)Layout布局控件

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

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

2)datagrid表格控件

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

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

3)Dialog弹窗控件

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

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

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

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

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

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

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

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

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