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. });