jquery flexigrid动态加载数据

郑云飞 · 发表于 2013-1-26 13:37:19

<%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><%String path = request.getContextPath();String basepath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><link rel="stylesheet" type="text/css"href="<%=basepath%>admin/flexigrid/css/flexigrid_gray.css"><link rel="stylesheet" type="text/css"href="<%=basepath%>admin/flexigrid/jqModal/css/jqModal_gray.css"><script type="text/javascript" src="<%=basepath%>admin/flexigrid/jquery-1.3.2.min.js"></script><script type="text/javascript" src="<%=basepath%>admin/flexigrid/flexigrid.js"></script><script type="text/javascript" src="<%=basepath%>admin/flexigrid/jqModal/dimensions.js"></script><script type="text/javascript" src="<%=basepath%>admin/flexigrid/jqModal/jqDnR.js"></script><script type="text/javascript" src="<%=basepath%>admin/flexigrid/jqModal/jqModal.js"></script><link rel="stylesheet" type="text/css" href="<%=basepath%>admin/Zhuanjia/calendar/GooCalendar.css"/><script type="text/javascript" src="<%=basepath%>admin/Zhuanjia/calendar/GooFunc.js"></script><script type="text/javascript" src="<%=basepath%>admin/Zhuanjia/calendar/GooCalendar.js"></script><link rel="stylesheet" type="text/css" href="<%=basepath %>admin/test/css/easyui.css"/><script type="text/javascript" src="<%=basepath %>admin/test/js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text/css" href="<%=basepath %>admin/test/css/icon.css"/><script type="text/javascript">function search(){ var start=$('#start').val(); var end=$('#end').val(); window.location.href="<%=basepath%>flexczchuzhenAction?start="+start+"&end="+end;}</script><script type="text/javascript">var property2={divId:"demo2",//日历控件最外层DIV的IDneedTime:true,//是否需要显示精确到秒的时间选择器，即输出时间中是否需要精确到小时：分：秒默认为FALSE可不填yearRange:[1970,2030],//可选年份的范围,数组第一个为开始年份，第二个为结束年份,如[1970,2030],可不填week:['Su','Mo','Tu','We','Th','Fr','Sa'],//数组，设定了周日至周六的显示格式,可不填month:['January','February','March','April','May','June','July','August','September','October','November','December'],//数组，设定了12个月份的显示格式,可不填format:"yyyy-MM-dd hh:mm:ss"};$(document).ready(function(){canva1=$.createGooCalendar("start",property2);canva2=$.createGooCalendar("end",property2);});</script></head><body><div style="padding-bottom: 10px;"> 开始时间:<input type="text" value="" id="start" name="start"/>结束时间 :<input type="text" value="" id="end" name="end"/> <a href="javascript:search();" class="l-btn l-btn-plain" icon="icon-search" style="width: 100px;">查询</a> </div> <table id="flex1" style="display: none"> </table> <script type="text/javascript"> $("#flex1").flexigrid ( { url: '<%=basepath%>flexigridzhuanjiaAction', dataType: 'json', colModel : [ {display:'编号',name:'id',width:50,sortable:true,align:'center'}, { display : '挂号医生', name : 'yisheng',width : 100,sortable : true,align : 'center'}, { display : '用户名', name : 'user',width : 100,sortable : true,align : 'center'}, { display : '就诊时间', name : 'jztime',width : 100,sortable : true,align : 'center'}, { display : '性别', name : 'sex',width : 50,sortable : true,align : 'center'}, { display : '年龄', name : 'age',width : 50,sortable : true,align : 'center'}, { display : '就诊号码', name : 'jznum',width : 100,sortable : true,align : 'center'}, { display : '挂号费用', name : 'cost',width : 80,sortable : true,align : 'center'}, { display : '身份证号', name : 'shenfen',width : 100,sortable : true,align : 'center'}, { display : '联系电话', name : 'telphone',width : 100,sortable : true,align : 'center'}, { display : '就诊类型', name : 'jztype',width : 100,sortable : true,align : 'center'} ], usepager: false, title: '综合统计', useRp: true, page:1,//默认当前页 total:1,//总页数 rp : 15,//每页默认的结果数 rpOptions:[5,10,15,20,25,30,50,100], procmsg:'正在处理,请等待......', nomsg:'没有数据', hideOnSubmit:true,//隐藏提交 autoload:false,//自动加载 resizable: true, //是否可伸缩 nowrap: false, //是否不换行 blockOpacity:0.5,//透明度设置 checkbox : false,// 是否要多选框 showTableToggleBtn: true, width: 1080, height: 400 } ); function test(com,grid) { if (com=='Delete') { confirm('Delete ' + $('.trSelected',grid).length + ' items?') } else if (com=='Add') { alert('Add New Item'); } } </script> </body></html>/** * flexigrid 统计查询 * 当期预约挂号情况汇总 * 作者:郑云飞 */public String flexcz(){HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); //得到当前页数 String page = request.getParameter("page")==null?"1":request.getParameter("page"); //得到每页显示行数 String maxResult = request.getParameter("rp")==null?"10":request.getParameter("rp"); //总数据量设置 String start=request.getParameter("start"); String end=request.getParameter("end"); List<Uuser> zzs=new ArrayList<Uuser>(); List<Uuser> zjs=userService.findByHql("from Uuser"); System.out.println("page="+page+"\tmax==="+maxResult); System.out.println("start="+start+"\tedn="+end); // System.out.println(start.equals(null)); if(start==null||end==null) { System.out.println("nulllllllll"); zzs=userService.findByHql("from Uuser c order by c.chuzhen.czdate", Integer.parseInt(page), Integer.parseInt(maxResult)); } else { System.out.println("start="+start.split(" ")[0]+"\tend=="+end.split(" ")[0]+"\tend=="+end.split(" ")[1]); String startWeek=DataFormatUtil.getWeekDay(start.split(" ")[0]);/*根据开始时间求星期*/ String startAm=DataFormatUtil.getMm(start.split(" ")[1]);/*根据开始时间求上下午*/ String endWeek=DataFormatUtil.getWeekDay(end.split(" ")[0]); String endAm=DataFormatUtil.getMm(end.split(" ")[1]); /*重新组合开始时间和结束时间*/ start=start.split(" ")[0]+" "+startWeek+" "+startAm+" "+start.split(" ")[1]; end=end.split(" ")[0]+" "+endWeek+" "+endAm+" "+end.split(" ")[1]; System.out.println("重组后的日期====start="+start+"\tend==="+end); System.out.println("zjs======="+zjs.size()); zzs=userService.findByHql("from Uuser c where c.chuzhen.czdate>='"+start+"' and c.chuzhen.czdate<='"+end+"' order by c.chuzhen.czdate", Integer.parseInt(page), Integer.parseInt(maxResult)); } StringBuffer jsonStr=myflexJson(zzs, Integer.parseInt(page),zjs.size()); try { response.getWriter().write(jsonStr+""); response.getWriter().flush(); response.getWriter().close(); } catch (IOException e) { e.printStackTrace(); }return jsonStr+""; }
/** * 专家flexigrid json数据格式的转换 * @param chuzhen * @return */private StringBuffer myflexJson(List<Uuser> czs,int pageNow,int total) {StringBuffer json = new StringBuffer();json.append("{\"total\":").append(total).append(",\"page\":").append(pageNow).append(",\"rows\":[");for (int i = 0; i < czs.size(); i++) { /*格式化就诊类型*/String type=czs.get(i).getState();if(type.equals("0")){type="黑名单用户";}if(type.equals("1")){type="普通用户";}if(type.equals("2")){type="VIP用户";}json.append("{\"id\":").append(czs.get(i).getId()).append(",\"yisheng\":[").append("\""+czs.get(i).getChuzhen().getZhuanjia().getName()+"\"]").append(",\"user\":[").append("\""+czs.get(i).getRealname()+"\"]").append(",\"jztime\":[").append("\""+czs.get(i).getChuzhen().getCzdate()+"\"]").append(",\"sex\":[").append("\""+czs.get(i).getSex()+"\"]").append(",\"age\":[").append("\""+czs.get(i).getAge()+"\"]").append(",\"jznum\":[").append("\""+czs.get(i).getJznum()+"\"]").append(",\"cost\":[").append("\""+czs.get(i).getChuzhen().getCost()+"\"]").append(",\"shenfen\":[").append("\""+czs.get(i).getIdcard()+"\"]").append(",\"telphone\":[").append("\""+czs.get(i).getMobile()+"\"]").append(",\"jztype\":[").append("\""+type+"\"]").append("}");if (i < czs.size() - 1) {json.append(",");}}json.append("]}");return json;} 效果图：

		自动登录	找回密码
密码			立即注册