搜索
Jqueryflexigrid使用使用技术：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包：使用过程：Struts2jar只能用2.1.6,web.xml中配置：taglibtaglib-uristruts-tags/taglib-uritaglib-location/WEB-INF/lib/struts2-core-2.1.6.jar/taglib-location/taglib用struts2-core-2.0.14会报错：org.apache.jasper.JasperException:UnabletoinitializeTldLocationsCache:nullJsp页面：引入jquery、flexigrid插件文件以及test.js，body中编写：bodytableid=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});});条件筛选查询时使用的：Formid=“search”;查询按钮的id为dosearch:inputname=type=buttonclass=btn-search2value=查询id=dosearch/Flexigrid插件中getQuery属性对应页面上部“更多高级选项”处的“查询”，也是点击树形菜单“角色授权”执行过程是相同的。Manage_list.jsp中页面上部“更多高级选项”处的“查询”id=”dosearch”,在jquery.flexigrid.trace.js插件中$('#dosearch').click(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中:/*分页显示辅助函数*/functiongetQuery(){returngetJSONStr('search');}Js/util.js中的getJSONStr()函数是将form中的文本框input的name,value装入数组afunctiongetJSONStr(formId){vara=[];//文本框$(#+formId+input[type=text]).each(function(i){a.push({name:this.name,value:this.value});});点击角色列表中“授权查询”链接执行的tb_show(caption,url,imageGroup)在插件thickbox.js中定义，其中url中含有几个参数（KeepThis=true&TB_iframe=true等还有对话框大小设置）需要传入，此函数用来弹出一个对话框。Struts配置文件：初始显示flexgrid表格strutspackagename=roledutyextends=defaultnamespace=/flexjsonactionname=manage_servicetypeclass=example.flex.DefaultActionmethod=getPaginationparamname=queryNameroleduty/paramresultname=jsontype=jsonparamname=contentTypetext/json/paramparamname=excludeNullPropertiesfalse/paramparamname=rootpaginationJson/paramparamname=noCachetrue/param/resultresultname=errortype=jsonparamname=contentTypetext/json/paramparamname=excludeNullPropertiesfalse/paramparamname=rootjsonResult/paramparamname=noCachetrue/param/result。。。。。。。。。。。。。/package/struts对每条记录进行操作/***链接每条记录的增删改查**@paramvalue*@paramid*@return*/functionoperate(value,pid){returnahref='javascript:optView(+pid+);'查询/a+ahref='javascript:optEdit(+pid+)'编辑/a+ahref='javascript:optDelete(+pid+)'删除/a;}functionoptView(id){tb_show(这是查询操作,'flexigrid_SelectInitAction.action?model.id='+id+'&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true',false);}functionoptEdit(id){tb_show(这是编辑操作,'flexigrid_ModInitAction.action?model.id='+id+'&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true',false);}functionoptDelete(id){tb_show(这是删除操作,'flexigrid_DeleteInitAction.action?model.id='+id+'&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true',false);}数据及时更新插入数据后关闭弹出框，主页表格数据要及时刷新，对应于util.js的flexReload()方法：functionflexReload(){$(#grid).flexReload();}#grid与flexigrid在jsp页面的选择符对应。Jsp页面上按钮点击刷新父页面后关闭弹出框:inputname=type=buttonclass=btn-canelvalue=确定onclick=self.parent.flexReload();self.parent.tb_remove();/条件查询DefaultAction.java中getPaginatinon()方法中defaultForm.getQuery方法，对应FlexiPaginatinoForm.java，其中设置了几个参数，与jquery.flexigrid.trace.js第591行的param参数相同，可自行修改添加。json格式数据写入jsp后在flexigrid表格中显示Struts.xml配置：actionname=flexigridActionclass=flexigridGetAllStudentActionmethod=flexigridShowresultname=input/login.jsp/resultresultname=success/login_success.jsp/resultresultname=error/login_error.jsp/result/actionAction类FlexigridAction.java：publicStringflexigridShow(){StringinfoString=iStudentBO2.getAllStudent();log.info(studentstudentString:+infoString);ActionContext.getContext().getSession().put(stuListString,infoString);returnSUCCESS;}Bo类StudentBO2.java使用工具类将StudentList转换为json格式:publicStringgetAllStudent(){ListstudentList=iStudentDAO2.findAll();ToJsonTypetoJsonType=newToJsonType();Stringstring=toJsonType.ListToJsonString(studentList,newHashMap());if(studentList!=null){returnstring;}else{return;}}工具类：/***将list类型转变为json类型br*{rows:[{id:0,cell:[0,11