jquery+flexigrid使用方法_第1页
jquery+flexigrid使用方法_第2页
jquery+flexigrid使用方法_第3页
jquery+flexigrid使用方法_第4页
jquery+flexigrid使用方法_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、B-a-a-n耳-n-n层J,-JJJquery flexigrid 使用使用技术： struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql主要的 js 文件：jquery.js,flexigrid.js,query.js,thickbox.js,util.jsjqjery-1.3.2.min.isjquery-ui-1,7,2, custom, min. jqjery-Flexigrid. trace, js jquery. my Dialog, js pwg 已 J5 query, js testjs thickbox*co

2、mpressedfjs thickbox.js utiljs其中：util.js 是扩展flexigrid 的功能，如条件查询用到的getQuery属性。query.js 是自定义的flexigrid界面显示和函数触发文件。Jar 包： camnnorrs-attributes-conpilerjar 国 commons-codet. jar且3藁mebe-oomms土自nriotatissjar：spring-aap.jar5pring-e$pecWJ时jjantlr-2,7,6.jarlaopalliance.jar_*j asm-commans-Z. 2.3. jar -asnn-Lit

3、il-2.2.3.iar )aspect|lib.jar aspectjrt. jar J aspectjwearver.jar 国 c3pOD,9；2jar_*j)c3p0-0.9.1.iar凶 cglib-nodep-2 ,l_3.jarQ cornmons-dttributes-api. jar3comnntjns<cllectiori5-2.1,. l.jar凶 cammtjrts-dbcp.jar -conhmorts-fileupload.jar向 camrmorfi-httpdicntjar国 8mme)gi。, jar. commarrs-lanq.jar国 camrmo

4、ns-lagging*! .0.4. jar_5 conftmorts-hgging.|arCDrnmons-poaLjarconcurrerA-iHS.Z.jdrconnector, jar |_*donn4j-1.6.1. jar工)ehcache-l，2.3.jarJ后依-明仁话fnecnriarker-S.a.Gniar_fjfneemarker.jar-hibernate3.jar二hibernate-amotatlorts. jar -hibernabe-enfcityinanager.jar _J htiemate-validator. jar -JitMtis-7

5、7. jarjiText-2,0,7dar*| jaas.iar*'|jaccd Ofr.jar ij jasperreports-Z.O.S.jarjavassEt.jar j iaxen-i 4-beta-7, jar .J bo$5-archiYE-tirow5ingJar _jJ jbcss-cache Jar iboss-oommon. jar*Jjbo55*jmx.jar*Ji boss-system, jar& jconmZJar* I jConnectiar J jdbc2_0-stcfext, jarjgroups-2.2.a.jar iotm.jar少 g-

6、Z0080701 诃jsanplijgiri-0.34. jar * Ijta.jarjxl.jar-J Iog4j-l-2.il. jar& log41T 215, Jarmy sql-co nnertor-ja va-5.0.5-bin. jar_Jognb2.6.1 l,jar*Joscache-2.l.jar_*J persistence, jarpoJ-3.01 .jarjJportlet-api.jarjJ praxool-0 击,31 jar ij servlet-2.3, jar spring-agent, jar*> spring-beans >iar 向

7、spring-cart ext. jar5pfinq-core.iarjSpring-jdbc.jarspring-arm J-ar*； springomcat-weaver, jar_*jspring-tx.jar spring-web.jar spring-阊 ebrnvc Jar 9 5pring-web(nvic-pcirtlct. jar 回 spring-webrnvc struts jar jjj struts2-core'2,1.6.jar Jl 5trut52-5pring-plugin-2.1.6. jarstruts, j5rswarrricache-i .Orc

8、Z.jar dvekicit/-l15jar velocitz-tools-vie w-1.4. jar .J|xapool.jar3xerces-2.6.3,jar jjxv«rk-2,1.2Jar使用过程:中配置:Struts2 jar只能用 2.1.6,web.xml<taglib-uri<taglib >>struts-tags </ taglib-uri ><taglib-location>/WEB-INF/lib/struts2-core-2.1.6.jar</ taglib-location ></ ta

9、glib >用 struts2-core-2.0.14会报错:org.apache.jasper.JasperException: Unable to initialize TldLocationsCache: nullJsp页面:test.js,body中编写:引入jquery、flexigrid插件文件以及<body ><table id ="grid" ></ table > </ body >在js文件中使用flexigrid创建页面:$(document).ready(function () $( "

10、#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, so

11、rtable :truealign : 'left', display :'名，name : 'lastname' width :120,sortable :truealign : 'left', display :'操作name : 'opt' ,width :120, sortable :truealign : 'left' process :operate ,searchitems : display :'id'name : 'id' , isdefault :

12、true, display :'姓'，name : 'firstname' , isdefault :true, display :'名'，name : 'lastname' , isdefault :true, /右下方工具条按钮 buttons : name : 'Add', bclass : 'add' , displayname :'增力口 ，onpress :test, separator :true, name : 'Delete' , bclass : '

13、;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 :

14、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 ="butt

15、on" class ="btn-search2" value ="查询 id ="dosearch" />Flexigrid插件中getQuery属性对应页面上部"更多高级选项"处的"查询”,也是点击树形菜单“角色授权”执行过程是相同的。Manage_list.jsp中页面上部“更多高级选项"处的"查询"id= "dosearch",在jquery.flexigrid.trace.js 插件中$( '#dosearch' ).clic

16、k( function () g.doSearch(););而 doSearch()中使用 getQuery,而 getQuery 是 flexigrid 的一个属性： doSearch:function () /shoru添加查询扩展参数if (!p.getQuery) p.query= "" else p.query=p.getQuery();p.newp = 1;this .populate();Js/util.js 中：/*分页显示辅助函数*/function getQuery() return getJSONStr( 'search' );Js/u

17、til.js 中的getJSONStr()函数是将form 中的文本框input 的name,value 装入数组a function getJSONStr(formId) var a =; / 文本框 $( "#" + formId +" inputtype=text").each( function (i) a.push( name : this .name, value :this .value););强等笆理地址赞器战划管理踪看查询Bf贡或妖曾理后巴曾理,计分析分配中心管理胃型虽管理，加色甘理.电色网系属日志青方.乌岩管理CjNw痢色名加HStt

18、i父帚色名开通日0镰作r果箱开表和酬郎碰系统开战2010-01-09营*aa圈除r金哀哈建原烧营理汩全省盖烧井晚的的理溺螭匚3靠斯博作森晚曲作员曾至省系妮甘理2tm4-的堂若旃踢册除rILL报裹开发苴玉嫉摄作员相全省和miw返更坐r112报衷丰裱黄乐脆林员胆全省系新嚏2SL0-CH-K西蟠绘r1L3招蓑康作总国痂僚作同拒至省茶烧开发SOLO-Ofl-Ki»3W用池列表分配中心理T7鼠Elk* *F.丽. KdSRitA前色若黑» 色存基.军旗日七百理.幺曾再rHfllM阳If并厘日访r第咐专网8和丽t30m-Ml飒M弧1峭ri至看且好开堂要国网&班Sr3意做停第韭畔

19、Etfl.S.WM衡口讨词亮芨爱用一也生即rL31挥4出:!ill3Mm»rL3£较我力爱而丽植r1119生看.S.HJFJtamiHH-m，已*点击角色列表中“授权查询”链接执行的tb_show(caption,url,imageGroup)在插件 thickbox.js 中定义，其中 url 中含有几个参数 (KeepThis=true&TB_iframe=true等还有对话框大小设置)需要传入，此函数用来弹出一个对话框。Struts配置文件：初始显示 flexgrid表格< struts ><package name ="roled

20、uty" extends ="default" namespace ="/flexjson" ><action name ="manage_servicetype"class ="example.flex.DefaultAction"method ="getPagination" ><param name = "queryName">roleduty </ param ><result name ="json

21、" type ="json" ><param name ="contentType" >text/json </ param ><param name ="excludeNullProperties">false </ param ><param name ="root" >paginationJson </ param ><param name ="noCache" >true </ pa

22、ram ></ result ><result name ="error" type ="json" ><param name ="contentType" >text/json </ param ><param name ="excludeNullProperties">false </ param ><param name ="root" >jsonResult </ param ><

23、param name ="noCache" >true </ param ></ result ></ package ></ struts >对每条记录进行操作/*链接每条记录的增删改查* param value* param id* return*/function operate(value, pid) return "<a href='javascript:optView("+ "<a href='javascript:optEdit("+ &q

24、uot;<a href='javascript:optDelete("+ pid + pid + pid +");'>")'>查询</a> "编辑</a> "")'> 删除 </a>"function optView(id) tb show ("这是查tU操作",'flexigrid_SelectInitAction.action?model.id=' + id +'&KeepThi

25、s=true&TB_iframe=true&height=420&width=580&modal=true', false );function optEdit(id) tb_show("这是编辑操作"，'flexigrid_ModInitAction.action?model.id=' + id +'&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true' false );function op

26、tDelete(id) tb show("这是删除操作"，'flexigrid_DeleteInitAction.action?model.id=' + id +'&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true',false ); 数据及时更新插入数据后关闭弹出框，主页表格数据要及时刷新，对应于 util.js 的flexReload() 方法: function flexReload() $( "#grid"

27、; ).flexReload();#grid 与flexigrid 在jsp页面的选择符对应。Jsp页面上按钮点击刷新父页面后关闭弹出框：<input name ="" type ="button" class ="btn-canel" value ="确定" onclick ="self.parent.flexReload();self.parent.tb_remove();"/>条件查询DefaultAction.java中 getPaginatinon() 方法中 defaul

28、tForm.getQuery方法，对应 FlexiPaginatinoForm.java, 其 中 设置了 几 个参数， 上jquery.flexigrid.trace.js第591行的param 参数相同，可自行修改添加。json格式数据写入jsp后在flexigrid表格中显示Struts.xml 配置：<action name ="flexigridAction"class = "flexigridGetAllStudentAction"method ="flexigridShow" > <result nam

29、e ="input" >/login.jsp </ result > <result name ="success" >/login_success.jsp</ result ><result name ="error" >/login_error.jsp</ result ></ action >Action 类FlexigridAction.java : public String flexigridShow() String infoString=iS

30、tudentBO2 .getAllStudent();log .info( "student studentString: "+infoString);ActionContext. getContext ().getSession().put("stuListStringinfoString); return SUCCESS; Bo类StudentBO2.java使用工具类将 Student List转换为json格式： public String getAllStudent() List studentList =iStudentDAO2 .findAll();

31、ToJsonType toJsonType= new ToJsonType();newString string=toJsonType.ListToJsonString(studentList, HashMap();if (studentList !=null ) returnstring; else return "" 工具类:/*将list 类型转变为json类型<br>* "rows":"id":0,"cell":0,"11","11","id&q

32、uot;:1,"cell":1,"22","22" param studentList* param map* return* /public String ListToJsonString(List studentList, Map map) List mapList = new ArrayList();for ( int i = 0; i < studentList.size(); i+) Student s = (Student) studentList.get(i);Map cellMap = new LinkedHas

33、hMap();cellMap.put( "id" , s.getId();cellMap.put( "cell" , new Object s.getId(),s.getFirstname(),s.getLastname() );mapList.add(cellMap);map.put( "rows" , mapList);JSONObject jsonObject =new JSONObject(map);return jsonObject.toString();Dao类StudentDAO2.java 是用 Hibernate 生

34、成： public List findAll() log .debug( "finding all Student instances");try String queryString ="from Student" ;return getHibernateTemplate().find(queryString); catch (RuntimeException re) log .error( "find all failed", re);throw re; Action 执行成功后的跳转页面为 login_success.jsp,从

35、action 类中通过session获得已经转换为json 格式的字符串，将其显示在 jsp页面中，当flexigrid中的url指向flexigridAction.action时执行成功将会跳转到此jsp 页面，从而将数据在flexigrid表格中显示【注意：显示json数据的jsp页面中不能有其他标签如 <html>等，不然不能显示】：< % page language = "java" import ="java.util.*"pageEncoding ="UTF-8" %>< %page impo

36、rt ="com.opensymphony.xwork2.ActionContext"%>< % taglib uri ="/struts-tags"prefix ="s" %><%stuListStringStrings=(String)ActionContext.getContext().getSession().get()；response.getWriter().write(s);%>Struts2中数据转换为 Json格式Jar包：Jsonplugin.jar, jsonplugin.jarSt

37、ruts.xml:< package name ="flexigridJson"extends ="json-default" ><action name ="getAllStudentJsonAction"class ="getAllStudentJsonAction"method ="getAllStudetJson" ><result name ="jsonres" type ="json" ><param

38、name ="contentType" >text/json </ param ><param name ="root">studentList</ param ></ result ></ action ></ package >ApplicationContext.xml:<!- hibernate dao注入 service -><bean id ="studentBO2" class ="bo.StudentBO2&quo

39、t; ><property name ="IStudentDAO2"</ bean ><!- json -><bean id ="getAllStudentJsonAction"<property name ="IStudentBO2"</ bean >ref ="StudentDAO2" ></ property >class ="action.FlexigridAction" ref ="studentB

40、O2" ></ property >Action 类： private List studentList ; /get,set方法省略public String getAllStudetJson() / 通过 get,set 方法和 struts.xml 中配置 root studentList json 格式studentList = iStudentBO2 .getAllStudent();将list类型转换为return'jsonres'Flexigrid 的 js 中设置 url:$(document).ready(function () $

41、( ".flex2" ).flexigrid( / url :'jsp/query/json.json',/url :'flexigridAction.action',url: 'getAllStudentJsonAction.action' dataType : 'json' , colModel : display :'编号',name : 'id',width :60, sortable :true ,align : 'center'显不'结果：孝X

42、，一掂制台 HTML CS5 本 DOM 同拈清除保持概况 jQuerify -POST http:/localhost:80 1 /s2shi/getAllStudeotJsonAction.action 3130 OK 1.22sHeaders Post 响应 JSONLt f irETziame :j i * id 二羽 last name : rz j, 1 first riam e :人 i d 二七 la st name : 4 L t ti rstname : 网,i d*: 5, * 1 astname":“firstname":": 6-last

43、name": *6* Struts2返回Json类型，分页显示在flexigrid 表中然后在struts.xml中配置jsonvalue ="查询flexigrid能显示的类型为 Map ,在BO中加上rows,cell等属性, 类型，返回 map显示在flexigrid中。条件筛选查询时使用的：Form id="search "查询按钮的id为dosearch:<input name ="" type ="button" class ="btn-search2 id ="dosearc

44、h" />Struts.xml中配置json类型<!-使用json配置显示数据-><package name ="flexigridJson"extends ="json-default" ><action name ="getPaginationAction"class = "getPaginationActionmethod ="getPagination" > <result name ="jsonres" type =&

45、quot;json" > <param name = "root" >map</ param ></ result ></ action ></ package >applicationContext.xml中酉己置:DAO 注入 BO,BO 注入 ActionFormBean 类：public class StudentFormBean privateIntegerid ;privateStringfirstname;privateStringlastname;privateIntegertota

46、l ;/ 总记录数privateStringquery ;privateIntegerpage ; /, 当前第page页privateIntegerrp ; /每页记录数privateStringsortname;privateStringsortorder;/ 省略 get,set方法。o oAction 类：private Map map;/get,set方法省略/* 查询所有的student 表数据以及条件查询 * return* throws Exception*/public String getPagination()throws Exception try /将条件查询字段所组

47、成的json字符串拆解为Map类型String queryString =URLDecoder. decode ( studentFormBean.getQuery(),"UTF-8");log .info( studentFormBean .getQuery()+ "=studentFormBean.getQuery()");Map paramMap = new HashMap();/去掉开头结尾的if (queryString.startsWith("" ) queryString = queryString.substring(

48、1);if (queryString.endsWith("" ) queryString = queryString.substring(0, queryString.length() - 1);"(?<!)"+if (!queryString.equals("" ) String pairs = queryString.trim().split();String pair;for (String onePair : pairs) if (onePair.contains(pair = onePair.split(if (pai

49、r. length":" ) "(?<!):");=2 && pair0.trim().length() >&& pair1.trim().length() > 0) paramMap.put(pair0, pair1); else continue ;/ 将页面formBean 以及拆解后的字段 Map传给BO处理this . map = iStudentBO2 .getPagination( studentFormBean,paramMap );return "jsonres" ;

50、 catch (Exception e) throw new Exception(e);BO类:/* 将数据库查询出的 Student List转换为Map类型(这样可以通过 struts.xml 配置的 action* type="json" 使用 jsonplugin.jar包自动车换为 json 格式)* /public Map getPagination(StudentFormBean formBean, Map paramMap) List list = iStudentDAO2.getPagination(formBean, paramMap);List map

51、List = new ArrayList();Map map = new LinkedHashMap(); for ( int i = 0; i < list.size(); i+) Student s = (Student) list.get(i); Map cellMap = new LinkedHashMap();cellMap.put( "id" , s.getId();cellMap.put( "cell" , new Object s.getId(),s.getFirstname(),s.getLastname() );mapList.

52、add(cellMap);map.put( "page" , formBean.getPage();/ 从前台获取当前第 page 页map.put( "total" , iStudentDAO2 .count(); /从数据库获取总记录数map.put( "rows" , mapList);return map;DAO 类：/*查询数据库表总记录数*/public Long count() try String countString = "select count(*) from Student as s where 1

53、=1 "List list = getHibernateTemplate().find(countString);Iterator iter = list.iterator();Long count = 0L;while (iter.hasNext() count = (Long) iter.next();)log .info( "count:" + count);return count;catch (RuntimeException re) throw re;/*使用条件查询数据库，可以查询所有数据，也可按ID,firstname查询formBean, Map

54、 paramMap)*/public List getPagination(StudentFormBeanStringBuffer sb =new StringBuffer();sb.append( "from Student as s where 1=1");if (paramMap.get( "id" ) != null ) sb.append( " and s.id="+ Integer. parseInt (paramMap.get( "id" ).toString(); )if (paramMap.get

55、( "firstname" ) != null ) sb.append( " and s.firstname='"+ paramMap.get( "firstname" ).toString() +"'" );)Session session = getHibernateTemplate().getSessionFactory() .openSession();Query query = session.createQuery(sb.toString();query.setFirstResult(formBean.getPage() - 1) *formBean.getRp(); /从页面获取查询开始数据下标query.setMaxResults (formBean

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论