jQuery EasyUI

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强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

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

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

3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

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

6、简单，但很强大

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

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

插件

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。 用户可以组合使用这些组件，也可以单独使用其中一个。

插件列表如下：

分类	插件
Base（基础）	Parser 解析器 Easyloader 加载器 Draggable 可拖动 Droppable 可放置 Resizable 可调整尺寸 Pagination 分页 Searchbox 搜索框 Progressbar 进度条 Tooltip 提示框
Layout（布局）	Panel 面板 Tabs 标签页/选项卡 Accordion 折叠面板 Layout 布局
Menu（菜单）与 Button（按钮）	Menu 菜单 Linkbutton 链接按钮 Menubutton 菜单按钮 Splitbutton 分割按钮
Form（表单）	Form 表单 Validatebox 验证框 Combo 组合 Combobox 组合框 Combotree 组合树 Combogrid 组合网格 Numberbox 数字框 Datebox 日期框 Datetimebox 日期时间框 Calendar 日历 Spinner 微调器 Numberspinner 数值微调器 Timespinner 时间微调器 Slider 滑块 textbox基础文本框 filebox文件上传
Window（窗口）	Window 窗口 Dialog 对话框 Messager 消息框
DataGrid（数据网格）与 Tree（树）	Datagrid 数据网格 Propertygrid 属性网格 Tree 树 Treegrid 树形网格

方法的使用

datagrid

$('#dg').datagrid('getSelected'); 不带参数的方法，获取当前选中行。 $('#dg').datagrid(''sort', 'itemid'); 带参数的方法，按照itemid 排序

 

事件的使用

datagrid

$('#dg').datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } }); 定义单元格双击事件 开启编辑。

EasyUI 简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

'

在jQuery 和 HTML5 上轻松使用EasyUI

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:

1. 直接在 HTML 声明组件。

1. <div class="easyui-dialog" style="width:400px;height:200px"
2. data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
3. dialog content.
4. </div>

2. 编写 JavaScript 代码来创建组件。

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

1. $('#cc').combobox({
2. url: ...,
3. required: true,
4. valueField: 'id',
5. textField: 'text'
6. });