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的原生标签来声明控件：

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

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

参考文档

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标签定义数据列表的表头

1. 3. 4. 5. Code 6. Name 7. Price 8. 9. 10. 通过JS脚本创建，必须有个TABLE载体 1.

调用DWR类

data-options=\

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

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

3. 分页查询时，PARAMS中的参数rows为每页显示的调试，page是第几页 4. 结果可返回java.util.List（不分页）或appfrm.app.vo.PageModel(分页) 5. 手工可以调用datagrid的load方法加载数据（后面的是查询参数） $('#dg').datagrid('load',{ code: '01', name: 'name01' });

手工加载数据

通过loadData方法可以不需要url参数，加载JS对象数据 var callBack = function(reply) { var data = reply.getResult(); jQ('#schemaImportViewList').datagrid('loadData',data); }; Ajax.getSy().remoteCall('RptNewService', 'viewImportSql', [selections], callBack);

数据列的静态数据

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

图表 1界面展示

图表 2代码示例

Combobox（下拉框）

通过SELECT元素进行渲染，CLASS为“easyui-combobox” 1. 2. aitem1 3. bitem2 4. bitem3 5. ditem4 6. eitem5 7. 通过JS脚本创建，必须有个TABLE载体

1.

静态数据

标注CODE属性，可以自动加载静态数据，不需要配置URL

WINDOW(弹出界面)

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

1. 3. 4. 5. 6. The Content. 7. 8. 9. 通过JS脚本创建，必须有个DIV载体 1.

通过DIV元素进行渲染，CLASS为“easyui-tabs” 1. 2. 3. tab1 4. 5. 6. tab2 7. 8. 9. tab3 10. 11. 动态添加TAB

1. // add a new tab panel 2. $('#tt').tabs('add',{ 3. title:'New Tab', 4. content:'Tab Body', 5. closable:true, 6. tools:[{ 7. iconCls:'icon-mini-refresh', 8. handler:function(){ 9. alert('refresh'); 10. } 11. }] 12.});

LAYOUT(布局)

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

通过DIV元素进行渲染，CLASS为“easyui-layout” 1. 2. 3. 4. 5. 6. 7.

本文来源：https://www.bwwdw.com/article/1z5f.html