jQuery EasyUI简介jQuery EasyUI 是一个基于jQuery 的框架，集成了各种用户界面插件。
什么是JQuery EasyUIjQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
∙easyui 是一个基于jQuery 的框架，集成了各种用户界面插件。
∙easyui 提供建立现代化的具有交互性的javascript 应用的必要的功能。
∙使用easyui，您不需要写太多javascript 代码，一般情况下您只需要使用一些html 标记来定义用户界面。
∙HTML 网页的完整框架。
∙easyui 节省了开发产品的时间和规模。
∙easyui 非常简单，但是功能非常强大。
JQuery EasyUI 下载您可以从/download/index.php上下载您需要的jQuery EasyUI 版本。
JQuery EasyUI-创建 CRUD 应用数据收集并妥善管理数据是网络应用共同的必要。
CRUD 允许我们生成页面列表，并编辑数据库记录。
本教程将向你演示如何使用jQuery EasyUI 框架实现一个CRUD DataGrid。
我们将使用下面的插件：∙datagrid：向用户展示列表数据。
∙dialog：创建或编辑一条单一的用户信息。
∙form：用于提交表单数据。
∙messager：显示一些操作信息。
步骤1：准备数据库我们将使用MySql 数据库来存储用户信息。
创建数据库和'tbl_user' 表。
步骤2：创建DataGrid 来显示用户信息创建没有javascript 代码的DataGrid。
我们不需要写任何的javascript 代码，就能向用户显示列表，如下图所示：DataGrid 使用'url' 属性，并赋值为'jsonData.jsp'，用来从服务器检索数据。
jsonData.jsp文件的代码步骤3：创建表单对话框我们使用相同的对话框来创建或编辑用户。
这个对话框已经创建，也没有任何的javascript 代码:。
步骤4：实现创建和编辑用户当创建用户时，打开一个对话框并清空表单数据。
当编辑用户时，打开一个对话框并从datagrid 选择的行中加载表单数据。
'url' 存储着当保存用户数据时表单回传的URL 地址。
步骤5：保存用户数据我们使用下面的代码保存用户数据：提交表单之前，'onSubmit' 函数将被调用，该函数用来验证表单字段值。
当表单字段值提交成功，关闭对话框并重新加载datagrid 数据。
步骤6：删除一个用户我们使用下面的代码来移除一个用户：移除一行之前,我们将显示一个确认对话框让用户决定是否真的移除该行数据。
当移除数据成功之后，调用'reload' 方法来刷新datagrid 数据。
JQuery EasyUI 布局Layout布局容器layout有5个区域：北(north)、南(south)、东(east)、西(west)和中间(center).中间区域面板是必须的，边缘面板都是可选的，每个边缘区域面板都可以通过拖曳其边框改变大小，也可以折叠按钮将其面板折叠起来。
1、创建布局1.1 通过标签创建布局<div id="cc"class="easyui-layout"style="width:600px;height:400px;"><div data-options="region:'north',title:'North Title',split:true"style="hei ght:100px;"></div><div data-options="region:'south',title:'South Title',split:true"style="hei ght:100px;"></div><div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true "style="width:100px;"></div><div data-options="region:'west',title:'West',split:true"style="width:100px; "></div><div data-options="region:'center',title:'center title'"style="padding:5px; background:#eee;"></div></div>实例：1.2 使用完整页面创建布局只需将上面例子最外层<div ></div>换成<body class=”easyui-layout”></body>演示效果：2、布局属性3.导航菜单easyui-accordion分类空间允许用户使用多面板，但在同一时间只会显示一个。
每个面板都内建支持展开和折叠功能。
面板内容可以通过指定的“href”属性使用ajax方式读取面板内容。
例1：（查看工具api----“使用案例”）在上面布局的页面中，我们加上分类容器accordion可以完成设置“导航菜单”的页面效果效果图：4.选项卡在实际项目中，会出现如下图所示效果：我们可以通过easyUI完成在页面某个位置上添加选项卡4.1添加选项卡4.1.1 通过标签实现选项卡效果代码：页面效果：4.1.2 动态实现添加选项卡效果在以上代码基础上，添加js代码：页面效果，点击添加会新增一个选项卡，并且在此选项卡下方显示另外页面的内容：注意：上面内容content属性对应的路径页面内容要简洁，不要太复杂，否则会影响展示效果。
作业：在业务管理系统center域中，用户选择左边导航选项后显示的内容，由不同选项卡显示不同内容JQuery EasyUI 窗口窗口控件是一个浮动和可拖曳的面板可以用作应用程序窗口。
默认情况下，窗口可以移动，调整大小和关闭。
她的内容也可以被定义为静态html或通过ajax动态加载。
1简单示例1.1.Window弹出窗口通过js代码实现弹出窗口，且窗口在浏览器中居中显示，代码实现：浏览器效果：1.2.设置登陆窗口将以上代码添加以下内容：浏览器效果：2.对话框dialog对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。
示例代码：<script type="text/javascript">function show(){$("#dd").dialog({title: 'My Dialog',width: 400,height: 200,top:($(window).height() - 200) * 0.5,left:($(window).width() - 400) * 0.5,closed: false,toolbar:"#dlg-toolbar",buttons:"#dlg-buttons"});}</script></head><body><a href="javascript:void(0)" onclick="show()"><div class="easyui-linkbutton">showDialog</div></a><div id="dd"class="easyui-dialog"style="padding:5px;"iconCls="icon-ok"closed=true> <div id="dlg-toolbar"><a href="#"closed=true class="easyui-linkbutton"iconCls="icon-add"plain="true"onclick="javascript:alert('Add')">Add</a><a href="#"closed=true class="easyui-linkbutton"iconCls="icon-save"plain="true"onclick="javascript:alert('Save')">Save</a></div><div id="dlg-buttons"><a href="#"closed=true class="easyui-linkbutton"iconCls="icon-ok"onclick="javascript:alert('Ok')">Ok</a><a href="#"closed=true class="easyui-linkbutton"iconCls="icon-cancel"onclick="javascript:$('#dd').dialog('close')">Cancel</a></div></div>浏览器效果：作业：学生自己预习messagerJQuery EasyUI 菜单1.Menu菜单1.1 创建简单菜单在DIV标记中定义菜单（Menu）：<div id="mm"class="easyui-menu"style="width:120px;"><div onclick="javascript:alert('new')">新建</div><div><span>导出</span><div style="width:150px;"><div><b>Word</b></div><div>Excel</div><div>PowerPoint</div></div></div><div icon="icon-save">保存</div><div class="menu-sep"></div><div>退出</div></div>单纯的使用easyUI控件class="easyui-menu"定义div,在页面中是不会显示任何内容.可以采用js代码调用show方法显示菜单<script type="text/javascript">function show(){$('#mm').menu('show', {left: 200,top: 100});}</script>1.2 创建链接按钮通常情况下，使用<button>元素来创建按钮，而链接按钮(Link Button)则是使用<a>元素来创建的。