easyUI教程

easyUI教程
easyUI教程

jQuery EasyUI

简介

jQuery EasyUI 是一个基于jQuery 的框架,集成了各种用户界面插件。

什么是JQuery EasyUI

jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。

?easyui 是一个基于jQuery 的框架,集成了各种用户界面插件。

?easyui 提供建立现代化的具有交互性的javascript 应用的必要的功能。

?使用easyui,您不需要写太多javascript 代码,一般情况下您只需要使用一些html 标记来定义用户界面。

?HTML 网页的完整框架。

?easyui 节省了开发产品的时间和规模。

?easyui 非常简单,但是功能非常强大。

JQuery EasyUI 下载

您可以从https://www.360docs.net/doc/0f455928.html,/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 通过标签创建布局

实例:

1.2 使用完整页面创建布局

只需将上面例子最外层

换成

演示效果:

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

对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。示例代码:

浏览器效果:

作业:学生自己预习messager

JQuery EasyUI 菜单

1.Menu菜单

1.1 创建简单菜单

在DIV标记中定义菜单(Menu):

新建

导出

Word

Excel

PowerPoint

保存

退出

单纯的使用easyUI控件class="easyui-menu"定义div,在页面中是不会显示任何内容.

可以采用js代码调用show方法显示菜单

1.2 创建链接按钮

通常情况下,使用

相关主题
相关文档
最新文档