jquery flexigrid动态加载数据
- <%@ 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>
- <!-- 时间js -->
- <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>
- <!-- jquery 特效 -->
- <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的ID
- needTime: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;
- }
效果图：