jquery flexigrid for java增删查改完整示例--前台
- 格式:docx
- 大小:23.06 KB
- 文档页数:16
java后台flex前台例子【篇一:java后台flex前台例子】第一次写教程:写的不够详细,请原谅,评论,在线回答,谢谢1 新建flex的项目工程叫jflogin2 下一步3 再下一步4 部署5 改server6 改builder flex,再确定7 右键项目,myeclipse addweb project8 creatweb.xml一定不要勾上9 部署添加项目到tomcat,并且打开tomcat服务10 显示项目,右键项目,runas flex application(或者浏览器)是否操作成功如上图就成功显示,如果出现404错误就安装自己实际情况重新配置上面5、6步骤就可以了下面比较简单先,就不截图了11 新建class login.javapackage com.test.login;public class login {public boolean loginusern(stringusername,string userpwd){ if(username.equals(qing) (userpwd.equals(qing))){returntrue;}else{returnfalse;}}}12 在项目的webroot web-inf flex remoting-config.xml下添加如下destinationid=userloginpropertiessource com.test.login.login /source/properties/destination13 在jflogin.mxml中修改为?xml version=1.0encoding=utf-8?mx:application xmlns:mx=layout=absolutecreationcomplete=initapp();fontsize=16mx:script![cdata[importmx.rpc.events.resultevent;importmx.rpc.events.faultevent;importmx.controls.alert;publicfunction initapp():void{btn.addeventlistener(mouseevent.click,shows);//监听btn按钮的触发事件}publicfunction shows(event:event):void{var username:string=uname.text;var userpwd:string=upass.text;newr.addeventlistener(faultevent.fault,err);newr.loginusern.addeventlistener(resultevent.result,secc); newr.loginusern(username,userpwd);}publicfunction err(event:faultevent):void{alert.show(event.message.tostring());}publicfunction secc(event:resultevent):void{var re:boolean = event.result;if(re==true){alert.show(哇晒,你太棒了,用户名和密码都正确,欢迎您进入!,正确);}else{alert.show(哇哈哈,你用户名密码都错误啊,我怎能给你进来啊!,错误);}}]]/mx:scriptmx:button x=156.5 y=152 label=验证用户名与密码id=btn/mx:label x=144 y=48 text=用户名:id=txt/mx:remoteobject id=newrdestination=userloginshowbusycursor=true /mx:textinput x=217 y=46id=uname/mx:label x=144 y=96 text=密码:id=txt0/mx:textinput x=217 y=94id=upass/mx:stringvalidator source={uname} maxlength=20minlength=3 property=text toolongerror=名字不能超过{0}个字母tooshorterror=名字不能少于{0}位 /mx:stringvalidator source={upass} maxlength=30minlength=3 property=text toolongerror=密码不能超过{0}个字母tooshorterror=密码不能少于{0}位 //mx:application14 重新部署tomcat,重新启动tomcat15 输入qing,qing时候,如果显示如下正确,就说成功简单连接java后台,其他更复杂的后台也可以这样去实现了。
Jquery flexigrid使用使用技术:struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql 主要的js文件:jquery.js,flexigrid.js,query.js,thickbox.js,util.js其中:util.js是扩展flexigrid的功能,如条件查询用到的getQuery属性。
query.js是自定义的flexigrid界面显示和函数触发文件。
Jar包:使用过程:Struts2 jar只能用 2.1.6,web.xml中配置:<taglib><taglib-uri>struts-tags</taglib-uri><taglib-location>/WEB-INF/lib/struts2-core-2.1.6.jar</taglib-loca tion></taglib>用struts2-core-2.0.14会报错:org.apache.jasper.JasperException: Unable to initialize TldLocationsCache: nullJsp页面:引入jquery、flexigrid插件文件以及test.js,body中编写:<body><table id="grid"></table></body>在js文件中使用flexigrid创建页面: $(document).ready( function() {$("#grid").flexigrid( {// url :'jsp/query/json.json',url : 'getPaginationAction.action',dataType :'json',colModel : [ {display :'编号',name :'id',width :60,sortable :true,align :'center'}, {display :'姓',name :'firstname',width :120,sortable :true,align :'left'}, {display :'名',name :'lastname',width :120,sortable :true,align :'left'}, {display :'操作',name :'opt',width :120,sortable :true,align :'left',process :operate} ],searchitems : [ {display :'id',name :'id',isdefault :true}, {display :'姓',name :'firstname',isdefault :true}, {display :'名',name :'lastname',isdefault :true} ],// 右下方工具条按钮buttons : [ {name :'Add',bclass :'add',displayname :'增加',onpress :test,separator :true}, {name :'Delete',bclass :'delete',displayname :'删除',onpress :test}, {name :'Modify',bclass :'modify',displayname :'修改',onpress :test} ],sortname :"id",sortorder :"asc",striped :true,usepager :true,resizable: true,title :'人员管理',useRp :true,total :10,rp :2,pagestat :'显示 {from} 到 {to} 条,共{total}条记录', procmsg :'加载中, 请稍等 ...',showTableToggleBtn :true,rpOptions : [ 2, 5, 10, 15, 20 ],// 可选择设定的每页结果数width :1000,height :300,getQuery :getQuery});});条件筛选查询时使用的:Form id=“search”;查询按钮的id为dosearch:<input name=""type="button"class="btn-search2"value="查询"id="dosearch"/>Flexigrid插件中getQuery属性对应页面上部“更多高级选项”处的“查询”,也是点击树形菜单“角色授权”执行过程是相同的。
jQuery增删改查⼀、查找1.jQuery三⼤特性1.⼀个函数两⽤没给新值,默认执⾏获取操作给了新值,变为执⾏修改操作如: .html() //获取内容.html(xxx) //修改内容为xxx2.⾃带遍历对jQuery对象调⽤⼀次简化版API,等效于对数组对象中每个元素都调⽤⼀次API3.⼏乎每个jQuery都返回正在使⽤的jQuery对象本⾝2.按选择器查找$(...)⽀持所有css选择器css中没有的,jquery添加的:1.内容过滤1.按包含的⽂本内容过滤:contains(text) 查找内容中包含指定text⽂本的元素2.按⼦元素特征过滤:has(selector) 查找内容中包含符合selector要求的⼦元素的⽗元素3.按是否包含内容来过滤:empty 空元素:parent ⾮空元素2.可见性过滤:hidden 只能选择两种情况的隐藏display:none input type=hidden:visible 是:hidden的反义3.状态过滤三⼤状态: :disabled :checked :selected4.表单元素过滤:input 选择所有四⼤类表单元素input button textarea selected:[type] 每种input都对应⼀种专门的选择器包括: :text :password :checkbox :radio ...当可以⽤css选择器时优先使⽤css选择器,因为效率⾼,jquery选择器都是⽤js程序模拟出来的3.按节点间关系⽗元素: .parent() => .parentNode直接⼦元素: .children() => .children查找⽗元素下符合条件的⼦元素:.children(["selector"]) 只能查找直接⼦元素.find("selector") 在所有后代中查找第⼀个⼦元素: .children().first() => .firstElementChild最后⼀个⼦元素: .children().last() => .lastElementChild前⼀个兄弟: .prev() => .previousElementSibling.prevAll() //前边所有的兄弟后⼀个兄弟: .next() => .nextElementSibling.nextAll() //后边所有的兄弟除我之外,所有兄弟: .siblings()⼆、修改(⼀个函数两⽤)1.内容.html() =>.innerHTML.text() => .textContent.val() => .value2.属性标准属性: .arr("属性名"[,值])状态属性: .prop("状态属性"[,bool])⾃定义扩展属性: .data("属性名"[,值])3.样式修改内联样式1.仅修改⼀个css属性.css("css属性名","值") => .style.css属性=值2.批量修改多个css属性.css({css属性名:值,... : ...})获取值.css("css属性名") =>getComputedStyle()获得计算后的样式4.⽤class批量修改样式为元素追加⼀个class: $(...).addClass("class名")为元素移除⼀个class: $(...).removeClass("class名")判断是否包含⼀个class: $(...).hasClass("class名")为元素切换⼀个class: $(...).toggleClass("class名")if($(...).hasClass("class名"))$(...).removeClass("class名")else$(...).addClass("class名")补充:.is("selector") 判断当前元素是否符合selector的条件5. .index()1. var i=$("selector").index(jq对象/DOM对象)查找右边的jq对象或DOM对象,在左边的结果集合中的下标位置2. 如果在同⼀个⽗元素下找某个⼦元素的位置var i=$("child").index();三、添加、删除、替换、克隆1.添加 1.⽤$()创建⼀个新元素: var $新元素=$("html⽚段")2.将新元素添加到dom树:$("parent").append($新元素).prepend($新元素)$("child").before($新元素).after($新元素)简化: $("parent").append/prepend("html⽚段")$("child").before/after("HTML⽚段")2.删除 $(...).remove()3.替换$("selector").replaceWith(jq对象|DOM对象)4.克隆克隆: var $clone_elem=$(...).clone()注意: 默认浅克隆(仅克隆样式和属性, 不克隆⾏为)深克隆(即克隆样式和属性,⼜克隆⾏为): $(...).clone(true)。
java前后端分离的增删改查项目Java前后端分离的增删改查项目随着互联网的快速发展,前后端分离的开发模式越来越受到开发者的青睐。
在这种模式下,前端负责展示页面和用户交互,后端负责业务逻辑和数据处理。
本文将介绍一个基于Java的前后端分离的增删改查项目,以帮助读者了解这种开发模式的具体实现。
一、项目概述本项目是一个简单的增删改查系统,用于管理用户信息。
前端使用Vue.js框架构建页面,后端使用Java编写接口。
前后端通过HTTP 协议进行通信,前端发送请求给后端,后端返回相应的数据。
项目的目标是实现用户信息的增加、删除、修改和查询功能。
二、前端开发前端使用Vue.js框架进行开发,利用其组件化和响应式的特性,可以更高效地构建页面。
首先,我们需要创建一个用户管理的页面,包括用户列表、新增用户、编辑用户和删除用户等功能。
1. 用户列表用户列表页面展示了系统中所有用户的信息,包括用户ID、姓名、年龄和性别等字段。
用户可以通过搜索框快速查找特定用户。
2. 新增用户新增用户页面提供了一个表单,用于输入用户的详细信息。
用户需要填写姓名、年龄和性别等字段,并点击提交按钮进行保存。
3. 编辑用户编辑用户页面与新增用户页面类似,但是需要预先加载用户的信息,并在表单中显示出来。
用户可以修改用户的任意字段,并点击提交按钮保存修改。
4. 删除用户删除用户功能通过点击列表中的删除按钮来实现。
在确认删除之前,系统会弹出一个提示框,确保用户的操作是有意义的。
三、后端开发后端使用Java编写接口,处理前端发送过来的请求,并返回相应的数据。
我们需要设计相应的接口,包括新增用户、删除用户、修改用户和查询用户等功能。
1. 新增用户接口新增用户接口接收前端传递过来的用户信息,将其保存到数据库中。
在保存之前,需要对用户信息进行校验,确保数据的有效性。
2. 删除用户接口删除用户接口接收前端传递过来的用户ID,通过该ID在数据库中找到对应的用户并进行删除操作。
一、引言JavaScript(简称JS)是一种脚本语言,主要用于网页开发。
AJAX (Asynchronous JavaScript And XML)是一种前端技术,可以实现网页的异步通信。
在前端开发中,经常会用到JS+AJAX来实现增删改查功能。
本文将介绍如何使用JS+AJAX来实现一个简单的增删改查案例。
二、实现思路1. 准备工作:创建一个HTML页面,包含一个表格用于显示数据,以及相应的按钮用于触发增删改查操作。
准备一个后端接口用于提供数据的增删改查功能。
2. 查询数据:使用AJAX向后端接口发送请求,获取数据并在页面上展示。
3. 增加数据:通过表单输入要新增的数据,使用AJAX将数据发送到后端接口进行新增操作。
4. 修改数据:点击表格中的某一行数据,将数据填充到表单中,修改后通过AJAX发送到后端接口进行修改。
5. 删除数据:点击表格中的删除按钮,使用AJAX发送请求到后端接口进行删除操作。
三、实现步骤1. 创建HTML页面```html<!DOCTYPE html><html><head><title>JS+AJAX实现增删改查案例</title></head><body><table id="data-table"><tr><th>ID</th><th>尊称</th><th>芳龄</th><th>操作</th></tr></table><form id="data-form"><input type="text" id="name" placeholder="尊称"><input type="text" id="age" placeholder="芳龄"><button type="button" onclick="addData()">增加</button> </form></body></html>```2. 查询数据```javascriptfunction fetchData() {var xhr = new XMLHttpRequest();xhr.open('GET', '/api/data', true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText);// 渲染数据到表格}};xhr.send();}```3. 增加数据```javascriptfunction addData() {var name = document.getElementById('name').value; var age = document.getElementById('age').value;var data = { name: name, age: age };var xhr = new XMLHttpRequest();xhr.open('POST', '/api/data', true);xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 提示增加成功}};xhr.send(JSON.stringify(data));}```4. 修改数据```javascriptfunction editData(id) {var name = // 从表格中获取数据填充到表单中var age = // 从表格中获取数据填充到表单中var data = { name: name, age: age };var xhr = new XMLHttpRequest();xhr.open('PUT', '/api/data/' + id, true);xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 提示修改成功}};xhr.send(JSON.stringify(data));}```5. 删除数据```javascriptfunction deleteData(id) {var xhr = new XMLHttpRequest();xhr.open('DELETE', '/api/data/' + id, true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 提示删除成功}};xhr.send();}```四、总结通过以上步骤,我们使用JS+AJAX实现了一个简单的增删改查案例。
java项目中的增删改查方法在Java项目中,增删改查(CRUD)操作是非常常见的需求。
无论是开发Web应用、移动应用还是后台系统,都会涉及到对数据的增加、删除、修改和查询操作。
在Java中,我们通常使用数据库来存储数据,而针对数据库的增删改查操作,我们通常会使用SQL语句来实现。
下面我们来看看在Java项目中,如何实现增删改查方法。
1. 增加(Create),在Java项目中,要实现数据的增加操作,通常需要先连接数据库,然后使用SQL语句向数据库中插入新的数据。
在Java中,我们可以使用JDBC(Java Database Connectivity)来连接数据库,使用PreparedStatement或者Statement来执行插入操作。
另外,如果我们使用了ORM框架(如Hibernate或MyBatis),我们也可以通过框架提供的API来实现数据的插入操作。
2. 删除(Delete),删除数据操作通常是根据某个条件从数据库中删除符合条件的数据。
在Java项目中,我们可以使用SQL的DELETE语句来实现数据的删除操作。
同样地,我们可以使用JDBC或者ORM框架提供的API来执行删除操作。
3. 修改(Update),修改数据操作通常是根据某个条件更新数据库中的数据。
在Java项目中,我们可以使用SQL的UPDATE语句来实现数据的更新操作。
同样地,我们可以使用JDBC或者ORM框架提供的API来执行更新操作。
4. 查询(Retrieve),查询数据操作是从数据库中检索数据。
在Java项目中,我们可以使用SQL的SELECT语句来实现数据的查询操作。
同样地,我们可以使用JDBC或者ORM框架提供的API来执行查询操作,并将查询结果返回给Java应用程序。
总的来说,在Java项目中实现增删改查方法,我们通常会使用JDBC来连接数据库并执行SQL语句,或者使用ORM框架来简化数据库操作。
无论是使用JDBC还是ORM框架,都需要对数据库操作有一定的了解,以便能够编写出高效、安全的增删改查方法。
JQuery 插件FlexiGrid 之完全配置与使用首先.去下载FlexGrid /下载完成后.解压开有__MACOSX和flexigrid两个文件夹主要使用flexigrid里面的文件flexgrid文件夹下文件如下..准备工作完成后真正工作开始了在MyEclipse下新建Web project..把flexigrid包下所有的文件拷贝到WebRoot/下新建*.jsp页面body体中加入Jsp代码1.<table id="flex1" style="display:none"></table>做完flexigrid控件的显示容器. 没有则不会显示控件页面引入控件代码Javascript代码1.<table id="flex1" style="display:none"></table>2. <input id="hidden" type="hidden" name="hidden" value="null" />3. <script>4. $("#flex1").flexigrid5. (6. {7. url: '../ReleaseInfoServlet?hidden=manage',8. dataType: 'json',10. {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center', hide: false},11. {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'cent er'},12. {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'ce nter'},13. {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'ce nter'},14. <!--{display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'ce nter'},-->15. {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'cente r'},16. {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'cent er'}17. ],18. buttons : [19. {name: '添加', bclass: 'add', onpress : button},20. {name: '删除', bclass: 'delete', onpress : button},21. {name: '修改', bclass: 'modify', onpress : button},22. {separator: true}23. ],24. searchitems : [25. {display: '信息编号', name : 'RINO', isdefault: true},26. {display: '信息标题', name : 'RITITLE'},27. {display: '信息类别', name : 'IC.ICNAME'},28. {display: '发布作者', name : 'RIAUTHOR'}29. ],30. sortname: "RINO",31. sortorder: "desc",32. usepager: true,33. title: '信息发布管理',35. rp: 20,36. showTableToggleBtn: true,37. width: 780,38. height: 30039. }40. );41.42. function button(com,grid)43. {44. if (com=='删除')45. {46. ${"hidden"}.value="delete";47. if($('.trSelected',grid).length==0){48. alert("请选择要删除的数据");49. }else{50. if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))51. {52. var id ="";53. for(var i=0;i<$('.trSelected',grid).length;i++){54. if(i==$('.trSelected',grid).length-1){55. id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();56. } else {57. id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";58. }59. }60. window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;61. }62. }63. }64. else if (com=='添加')65. {66. ${"hidden"}.value="add";67. window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;68. }69. else if (com=='修改')70. {71. ${"hidden"}.value="modify";72. if($(".trSelected").length==1){73. window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").e q(0).text();74. }else if($(".trSelected").length>1){75. alert("请选择一个修改,不能同时修改多个");76. }else if($(".trSelected").length==0){77. alert("请选择一个您要修改的新闻信息")78. }79. }80. }flexgrid参数介绍:Javascript代码1.height: 200, //flexigrid插件的高度,单位为px2.width: ‘auto’, //宽度值,auto表示根据每列的宽度自动计算3.striped: true, //是否显示斑纹效果,默认是奇偶交互的形式4.novstripe: false,5.minwidth: 30, //列的最小宽度6.minheight: 80, //列的最小高度7.resizable: true, //是否可伸缩8.url: false, //ajax方式对应的url地址9.method: ‘POST’, // 数据发送方式10.dataType: ‘xml’, // 数据加载的类型11.errormsg: ‘Connection Error’,//错误提升信息epager: false, //是否分页13.nowrap: true, //是否不换行14.page: 1, //默认当前页15.total: 1, //总页面数eRp: true, //是否可以动态设置每页显示的结果数17.rp: 15, // 每页默认的结果数18.rpOptions: [10,15,20,25,40],//可选择设定的每页结果数19.title: false,//是否包含标题20.pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式21.procmsg: ‘Processing, please wait …’,//正在处理的提示信息22.query: ”,//搜索查询的条件23.qtype: ”,//搜索查询的类别24.nomsg: ‘No items’,//无结果的提示信息25.minColToggle: 1, //minimum allowed column to be hidden26.showToggleBtn: true, //show or hide column toggle popup27.hideOnSubmit: true,//隐藏提交28.autoload: true,//自动加载29.blockOpacity: 0.5,//透明度设置30.onToggleCol: false,//当在行之间转换时31.onChangeSort: false,//当改变排序时32.onSuccess: false,//成功后执行33.onSubmit: false // 调用自定义的计算函数注意:Head标签必须要引入Jsp代码1.<link rel="stylesheet" href="css/flexigrid/flexigrid.css"2. type="text/css"></link>3.<script type="text/javascript" src="lib/jquery/jquery.js"></script>4.<script type="text/javascript" src="js/flexigrid.js"></script>jquery.js、flexigrid.css、flexigrid.js三个主要文件自己要根据自己的文件路径.去引入css\js文件页面完成启动tomcat测试页面会不会显示控件.应该是没有问题的,只是没有数据主要的还是后台的操作这里由于时间关系只介绍select方法了.可以看到flex无刷新的路径是一个servlet.看看servlet做了些什么?Java代码1.response.setContentType("text/html;charset=UTF-8");2.ReleaseInfoDao rid = new ReleaseInfoDao();3.String hidden = request.getParameter("hidden");4.PrintWriter out = response.getWriter();首先接收路径传过来的hidden值.因为后面我会根据hidden值做各种操作.所以url重写了一些字段.大家可以不用如此.Java代码1.if(hidden.equals("manage")){2.// 获得当前页数3. String pageIndex = request.getParameter("page");4.// 获得每页数据最大量5. String pageSize = request.getParameter("rp");6.// 获得模糊查询文本输入框的值7. String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");8.// 获得模糊查询条件9. String qtype = request.getParameter("qtype");10. if(query==""||("").equals(query)){11. Map pageInfo = new HashMap();12. pageInfo.put("page", pageIndex);13. pageInfo.put("total", rid.getReleaseInfoCount());14.// 数据JSON格式化15. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageS ize)), pageInfo);16.// response相关处理17. response.setContentType("html/txt");18. response.setCharacterEncoding("utf-8");19. response.setHeader("Pragma", "no-cache");20. response.setHeader("Cache-Control", "no-cache,must-revalidate");21. response.setHeader("Pragma", "no-cache");22. try {23. response.getWriter().write(jsonStr);24. response.getWriter().flush();25. response.getWriter().close();26. } catch (IOException e) {27. e.printStackTrace();28. }29. }else{30. Map pageInfo = new HashMap();31. pageInfo.put("page", pageIndex);32. pageInfo.put("total", rid.getReleaseInfoCountLike(qtype, query));33.// 数据JSON格式化34. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfoLike(Integer.parseInt(pageIndex), Integer.parseInt(p ageSize), qtype, query), pageInfo);35.// response相关处理36. response.setContentType("html/txt");37. response.setCharacterEncoding("utf-8");38. response.setHeader("Pragma", "no-cache");39. response.setHeader("Cache-Control", "no-cache,must-revalidate");40. response.setHeader("Pragma", "no-cache");41. try {42. response.getWriter().write(jsonStr);43. response.getWriter().flush();44. response.getWriter().close();45. } catch (IOException e) {46. e.printStackTrace();47. }48. }49. }可以看到许多request.getParameter("***");是后去flexigrid控件的一些参数.大家可以到flexigrid.js文件里面看到这些参数.page//获取当前的页数.rp//每页显示多少行数据Javascript代码1.rp: 20,query//点击放大镜出现搜索功能,是Input文本框的值qtype//是搜索功能后面的select的值根据query的操作判断是模糊查询还是全部查询数据.Servlet全部代码看完了.看看.Dao层的数据层的代码吧.主要引用Dao的代码如下主要代码1.Java代码1.pageInfo.put("total", rid.getReleaseInfoCount());2.String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo) ;rid为ReleaseInfoDao的实例对象(发布信息表)首先我们来看getReleaseInfoCount()方法Java代码1./**2. * 获得信息表所有的数据量,3. * 并返回数据个数4. * @return5. */6. public long getReleaseInfoCount(){7. long count =0l;8. QueryRunner queryRunner = new QueryRunner();9. String query = "select count(*) as num from TB_ReleaseInfo";10. try {11. Map map = (Map)queryRunner.query(DBConnection.getConnection(), query, new MapHandler());12. count = Long.parseLong(map.get("num").toString());13. } catch (SQLException e) {14. e.printStackTrace();15. } finally {16. DBConnection.close();17. }18. return count;19. }主要代码2.Java代码1.String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);这里看到返回的是json格式的数据主要Dao层方法为creReleaseInfoJSON();getReleaseInfo(int pageIndex,int pageSize);方法getReleaseInfo代码如下Java代码1./**2. * 分页查询3. * @param pageIndex4. * @param pageSize5. * @return6. */7. public List getReleaseInfo(int pageIndex,int pageSize){8. List releaseInfoList = new ArrayList();9. int beginIndex = (pageIndex-1)*pageSize;10. int endIndex = pageIndex*pageSize;11. QueryRunner queryRunner = new QueryRunner();12. String query = "select * from (" +13. "select rownum rn,rino,rititle,ritype,icname,rihotpoint,ricontent,ridate,riauthor " +14. "from (" +15. "select ri.rino,ri.rititle,ri.ritype,ic.icname,ri.rihotpoint,ri.ricontent,ri.ridate,ri.riauthor" +16. " from TB_ReleaseInfo ri ,TB_InfoCategroy ic where ri.ritype = ic.icno " +17. "order by ri.rino desc) where rownum<=?) wherern>?";18. try {19. releaseInfoList = (List)queryRunner.query(DBConnection.getConnection(), query,new Object[]{new Integer(endIndex),n ew Integer(beginIndex)},new MapListHandler());20. } catch (SQLException e) {21. e.printStackTrace();22. } finally {23. DBConnection.close();24. }25. return releaseInfoList;26. }上述方法的SQL为Oracle的分页查询.MS SQL、MySql等.其他数据库不适用. creReleaseInfoJSON代码如下:Java代码1./**2. * 数据JSON格式化3. * @param list4. * @param pageInfo5. * @return6. */7. public String creReleaseInfoJSON(List list,Map pageInfo){8. String jsonStr = "";9. List mapList = new ArrayList();10. for(int i=0;i<list.size();i++){11. Map cellMap = new HashMap();12. cellMap.put("id", ((Map)list.get(i)).get("RINo").toString());13. cellMap.put("cell", new Object[]{14. ((Map)list.get(i)).get("RINo"),15. ((Map)list.get(i)).get("RITitle"),16. ((Map)list.get(i)).get("ICName"),17. ((Map)list.get(i)).get("RIHotpoint"),18. ((Map)list.get(i)).get("RIDATE"),19. ((Map)list.get(i)).get("RIAuthor")20. });21. mapList.add(cellMap);22. }23. pageInfo.put("rows", mapList);24. JSONObject object = new JSONObject(pageInfo);25. jsonStr = object.toString();26. return jsonStr;27. }返回的JSON格式的数据:Java代码1.jsonStr{"total":3,"page":"1","rows":[{"id":"8","cell":[8,"啊啊","什么玩意","否","2009-06-24 14:30:11","admin"]},{"id":"7","cell":[7,"来挑心底1","媒体声音","是","2009-06-24 14:29:55","admin"]},{"id":"3","cell":[3,"新茶品","最热新闻","否","2009-06-24 13:55:00","admin"]}]}引用地址:/blog/414611。
java项目中的增删改查方法在Java项目中,增删改查(CRUD)方法是非常常见和重要的。
这些方法用于对数据库中的数据进行操作,是任何应用程序的核心功能之一。
在本文中,我们将讨论Java项目中的增删改查方法的实现和最佳实践。
1. 增加(Create)数据。
在Java项目中,创建数据通常涉及将用户输入或其他来源的数据插入到数据库中。
为了实现这一点,我们通常会使用SQL INSERT语句或ORM(对象关系映射)框架(如Hibernate)来执行插入操作。
在使用ORM框架的情况下,我们可以通过创建实体对象并将其持久化到数据库中来实现数据的创建操作。
2. 删除(Delete)数据。
删除数据是指从数据库中移除特定记录或数据集。
在Java项目中,我们可以使用SQL DELETE语句或ORM框架提供的方法来执行删除操作。
在使用ORM框架时,通常会调用实体对象的删除方法来删除数据库中的记录。
3. 修改(Update)数据。
修改数据是指更新数据库中现有记录的内容。
在Java项目中,我们可以使用SQL UPDATE语句或ORM框架提供的方法来执行更新操作。
如果使用ORM框架,我们可以通过修改实体对象的属性并将其持久化到数据库中来实现数据的修改操作。
4. 查询(Retrieve)数据。
查询数据是指从数据库中检索特定记录或数据集。
在Java项目中,我们可以使用SQL SELECT语句或ORM框架提供的方法来执行查询操作。
如果使用ORM框架,我们通常会调用相应的查询方法来检索数据库中的数据。
在实现增删改查方法时,我们应该注意以下最佳实践:使用预编译语句或参数化查询来防止SQL注入攻击。
对数据库操作进行事务管理,以确保数据的一致性和完整性。
使用适当的索引和优化数据库查询,以提高性能。
对于ORM框架,应该了解并遵循框架的最佳实践和性能优化建议。
总之,增删改查方法是任何Java项目中不可或缺的部分。
通过遵循最佳实践和使用合适的工具和技术,我们可以有效地实现这些方法并确保应用程序的数据操作功能的稳健性和性能。
前端 js 增删改查原理Javascript是网页前端开发所必需的一种语言,而在实际的网页开发中,增删改查操作也是非常常见的。
下面将围绕“前端 js 增删改查原理”进行阐述。
一、增加操作增加操作是指向网页中添加新的元素或节点,常见的方式有两种:innerHTML和document.createElement。
1. 使用innerHTMLinnerHTML是一种向网页中添加HTML代码的方式,可以轻松地添加新的HTML标签,例如div、p、ul、li等等。
以下是使用innerHTML 添加一个 div 元素的示例:var newDiv = document.createElement("div");newDiv.innerHTML = "这是新添加的一个div元素";document.body.appendChild(newDiv);2. 使用document.createElement使用document.createElement可以先创建一个新的元素,再将其添加到网页中。
以下是使用document.createElement添加一个 p 元素的示例:var newPara = document.createElement("p");var paraText = document.createTextNode("这是新添加的一个p元素");newPara.appendChild(paraText);document.body.appendChild(newPara);二、删除操作删除操作是指在网页中删除特定的元素或节点。
常见的方式有两种:innerHTML和removeChild。
1. 使用innerHTML内置的innerHTML可以轻松地清空一个元素中的所有内容。
以下是使用innerHTML清空一个 div 元素的示例:var myDiv = document.getElementById("myDiv");myDiv.innerHTML = "";2. 使用removeChild使用removeChild方法可以从文档中删除指定的子节点。
没有时间整一个只带flexigrid插件的示例,有时间了,再好好给整理出来,在这个前台里,增删查改全部都在这个页面操作了,采用DIV弹窗的方式,这种方式写前台代码有点头疼,以后再改进改进,把页面分开比较好.前台页面代码:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="" prefix="FCK" %><%String path = request.getContextPath();%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" type="text/css" href="<%=path %>/skins/blue/css/public.css" /><link type="text/css" rel="stylesheet"href="<%=path %>/skins/blue/css/jquerydivbox.css" /><link rel="stylesheet" type="text/css"href="<%=path %>/skins/blue/css/flexigrid/flexigrid.css" /><script type="text/javascript"src="<%=path %>/skins/blue/common/jquery/jquery.js"></script><script type="text/javascript"src="<%=path %>/skins/blue/common/jquery/flexigrid.js"></script><script type="text/javascript"src="<%=path %>/skins/blue/common/jquery/jquery-ui-personalized.js"></script><script type="text/javascript"src="<%=path %>/skins/blue/common/jquery/jquery.blockUI.js"></script><script type="text/javascript"src="<%=path %>/skins/blue/common/calendar/wdatePicker.js"></script><script type="text/javascript"src="<%=path %>/skins/blue/common/jquery/jquery.bgiframe.js"></script><script type="text/javascript"src="<%=path %>/skins/blue/js/jquerydivbox.js"></script><script type="text/javascript" src="<%=path %>/fckeditor/fckeditor.js"></script></head><body><!-- 查询区开始--><form id="sform"><table width="100%" class="searchTable"><tr><td class="searchTdTitle" colspan="6">论文库管理</td></tr><tr><td class="searchTdText">题名</td><td class="searchTdInput"><input type="text" name="papTitle" id="papTitle" /></td><td class="searchTdText">副标题</td><td class="searchTdInput"><input type="text" name="papTitleS" id="papTitleS" /></td><td class="searchTdText">作者</td><td class="searchTdInput"><input type="text" name="papAuthor"id="papAuthor" /></td></tr><tr><td class="searchTdText">关键词</td><td class="searchTdInput"><input type="text" name="papKeyword"id="papKeyword" /></td><td class="searchTdText">摘要</td><td class="searchTdInput"><input type="text" name="papAbstract"id="papAbstract" /></td><td class="searchTdText">作者单位</td><td class="searchTdInput"><input type="text" name="papDepart"id="papDepart" /></td></tr><tr><td class="searchTdButton" colspan="6"><input type="submit"class="wsbutton" value="查 询"onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'"></td></tr></table></form><!-- 查询区结束--><!-- 列表区开始--><table id="datalist" style="display: none"></table><script type="text/javascript">$("#datalist").flexigrid({colModel : [{display: '序号', name : 'id', width : 50, sortable : false, align: 'left'},{display: '题名', name : 'papTitle', width : 150, sortable : true, align: 'left'},{display: '作者', name : 'papAuthor', width : 100, sortable : true, align: 'left'},{display: '期刊', name : 'papJourney', width : 100, sortable : true, align: 'left'},{display: '发表日期', name : 'papPubtime', width : $(window).width()-462, sortable : true, align: 'left'}],buttons : [{name :'添加',bclass:'add',onpress:action},{name :'修改',bclass:'edit',onpress:action},{name :'删除',bclass:'delete',onpress:action},{separator : true}],url: '<%=path%>/blPaper.do?action=findByAll',method:'POST',//数据传送模式dataType :'json',//回传数据的类型,可以为xml和jsonsortname :"papTitle",//预设指定哪列进行排序sortorder :"desc",//预设排序的方式usepager :true,//是否启用分页器title :'论文库列表',//标题useRp :true,//使用分页大小选择器rp :10,//resultsperpage,预设的分页大小striped:true,//奇偶行颜色相互交叉,不设置默认为true showTableToggleBtn :true,//显示或关闭隐藏栏位的开启器width: 'auto',height :278,//表格高度(注意不能使用100%之类的字符串)resizable:false,//是否可调整列表窗口大小,不设置默认为trueonSubmit :addFormData,//数据提交时调用的自定义函数nowrap:true,//是否重叠,true为不启用重叠,flase为启用重叠procmsg:'资料读取中,请稍后......',//读取时的信息pagestat:'显示从{from}到{to}条数据,共有{total}条数据',//分页器的显示信息nomsg:'打不到符合条件的数据'//没有数据时的信息});function addFormData() {var dt = $('#sform').serializeArray();$("#datalist").flexOptions( {params :dt});return true;}$('#sform').submit( function() {$('#datalist').flexOptions( {newp :1}).flexReload();return false;});//新增,修改,删除操作function action(com, grid) {if (com=='删除') {if ($(".trSelected").length > 0) {if (confirm('是否删除' + $('.trSelected', grid).length + ' 条记录吗?')) {var id = "";for (var i = 0; i < $('.trSelected', grid).length; i++) {if(i<$('.trSelected', grid).length-1){id += "id=" + $('.trSelected').eq(i).attr('id').substring(3) + "&";}else if(i==$('.trSelected', grid).length-1){id += "id=" + $('.trSelected').eq(i).attr('id').substring(3);}}$.blockUI({ message: '<div class="showMsg">正在删除中,请稍等....</div>' });$.get("<%=path%>/blPaper.do?action=delete&" + id, function(data, status, Request){$(".showMsg").html(data);})}} else {alert("请选择某行删除!");}} else if (com=='添加') {//新增弹窗操作$.jquerydivboxs.open('#addbox',{width:800,height:450,title:'论文添加'});} else if (com=='修改') {//修改弹窗操作if($('.trSelected', grid).length==1){var id='0';for (var i = 0; i < $('.trSelected', grid).length; i++) {id=$('.trSelected').eq(i).attr('id').substring(3)}var url="<%=path%>/blPaper.do?action=findById&id="+id;$.getJSON(url,function(data){$("#papIdEdit").attr("value", data.papId);$("#papTitleEdit").attr("value", data.papTitle);$("#papTitleSEdit").attr("value", data.papTitleS);if(data.papTop==1){$('input[name=papTopEdit]').get(0).checked = true;}else if(data.papTop==0){$('input[name=papTopEdit]').get(1).checked = true;}if(data.papPublish==1){$('input[name=papPublishEdit]').get(0).checked = true;}else if(data.papPublish==0){$('input[name=papPublishEdit]').get(1).checked = true;}if(data.papDownload==1){$('input[name=papDownloadEdit]').get(0).checked = true;}else if(data.papDownload==0){$('input[name=papDownloadEdit]').get(1).checked = true;}FCKeditorAPI.GetInstance('papTextEdit').SetHTML(data.papText);});$.jquerydivboxs.open('#editbox',{width:800,height:450,title:'论文修改'});}else{alert("请只选择一行!");}}}//新增操作function insertAction(){var papTitle=$("#papTitleAdd").val();var papTitleS=$("#papTitleSAdd").val();varpapText=FCKeditorAPI.GetInstance("papTextAdd").EditorDocument.body.innerHTML;var papTop=$("input[name='papTopAdd']:checked").val();var papPublish=$("input[name='papPublishAdd']:checked").val();var papDownload=$("input[name='papDownloadAdd']:checked").val();var sendData="papTitle="+encodeURIComponent(papTitle)+"&papTitleS="+encodeURIComponent(papTitleS);sendData=sendData+"&papAuthor="+encodeURIComponent(papAuthor)+"&papAut horF="+encodeURIComponent(papAuthorF);sendData=sendData+"&papDepart="+encodeURIComponent(papDepart)+"&papKe yword="+encodeURIComponent(papKeyword);sendData=sendData+"&papAbstract="+encodeURIComponent(papAbstract)+"&pap Pubtime="+encodeURIComponent(papPubtime);sendData=sendData+"&papVolum="+encodeURIComponent(papVolum)+"&papJou rney="+encodeURIComponent(papJourney);sendData=sendData+"&papPages="+encodeURIComponent(papPages)+"&papSup port="+encodeURIComponent(papSupport);encodeURIComponent(papTop);sendData=sendData+"&papPublish="+encodeURIComponent(papPublish)+"&papD ownload="+encodeURIComponent(papDownload);$.blockUI({ message: "<div class='showMsg'>数据添加中,请稍后...</div> "});$.ajax({url: "<%=path%>/blPaper.do?action=add",type:'post', //数据发送方式dataType:'html', //接受数据格式data: sendData ,success: function(data){ $(".showMsg").html(data); }});}//修改操作function updateAction(){var papId=$("#papIdEdit").val();var papAddman=$("#papAddmanEdit").val();var papAddtime=$('#papAddtimeEdit').val();var papTitle=$("#papTitleEdit").val();var papTitleS=$("#papTitleSEdit").val();varpapText=FCKeditorAPI.GetInstance("papTextEdit").EditorDocument.body.innerHTML;var papTop=$("input[name='papTopEdit']:checked").val();var papPublish=$("input[name='papPublishEdit']:checked").val();var papDownload=$("input[name='papDownloadEdit']:checked").val();var sendData="papId="+ encodeURIComponent(papId)+"&papTitle="+ encodeURIComponent(papTitle)+"&papTitleS="+encodeURIComponent(papTitleS);sendData=sendData+"&papAuthor="+encodeURIComponent(papAuthor)+"&papAut horF="+encodeURIComponent(papAuthorF);sendData=sendData+"&papDepart="+encodeURIComponent(papDepart)+"&papKe yword="+encodeURIComponent(papKeyword);Pubtime="+encodeURIComponent(papPubtime);sendData=sendData+"&papVolum="+encodeURIComponent(papVolum)+"&papJou rney="+encodeURIComponent(papJourney);sendData=sendData+"&papPages="+encodeURIComponent(papPages)+"&papSup port="+encodeURIComponent(papSupport);sendData=sendData+"&papText="+encodeURIComponent(papText)+"&papTop="+ encodeURIComponent(papTop);sendData=sendData+"&papPublish="+encodeURIComponent(papPublish)+"&papD ownload="+encodeURIComponent(papDownload);sendData=sendData+"&papAddman="+encodeURIComponent(papAddman)+"&pap Addtime="+encodeURIComponent(papAddtime);$.blockUI({ message: "<div class='showMsg'>数据修改中,请稍后...</div> "});$.ajax({url: "<%=path%>/blPaper.do?action=update",type:'post', //数据发送方式dataType:'html', //接受数据格式data: sendData ,success: function(data){ $(".showMsg").html(data); }});}//打开详细页面function openDetail(id){$('#detailshow').empty();$.jquerydivboxs.open('#detailbox',{width:800,height:450,title:'论文详情'});var url="<%=path%>/blPaper.do?action=findById&id="+id;$.getJSON(url,function(data){var papTop="";var papPublish="";var papDownload="";if(data.papTop==1){papTop="是";}else if(data.papTop==0){papTop="否";}if(data.papPublish==1){papPublish="是";}else if(data.papPublish==0){papPublish="否";}if(data.papDownload==1){papDownload="是";}else if(data.papDownload==0){papDownload="否";}var html='<div class="newsShow">';html+='<table class="divTable" align="center">';html+=' <tr>';html+=' <td class="divLeftTd">题名</td>';html+=' <td colspan="3" class="divRightTd">'+data.papTitle+'</td>'; html+=' </tr>';html+=' <tr>';html+=' <td class="divLeftTd">副标题</td>';html+=' <td colspan="3" class="divRightTd">'+data.papTitleS+'</td>'; html+=' </tr>';html+=' <tr>';html+=' <td class="divLeftTd">全文</td>';html+=' <td colspan="3" class="divRightTd">'+data.papText+'</td>';html+=' </tr>';html+=' <tr>';html+=' <td class="divLeftTd">全文附件</td>';html+=' <td colspan="3" class="divRightTd"></td>';html+=' </tr>';html+=' <tr>';html+=' <td class="divLeftTd">置顶</td>';html+=' <td class="divRightTd">'+papTop+'</td>';html+=' <td class="divLeftTd">是否发布</td>';html+=' <td class="divRightTd">'+papPublish+'</td>';html+=' </tr>';html+=' <tr>';html+=' <td class="divLeftTd">是否允许下载</td>';html+=' <td class="divRightTd">'+papDownload+'</td>';html+=' <td class="divLeftTd"> </td>';html+=' <td class="divRightTd"> </td>';html+=' </tr>';html+='</table>';html+='</div>';$('#newsShow').append($(html));});}</script><!-- 列表区结束--><!--新增页面DIV窗口开始--><div id="addbox" style="display:none"><form method="post"><table class="divTable" align="center"><tr><td class="divTdText">题名</td><td class="divTdInput" colspan="3"><input type="text" name="papTitleAdd"id="papTitleAdd" style="width:536px;" /></td></tr><tr><td class="divTdText">副标题</td><td class="divTdInput" colspan="3"><input type="text" name="papTitleSAdd" id="papTitleSAdd" style="width:536px;" /></td></tr><tr><td class="divTdText">作者</td><td class="divTdInput"><input type="text" name="papAuthorAdd"id="papAuthorAdd" /></td><td class="divTdText">第一作者</td><td class="divTdInput"><input type="text" name="papAuthorFAdd"id="papAuthorFAdd" /></td></tr><tr><td class="divTdText">全文</td><td class="divTdInput" colspan="3"><FCK:editor instanceName="papTextAdd"><jsp:attribute name="value"></jsp:attribute></FCK:editor></td></tr><tr><td class="divTdText">全文附件</td><td class="divTdInput" colspan="3"><input type="button" class="wsbutton" value="附件上传" onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'"onclick="$.jquerydivboxs.open('#fileupload',{width:600,height:200,title:'附件上传'});"></td></tr><tr><td class="divTdText">是否置顶</td><td class="divTdInput">是<input class="radioInput" name="papTopAdd"type="radio" value="1" />否<input class="radioInput" name="papTopAdd" type="radio" value="0" checked /></td><td class="divTdText">是否发布</td><td class="divTdInput">是<input class="radioInput" name="papPublishAdd" type="radio" value="1" checked />否<input class="radioInput" name="papPublishAdd" type="radio" value="0" /></td></tr><tr><td class="divTdText">是否允许下载</td><td class="divTdInput">是<input class="radioInput" name="papDownloadAdd" type="radio" value="1" checked />否<input class="radioInput" name="papDownloadAdd" type="radio" value="0" /></td><td class="divTdText"></td><td class="divTdInput"></td></tr><tr><td class="divTdButton" align="center" colspan="4"><input type="button" class="dialog-ok" value="保 存" onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'" onClick="insertAction()"><input type="button" class="dialog-cancel" value="取 消" onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'"></td></tr></table></form></div><!--新增页面DIV窗口结束--><!--修改页面DIV窗口开始--><div id="editbox" style="display:none"><form method="post"><input type="hidden" name="papIdEdit" id="papIdEdit" /><input type="hidden" name="papAddmanEdit" id="papAddmanEdit" /><input type="hidden" name="papAddtimeEdit" id="papAddtimeEdit" /><table class="divTable" align="center"><tr><td class="divTdText">题名</td><td class="divTdInput" colspan="3"><input type="text" name="papTitleEdit"id="papTitleEdit" style="width:536px;" /></td></tr><tr><td class="divTdText">副标题</td><td class="divTdInput" colspan="3"><input type="text" name="papTitleSEdit" id="papTitleSEdit" style="width:536px;" /></td></tr><tr><td class="divTdText">全文</td><td class="divTdInput" colspan="3"><FCK:editor instanceName="papTextEdit"><jsp:attribute name="value"></jsp:attribute></FCK:editor></td></tr><tr><td class="divTdText">全文附件</td><td class="divTdInput" colspan="3"><input type="button" class="wsbutton" value="附件上传" onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'"onclick="$.jquerydivboxs.open('#fileupload',{width:600,height:200,title:'附件上传'});"></td></tr><tr><td class="divTdText">是否置顶</td><td class="divTdInput">是<input class="radioInput" name="papTopEdit"type="radio" value="1" />否<input class="radioInput" name="papTopEdit" type="radio" value="0" /></td><td class="divTdText">是否发布</td><td class="divTdInput">是<input class="radioInput" name="papPublishEdit" type="radio" value="1" />否<input class="radioInput" name="papPublishEdit" type="radio" value="0" /></td></tr><tr><td class="divTdText">是否允许下载</td><td class="divTdInput">是<input class="radioInput" name="papDownloadEdit" type="radio" value="1" />否<input class="radioInput" name="papDownloadEdit"type="radio" value="0" /></td><td class="divTdText"></td><td class="divTdInput"></td></tr><tr><td class="divTdButton" align="center" colspan="4"><input type="button" class="dialog-ok" value="保 存" onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'" onClick="updateAction()"><input type="button" class="dialog-cancel" value="取 消" onMouseOver="this.className='wsbutton_hover'"onMouseOut="this.className='wsbutton'"></td></tr></table></form></div><!--修改页面DIV窗口结束--><!--详细页面DIV窗口开始--><div id="detailbox" style="display:none"><div id="newsShow"></div></div><!--详细页面DIV窗口结束--></body></html>后台代码示例,有时间再整出来,这段前台代码里面有的不是flexigrid的,是弹窗DIV和TAB的,可以当个参考,以后有时间了,再把整个前台和后台的代码都发出来。