EASYUI框架说明.docx

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 dont 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 content.2. 用JS脚本来创建控件：$(#cc).combobox(url: .,required: true,valueField: id,textField: text);参考文档1) jquery.EasyUI-1.3.1 API.chm整合DWREASYUI默认采用URL加载JSON数据，通过改写每个控件的LOADER方法，实现DWR方法的调用。l 代码路径：WebContent/public/jquery/easyui/dwrloader.jsEASYUI使用规范Easyui是基于JQUERY开发的，首先必须通过JQUERY语法获取对象，然后再调用对应控件的方法，例子如下：jQ(#schemaImportViewList).datagrid(loadData,data);jQ(#schemaImportList).datagrid(options)jQ(#schemeImportReload).window(open);格式: Jquery对象.控件类型（方法名，参数可选）EASYUI扩展在easyui的基础上，补充一些默认属性、静态数据等扩展，以后可在此JS补充l 代码路径：WebContent/public/jquery/easyui/dwrEasyext.jsDATAGRID（数据列表）例子展示通过TABLE元素进行渲染，CLASS为“easyui-datagrid”,TH标签定义数据列表的表头1. 3. 4. 5. Code 6. Name 7. Price 8. 9. 10. 通过JS脚本创建，必须有个TABLE载体1. 1. $(#dg).datagrid( 2. url:datagrid_data.json, 3. columns: 4. field:code,title:Code,width:100, 5. field:name,title:Name,width:100, 6. field:price,title:Price,width:100,align:right 7. 8. ); 调用DWR类data-options=url: CRUDService.getPageList1. 在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. 1. $(#cc).combobox( 2. url:combobox_data.json, 3. valueField:id, 4. textField:text 5. ); 静态数据标注CODE属性，可以自动加载静态数据，不需要配置URLWINDOW(弹出界面)弹出界面不需要增加JSP/HTML页面，可以在原列表增加WINDOW控件；通过DIV元素进行渲染，CLASS为“easyui-window”1. 3. 4. 5. 6. The Content. 7. 8. 9. 通过JS脚本创建，必须有个DIV载体1. 1. $(#win).window( 2. width:600, 3. height:400, 4. modal:true 5. ); TAB（页签）通过DIV元素进行渲染，CLASS为“easyui-tabs”1. 2. 3. tab1 4. 5. 6. tab2 7. 8. 9. tab3 10. 11. 动态添加TAB1. / 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. hand