【word优秀论文】jqueryeasyui的分析与应用

JQUERYEASYUI的分析与应用摘要EASYUI是一个简单易用功能强大的WEB前端JAVASCRIPT框架，是一组基于JQUERY的UI插件集合。它为WEB开发打造出功能丰富并且美观的UI界面。本文以实际项目“天润生产管理系统”中EASYUI异步TREE、DATAGRID组件的使用进行分析讨论。一、EASYUI技术介绍EASYUI是一套基于JQUERY框架上开发的AJAX开发框架，是一个优秀的跨浏览器的JAVASCRIPT框架，可以使得开发人员更能方便的处理HTML中DOCUMENTS、EVENTS属性事件，丰富的页面显示效果，为网站提供AJAX交互，增强页面操作的直观性，它提供了大量丰富实用的页面组件，比如菜单、窗口，目录树、数据显示表格等。通过它可帮助WEB开发者更轻松的打造出功能丰富并且美观的UI界面，开发者不需要编写复杂的JAVASCRIPT，也不需要对CSS样式有深入的了解，就可以开发出比较实用而又直观的界面出来，该框架具有以下一些特性1简洁、快速、轻量级的JAVASCRIPT库，其代码非常小巧2支持CSS1CSS3以及基本的XPATH3代码开源，可根据不同需求进行扩展。5跨浏览器的AJAX解决方式，支持的浏览器包括IE60以上，FF15以上，SAFARI20以上，OPERA90以上二、异步TREE应用一异步TREE分析EASYUI异步TREE组件采用JSON数据格式数据作为数据源。对树节点进行动态操作时，树节点在页面上显示的操作过程与树节点的数据写入到服务器是同时进行的，并且这两个过程是独立运行，互不干扰的，在WEB客户端与服务器进行交互时还可以保持页面状态。本文在针对传统的ASPNETTREE控件功能特性和不足之处进行分析后，对EASYUI异步TREE组件在设计上考虑的更多，不仅添加了操作功能设计，还可以支持多种形式的树形模式，比如目录项的单选和多选等，从而强化了目录树的功能以及它的灵活性。二异步TREE实现1数据初始化树形初始化时首先服务器要实现的一个核心功能就是提供JSON数据模型，通过它来统一封装数据并输出客户端。其中JSON数据的结构、构建、输出是重要的实现。11JSON数据结构JSON结构和NET里面的DICTIONARY、HASHTABLE（KEY、VALUE）结构类似，都是以“名称/值”的集合。名称是字符串类型，值支持简单数据类型（STRING、NUMBER、TRUE、FALSE、NULL）、对象和数组，并且支持嵌套和包含。在JSON中，字符串需要用双引号或单引号括起来，转义字符用/转义，单个对象是用括起来的，多个对象之间用逗号分开。并在外层用括起来（也就是对象数组）。VARUSERNAME“JHON“,USERAGE28,PARENTRELATIONSHIP“MOTHER“,AGE49,RELATIONSHIP“FATHER“,AGE50；VARJHONEVALUSER/相当于JHONNEWUSER上面就是一个简单的JSON例子，此段JSON数据看作一个对象（也可以是一个类，因为它已经包含了属性和方法），就是定义了一个用户名叫JHON的用户，并定义了他的年龄及父母，并且从上面也可以看到，JAVASCRIPT可以直接解析JSON格式数据，调用属性及方法。12JSON数据构建建立一个JQUERYOUTJQUERY类，将指定的字符串、数据组、集合等数据通过映射成JSON的格式文本数据。实现代码示例图2将集合映射为JSON格式文本。TABLETOJSON方法接收传参过来的集合，通过将集合遍历存储到键值对字典DICTIONARY中，调用JAVASCRIPTSERIALIZER类中SERIALIZE方法序列化集合为JSON数据格式。图113JSON数据输出JSON数据输出是指将一个普通的符合JSON语法格式的字符串发送到客户端的浏览器上，然后页面可以通过AJAX的接口访问到该数据。服务器端的JSON数据模型实现后，通过EASYUI的TREE插件URL属性指定数据请求地址或者通过AJAX异步调用返回数据来加载这些数据，具体实现代码如下1、使用URL指定请求地址绑定2、使用AJAX异步获取绑定。在“天润系统”生产管理模块中“安全培训计划”功能模块采用AJAX异步获取数据绑定TREE方式。图1图2效果2功能的详解EASYUI的TREE插件主要功能为增加、修改、删除、拖动以及复选框模型、表格模型。实现方式是客户端通过JAVASCRIPT脚本对TREE节点的控制；服务器端通过调用AJAX异步调用后台与数据库交互。下面是操作客户端部分具有代表的实现代码参考说明21TREE节点增加VARNODETTTREEGETSELECTED/获得选中节点对象IFNODE/创建新增节点对象VARNODES“ID“13,“TEXT“新增节点1“,“ID“14,“TEXT“新增节点2“/绑定新增到TREE上TTTREEAPPEND,PARENTNODETARGET,DATANODES22TREE节点修改VARNODETTTREEGETSELECTED/获得选中节点对象IFNODETTTREEUPDATE,TARGETNODETARGET,TEXT修改节点文本23TREE节点删除VARNODETTTREEGETSELECTED/获得选中节点对象IFNODETTTREEREMOVE,TARGETNODETARGET,TEXT修改节点文本24TREE节点拖动对TREE赋值ONDROP事件如下TARGETDOM对象,这个节点是被放置的目标SOURCE源节点POINT指明DROP操作,可用值有APPEND,TOPORBOTTOMONDROPFUNCTIONTARGET,SOURCE,POINTVARTARGETIDTARGETTREEGETNODE,TARGETNODEID/服务器端与数据库交互处理AJAXURL指向服务器端处理类,TYPEPOST,DATATYPEJSON,DATAIDSOURCEID,TARGETIDTARGETID,POINTPOINT,SUCCESSFUNCTIONDATA/结果成功操作,ERRORFUNCTIONERR/结果失败操作25复选框TREE模型通过GETCHECKED方法获得选中的树形节点。VARNODETTTREEGETSELECTED/获得所有选中节点对象26TREE表格模型TREEGRID组件继承DATAGRID一些属性特性，但是在TREEGRID行之间允许一个PARENT/CHILD节点关系存在。使用TREEGRID用户必须定义TREEFIELD属性这个指明哪些字段作为TREE节点。NAMESIZEMODIFIEDDATE三、DATAGRID应用一DATAGRID分析EASYUIDATAGRID是一款使用JQUERY开发的轻量级表格组件。与ASPNET表格控件相比，EASYUIDATAGRIDT提供了更多的功能支持，并且客户端和服务端操作是独立分开，互不干扰，用户在WEB客户端与服务器进行交互时还可以保持页面状态。DATAGRID是以列表形式显示数据，支持排序、分组、编辑、分页、列拖拽、列冻结、表头自定义等功能。二DATAGRID实现1数据初始化DATAGRID绑定数据源分为两种方式使用ASP等后台语言直接产生HTML语法来显示DATAGRID，当要对该DATAGRID操作时，在传递参数到后端，重新产生整个网页。利用AJAX技术调用后台JSON类模型输出JSON格式参考异步TREEJSON结构数据给前端，前端接收到JSON格式数据后，再分析并处理数据，然后利用JQUERY刷新该DATAGRID，实现数据的呈现更新，如下图。图DATAGRID数据处理流程这两种方法中第二种方法结构相对独立清晰，且前后端分离处理，增加了设计的灵活性。利用AJAX技术的把资料层控制层展示层三层独立来运作，以至于前端的UI是可以更换，而后台程式却不用来大幅修改。如果采用第一种方法把HTML的产生都放在ASP中来产生，造成ASP开发人员本身，也要对HTML等前端技术也要了解很深才能进行开发的问题,同时还会影响性能。绑定数据代码及图1如下/获取数据绑定DATAGRIDAJAXTYPE“POST“,URL“/PUBLIC/GETGRIDDATAASHX“,CONTENTTYPE“APPLICATION/JSONCHARSETUTF8“,DATATYPE“JSON“,SUCCESSFUNCTIONDATAIFDATA“UNDEFINED“DATAGRID“DATAGRIDURLDATA,WIDTH700,HEIGHT300,COLUMNSFIELDFGSBM,TITLE分公司,WIDTH60,ALIGNCENTER,ROWSPAN3,FIELDFDCBM,TITLE风电场,WIDTH60,ALIGNCENTER,ROWSPAN3,FIELDACCIDENTAREA,TITLE事故发生区域,WIDTH60,ALIGNCENTER,ROWSPAN3,FIELDACCIDENTTYPE,TITLE事故类型,WIDTH60,ALIGNCENTER,ROWSPAN3,FIELDTBR,TITLE填报人,WIDTH60,ALIGNCENTER,ROWSPAN3,FIELDTBSJ,TITLE填报时间,WIDTH60,ALIGNCENTER,ROWSPAN3,ERRORFUNCTIONERRALERTERRTOSTRING图12功能详解EASYUIDATAGRID表格包含操作功能很多，下面以分页、添加查询功能、扩展表格行内编辑器、表格列运算为主要功能详细介绍，其它功能不在一一详细介绍。21分页组件TTDATAGRIDWIDTH“100“,HEIGHT600,NOWRAPTRUE,AUTOROWHEIGHTTRUE,STRIPEDTRUE,COLLAPSIBLETRUE,PAGINATIONTRUE,/是否显示分页工具栏PAGENUMBER1,/初始页PAGESIZE25,/每页显示的条数SINGLESELECTFALSE,LOADMSG“正在努力加载，请稍等“,COLUMNS/需要显示的列22添加查询功能FUNCTIONTTDATAGRIDWIDTH“100“,HEIGHT500,NOWRAPTRUE,AUTOROWHEIGHTTRUE,STRIPEDTRUE,COLLAPSIBLETRUE,PAGINATIONTRUE,ROWNUMBERSTRUE,SINGLESELECTFALSE,LOADMSG“正在努力加载，请稍等“,COLUMNS/此处设置列,/添加查询栏ONHEADERCONTEXTMENUFUNCTIONE,FIELDEPREVENTDEFAULTIFTMENULENGTHCREATECOLUMNMENU“TT“TMENUMENUSHOW,LEFTEPAGEX,TOPEPAGEY24扩展表格行内编辑器HTML代码应用JQUERYEXTENDFNDATAGRIDDEFAULTSEDITORS,NUMBERSPINNERINITFUNCTIONCONTAINER,OPTIONSVARINPUTAPPENDTOCONTAINERRETURNINPUTNUMBERSPINNEROPTIONS,DESTROYFUNCTIONTARGETTARGETNUMBERSPINNERDESTROY,GETVALUEFUNCTIONTARGETRETURNTARGETNUMBERSPINNERGETVALUE,SETVALUEFUNCTIONTARGET,VALUETARGETNUMBERSPINNERSETVALUE,VALUE,RESIZEFUNCTIONTARGET,WIDTHTARGETNUMBERSPINNERRESIZE,WIDTH25表格列运算HTML代码应用JQUERYVARLASTINDEXTTDATAGRIDONCLICKROWFUNCTIONROWINDEXIFLASTINDEXROWINDEXTTDATAGRIDENDEDIT,LASTINDEXTTDATAGRIDBEGINEDIT,ROWINDEXSETEDITINGROWINDEXLASTINDEXROWINDEX四、结束语本文通过异步TREE和DATAGRID的实现过程展示了EASYUI框架功能特性以及在页面上的使用方法，从应用中可以