实用第一 智慧密集 基于 EasyUIdatagrid 的Web前后端数据交换的实现 谷洪彬 (髓锦职 技术学院,辽 j:艇锦124000) 摘 要:很多Wel}应用系统需要数据显示、添加、更新和删除功能,早期的实现是前端用H FM1A:SS 表格展示,后端用程序语言直接操作后台数据表,这种实现方案是比较简单直接,但是实现效率不高, 美观程度和用户友好性也不好 为了解决这个问题,很多前端框架应运而生,iQueryEasyUI就是其中一 种,通过把数据封装为JSON格式实现了开发效率和用户友好性的前端框架 讨论了数据封装为JSON 格式时对数据表的添加、更新、删除和显示的前端和后端的具体实现 关键词:iQuelTEasyUI框架;用户友好性;Web前后端数据交换 l 概述 很多Wel 应刚系统 要数据 爪、添加、更新和 <th data—options:”field: attribute1 ,width:200,editor: textbox ’>属性</{h> <th data-options:‘‘field: zhuangtai ,width:80,align: 删除功能,早期的实现是 端川HTML/CSS表格展示, 端川 序语言直接操作后台数据表,这种实现方案是 比较简 直接,但是实现效率小高,美观程度和用户友 性也不好、为了解决这些『f1J题,很多f订端框架应运而 ,right ’>状态</th> </tr> <Ahead> </table> <div id=”tb“style=‘‘height:auto“> jQueryEas)。UI就是其巾一种通过把数据封装为 JS()N格式实现了开发效牢和川户友好性的前端框架 . ft-{#实现时,数据封装为JSON格式,然后对数据表进 行添加、型新、删除并 永 前端和后端 、 <a href=“jaVascript:Void(0)“class=”easyui—link—button” data—options=’‘iconCls: icon—save .plain:true”onClick=。’ accept()”>存储</a> <a href=“jaVascript:v0id(0)”class= easyui—link—but— ton“data—options=“iconCIs: icon—remove plain:true” 2 EasyUhtatagrid显示数据 数据 示 面}扫两部分组成:f: 是ta}1le 示的 onClick=”removeit0”>删掉</a> 数据,下 是cliv 示的数 添加、更新干Il删除按钮. <table id=”datagrid“class=“easyui—datagrid”title=“ <ahref=”jaVascript:V0id(0)”class=”easyui—link_button” data—options=“iconCls: icon—add ,plain:true“onClick=” DataGrid的行编辑”style=“w_dth:800p×:height:au data—ODtjOns=“ iconCIs: icon—edit , singleSelect:true, toolbar: #tb url: datagrid_append()“>增)J:ll</a> </div> 3 EasyUhtatagrid添加数据 添_力II数据嘤做的足在点击“添加”按钮 .data— data1 json method: get ,onCtickCell:onClickCel lonEndEdit:onEndEdit“><thead> —g ’id增』JIJ 行: <script type=“text/javascript。 > function append(){ if(endEditing0){ ¥( #dg2,).datagrid( appendRow ,{status: P,)): editlndex=¥( #dg2 datagrid( getRows,).1ength一1: var row=¥( #dg2,)_datagrid( selectRow ,editlndex) datagrid( beginEdit ,editlndex); ) , <tr><th data—options=”field: itemid ,width:1 00”> Item ID</th> <th data—options=”field: product Id .width:80“>Prod— uct</th> <th data—options=。‘field: price ,width:l 00,align: center editor:{type: numberbox ,options:{precjsion:1))”>价格</ th> <th data—options=“field: percost ,width:80,align: cen— —ter ,editor: numberbox >单价</th> 收稿日期:2017—08—20 电脑埔翟技巧与耋砖雏 |护、一- 数据库与信息管理 ) </scri pt> if(row.1ength==O){alert( 请选择数据行!,)=return false) 4 EasyUldatagrid更新数据 前端需 判断足甭某仃数据傲点击和修改,var ids=[】: 同时包 var provinces=[]; 折接受数据修改的代码: <script type=‘。text/javascript。‘> va rediting—index=undefined; functionendEd_ting()( if(editing—index==undefined){return true) if(¥( #dgl ).datagrid( vatidateRow ,editing—index)){ ¥( #dgl ).datagrid( endEdit editing—index); editing index=undefined; return true; )else{ return false; ) ) funct ononCf ckCe『I(indexO,field)f if(editing~indeM:indexO){ if(endEditing0){ ¥( #dgl ).datagrid( selectRow .index0) .datagrid( beginEdit ,indexO); vared=¥《 #dgl ).datagrid('getEditor .{index:in—dex0,field:field}); if(ed)f 《¥(ed.target).data('textbox )7¥(ed.ta rget).textbox 《 textbox ¥(ed.target)).focus(); ) editing index=indexO; )else{ setTimeout(function0{ ¥( #dgl ).datagrid( selectRow .editlndex); ),O): ) } ) functiOnOnEndEdit《index0,row){ var edl=¥(this).datagrid( getEditor ,{ index:indexO, field: 一id )): } function accept(){ if(endEditing0){ var row=¥( #dg2 ).datagrid( getChanges ): var cities=]]; var industries=]]; var others=[]; va r purposes=]]; for(var i=0:i<row.1ength;i++){ if(typeof(row[i].jd)==“undefined”) { id=O; } else { id=row[i].id; ——) ids.push(id); provinces.push(row[i].province); cities.push(row[i].city); industries.push(row[i].industry); others.push(row[i].other); purposes.push(row[i].purpose); } ¥.ajax({url: update record.php ,type: POST ,data:{ll ids”:ids.join( , ),“proVinces“:provinces.join( , ),"cities。 : cities.join ),”industries“:industries.join( , ),”others“:oth— ers.join( , ),”purposes”:purposes.join( , ),<?php echo product_id”: ¥_GET['product—id . phase ¥GET f phase 】 >) complete:function(xhr){ ) }): parent.1ocation.reload(); ) ) </script> 5 EasyUIda/agrid删除数据 <script type=‘ text/javascript”> functionremoveit0{ 汗(editlndex==undefined)(return} vat row=¥( #dg2,)_datagrid( getSelections,)= if(row.1ength==0){alert( 请选择数据行! return faIse} id=row[0].——id; ¥.ajax({url: delete—record.php ,type: POST ,da一 (下转第6O页) 47 ●_ ’ ‘ ’ - 实用第一.. -智慧密集 ● ●●,● - - ● ●●● , 的心Itj (2) }Jf就址十殳 能较差的仔储系统卜存取数掀,进而速度过 J 校 『舣J的仃储系统 陔 行较女 的可川性 IIJ的心』l J 校 网的, 宽、存储空『:}j】的容 具体的表现为数据共享和仔取频度的加快 校 网叶l 慢影响系统的 川 服务、服务器、存储技术等的发展趋势足较少的符珲人 员管删数量 多、更复杂的没备,流世 应川系统 j存 储系统史=怏捷的流动,线.I:干¨线下的数据存储的需求定 义_r校冈网的存储.影响J,校 网的发 和建设. 和r i性 饺旧网的 fi行应该注意效率优先问题 具体 f J 1埘J 的 』t J歼销成【 匕 存储的容错, 需求要保证 J、 川 仃取数 ft、f.尼』 址 fff错的l{If候, 佯¨T以扶 5结语 校阔网幢j1j需求的持续增『J【I埘数据存储提…r新的 取完 的数据 、数据存储的_1『舷性通常足通过冗余存储 的厅 术 成 数抓的 余存储需要{呆 数据副本干¨源 数扔 的・敛性 、 (3)数 储必须要号虑能耗不11性价比的问题 通 要求 .优免的校冈网存储方案并不是单独购买硬件存储 设备.各院校需要从r1身现有硬件和软件资源叶,提取潜 ,选择适合的存储力‘式,最大限度提升埘现有设备的 利J}j率,提商资源的_|『川性币『1效率优先 、从技术角度… 发,全面号虑心“j需求变化,埘校阔网存储发腱趋势 作¨{预测,整合现有校 网存储资源 、对校 pb4仔储 来说.新技术的选择意味荷资金的投入和管 要求的 提升..成熟的技术或许落仇,仇满足 际需求才是最匿 嘤的。 参考文献 t J ,- f 仃储的能牦币¨投资的下降 存储规模密切卡【1 火,一 化仃储成小的降低必须依靠规模效心 从长19】的 『f】度米行,仃储成小的趋势足 缓慢下降 低成小存储 策略址校 数搬仔储系统建没的 委原则之一 总体 求行,绿色仃储、低能牦、高速是存储系统建设的主要 力‘ 『J!叟的父键.. !j!lJ干¨技术Jf=3势之问找剑平衡是存储系统成 …蒋维成,乍 英,郭维树,杨忠.校 网存佛办案 研究『J1.信息技术,20l7,(7):96—98. 总体术i』}=,数 仃fIf}需要从I,I身实际¨1发,按需投 资、按 建 ,佼 网应川的增长、Jl}】 数址的增多. 12I汤义好.校 网云存储开放平 的}i}汁….内汀 帅范学院学报 2017,32(6):43—48. 儿““ “ 儿j止4上-j止 止儿j止 止 止 止儿j止“. 网络4i : 的改 JJJ1怏r数据产:生、存收和增长的速度, j止j-Lj j- j止 止j止 j止 止 止 “j七儿 止j-L 止j止 止 ““(上接第47页) ta: id= +id,complete:function(xhr){ 提升,这些 成小也是{f{if-Itl'j': t!t1一篇i 『nJ题, 端 (select,insert, 代 没仃列 ,只是最简单的SQI update,delete) alert( 操作完成! ) =) )): 参考文献(References): ¥( #dg2,)ldatagrid( cancelEdit ,editingindex) —…朱鹏,郭亚莎. _r EasyUI 架的1)atagrid数 操作的力‘ .datagrid( deleteRow ,editingindex); —现….电子nt界,2017,5:l65—166. Editingindex=undefined; I2l杨旭光. 于EasyUhlatagrid 现数 ) </script> 法…J.计算机光蕊软件1 训tJ,2012,22:27—29. 李林蔚.EasyUl ASP.N E 【1 MVC下的扩腱实肌…. 内 利.技,2017,2:56—57. 严杰.淡EasyUl 代服务 端 件 现 端Web 6结语 软什J :rI I勺J…’ 友女 性干Il功能卜1】样甄要 、如今川 友 .Web 川 发-『1越来越得到承视.促进_r 歼发的解决力 案lJ1.信息系统I .20l4 l2:23_24. tavaS(-r|I1l币I IJava/st-ri 框架的发腱 这些}【 l架的 一【51代威,茕运成. 下jQueryEasyU| sI)ring MVC 定l『lJ 成小,也会JMf ̄]各种各样的问题,初次开发也 架的信息臀理系统r{动提爪的设汁‘0 现….信 息 ‘j【乜腑(理论版),2…6,13:33—34. 会延I 发进 ,fl 址系统的川I,I’,友好性得剑J 极大的 6【】 电脑缡程技巧与雏护 -; 电脑缡技巧与雏訇20171程.2