EASYUI框架说明

EASYUI框架说明

技术框架概述

jQuery EasyUI framework help you build your web page easily.

?easyui is a collection of user-interface plugin based on jQuery.

?easyui provides essential functionality for building modem, interactive, javascript applications.

?using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.

?complete framework for HTML5 web page.

?easyui save your time and scales while developing your products.

?easyui is very easy but powerful.

EASYUI具备两种方式为我们的界面提供支持：

1.使用HTML的原生标签来声明控件：

data-options="title:'My

Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}"> dialog content.

2.用JS脚本来创建控件：

$('#cc').combobox({

url: ...,

required: true,

valueField: 'id',

textField: 'text'

});

参考文档

1)jquery.EasyUI-1.3.1 API.chm

整合DWR

EASYUI默认采用URL加载JSON数据，通过改写每个控件的LOADER方法，实现DWR方法的调用。

●代码路径：WebContent/public/jquery/easyui/dwrloader.js

EASYUI使用规范

Easyui是基于JQUERY开发的，首先必须通过JQUERY语法获取对象，然后再调用对应控件的方法，例子如下：

jQ('#schemaImportViewList').datagrid('loadData',data);

jQ('#schemaImportList').datagrid('options')

jQ('#schemeImportReload').window('open');

格式: Jquery对象.控件类型（方法名，参数[可选]）

EASYUI扩展

在easyui的基础上，补充一些默认属性、静态数据等扩展，以后可在此JS补充●代码路径：WebContent/public/jquery/easyui/dwrEasyext.js

DATAGRID（数据列表）

例子展示

通过TABLE元素进行渲染，CLASS为“easyui-datagrid”,TH标签定义数据列表的表头

通过JS脚本创建，必须有个TABLE载体

调用DWR类

data-options="url:' CRUDService.getPageList'

1.在dataGrid的url参数中写上：“服务器名.方法名”

2.getPageList方法入参只有一个：“MAP PARAEMS”

3.分页查询时，PARAMS中的参数rows为每页显示的调试，page是第几页

4.结果可返回java.util.List（不分页）或appfrm.app.vo.PageModel(分页)

手工加载数据

数据列的静态数据

在展示列中增加code属性，会自动把编码翻译成中文名

图表1界面展示

图表2代码示例

Combobox（下拉框）

通过SELECT元素进行渲染，CLASS为“easyui-combobox”

通过JS脚本创建，必须有个TABLE载体

静态数据

WINDOW(弹出界面)

弹出界面不需要增加JSP/HTML页面，可以在原列表增加WINDOW控件；通过DIV元素进行渲染，CLASS为“easyui-window”

通过JS脚本创建，必须有个DIV载体

TAB（页签）

动态添加TAB

LAYOUT(布局)

与常用的布局类型相似，分为：东、西、南、北、中的布局方式