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;
}
效果图：