《EASYUI框架说明.docxVIP

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 plete framework for HTML5 web page.easyui save your time and scales while developing your products.easyui is very easy but powerful.EASYUI具备两种方式为我们的界面提供支持：使用HTML的原生标签来声明控件：div class=easyui-dialog style=width:400px;height:200pxdata-options=title:My Dialog,collapsible:true,iconCls:icon-ok,onOpen:function(){}dialog content./div用JS脚本来创建控件：input id=cc style=width:200px /$(#cc).combobox({url: ...,required: true,valueField: id,textField: text});参考文档jquery.EasyUI-1.3.1 API.chm整合DWREASYUI默认采用URL加载JSON数据，通过改写每个控件的LOADER方法，实现DWR方法的调用。代码路径：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补充代码路径：WebContent/public/jquery/easyui/dwrEasyext.jsDATAGRID（数据列表）例子展示通过TABLE元素进行渲染，CLASS为“easyui-datagrid”,TH标签定义数据列表的表头table class=easyui-datagrid style=width:400px;height:250px data-options=url:datagrid_data.json,fitColumns:true,singleSelect:true thead tr th data-options=field:code,width:100Code/th th data-options=field:name,width:100Name/th th data-options=field:price,width:100,align:rightPrice/th /tr /thead /table 通过JS脚本创建，必须有个TABLE载体table id=dg/table $(#dg).datagrid({ url:datagrid_data.json, columns:[[ {field:code,title:Code,width:100}, {field:name,title:Name,width:100}, {field:price,title:Price,width:100,align:right} ]] }); 调用DWR类data-options=url: CRUDService.getPageList在dataGrid的url参数中写上： “服务器名.方法名”getPageList方法入参只有一个：“MAP PARAEMS”分页查询时，PARAMS中的参数rows为每页显示的调试，page是第几页结果可返回java.util.Lis