jquery datagrid动态加载数据

最新推荐文章于 2021-08-05 18:00:50 发布

贤云（xianyun）

最新推荐文章于 2021-08-05 18:00:50 发布

阅读量385

点赞数

分类专栏： jquery 文章标签： jQuery json CSS JavaScript C ViewUI

本文链接：https://blog.youkuaiyun.com/zhengun/article/details/83942174

版权

jquery 专栏收录该内容

15 篇文章

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>admin/js/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>admin/test/css/icon.css">
	<script type="text/javascript" src="<%=basePath %>admin/test/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>admin/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>admin/js/easyui-lang-zh_CN.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">
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);
	
});
 /*查询*/
     function query()
     {
  
        var start = $('#start').val();
       var end=$('#end').val();
        	$('#test').datagrid(
        	{
            	url:'<%=basePath%>flextj07diaochaAction?start='+start+'&end='+end
        	});
    }
    
</script>  

	<script>
		$(function(){
			$('#test').datagrid({
				title:'各医院预约订单数量统计报表',
				 iconCls:'icon-ok',
				width:1000,
				height:650,
				pageNumber:1,
				pageSize:15,
				 pageList:[5,10,15,20,25,30,35,50,80,100],
                collapsible:true,
				nowrap: false,
				striped: true,
				url:'<%=basePath%>flextj08hospitalAction',
				sortName: 'id',
				sortOrder:'desc',
				rownumbers:true,
				idField:'id',
				queryParam:{},
				singleSelect:false,
				frozenColumns:[[
                 {field:'ck',checkbox:false}
              ]],
	        columns:[[
	      {field:'syscode',title:'区域',width:100,sortable:true,editor:'text'},
		  {field:'id',title:'序号',width:80,sortable:true,editor:'text'},
	      {field:'hospital',title:'医院名称',width:100,sortable:true,editor:'text'},
		  {field:'fhcount',title:'放号总量',width:100,sortable:true,editor:'text'},
		  {field:'yycount',title:'预约总量',width:100,sortable:true,editor:'text'},
		  {field:'kscount',title:'科室总数',width:100,sortable:true,editor:'text'},
		  {field:'yyks',title:'预约科室',width:100,sortable:true,editor:'text'},
		 {field:'zjcount',title:'专家总数',width:100,sortable:true,editor:'text'},
		 {field:'yyzj',title:'预约专家',width:100,sortable:true,editor:'text'},
		 {field:'wycount',title:'违约订单(人次)',width:100,sortable:true,editor:'text'}
				]],
				pagination:true,//分页时需要设置,下方显示分页插件
				rownumbers:true
			});
		});
		
	</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:query();" class="l-btn l-btn-plain" icon="icon-search" style="width: 100px;">查询</a>
   </div>
   <div>
	<table id="test"></table>
	</div>
</body>
</html>

/**
 * 各医院预约订单数量统计报表
 * 作者:郑云飞
 */
	public String flextj08()
	{
		try {
			HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
			String page=request.getParameter("page");/*当前页*/
			String rows=request.getParameter("rows");/*每页显示的条数*/
			System.out.println("page===="+page+"\tpageSize"+rows);
			  String start=request.getParameter("start");
		        String end=request.getParameter("end");
		        List<Hospital> zzs=new ArrayList<Hospital>();
		        List<Hospital> zjs=hospitalService.findByHql("from Hospital");
		        if(start==null||end==null)
		        {
		        	zzs=hospitalService.findByHql("from Hospital c  order by c.id", Integer.parseInt(page), Integer.parseInt(rows));
		        }
		        else
		        {
		        	zzs=hospitalService.findByHql("from Hospital c where c.regtime>='"+start+"' and c.regtime<='"+end+"' order by c.id", Integer.parseInt(page), Integer.parseInt(rows));
		        }
			StringBuffer json = flexjson08(zzs,zjs.size());/*构造json数据格式*/
			MyPrint.responseWrite(json + "");/*输出到web前端*/
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

/**
	 * 拼接json数据格式
	 * 作者:郑云飞
	 */
private StringBuffer flexjson08(List<Hospital> yys,int total) {
		
		StringBuffer json = new StringBuffer();
		json.append("{total:").append(total).append(",rows:[");
		for (int i = 0; i < yys.size(); i++) {
			/*通过医院的名字查询改医院下的所有科室总数以及所有预约科室总数*/
			List<Keshi> ka=keshiService.findByHql("from Keshi k where k.hospital.name='"+yys.get(i).getName()+"' and k.yyzjnum>0");
			System.out.println("ka=========="+ka.size());
			/*通过科室的名字查询给科室下的所有专家总数和预约专家总数*/
			/*专家总数*/
			List<Zhuanjia> zj=zhuanjiaService.findByHql("from Zhuanjia z where z.keshi.hospital.name='"+yys.get(i).getName()+"'");
			/*预约专家总数*/
			List<Zhuanjia> yyzj=zhuanjiaService.findByHql("from Zhuanjia z where z.keshi.hospital.name='"+yys.get(i).getName()+"' and z.keshi.yyzjnum>0");
			json.append("{syscode:'").append(yys.get(i).getSyscode().getName()).append("" +
					"',id:'").append(yys.get(i).getId()).append("" +
							"',hospital:'").append(yys.get(i).getName()).append(
							"',fhcount:'").append(yys.get(i).getFhcount()+"" +
							"',yycount:'").append(yys.get(i).getYuyue()+"" +
							"',kscount:'").append(yys.get(i).getKeshis().size()+"" +
							"',yyks:'").append(ka.size() +
							"',zjcount:'").append(zj.size() +
							"',yyzj:'").append(yyzj.size()+"" +
							"',wycount:'").append(yys.get(i).getWycount()+"" +
									"").append("'}");
			if (i < yys.size() - 1) {
				json.append(",");
			}
		}
		json.append("]}");
		return json;
	}

public class MyPrint
{
	public static void responseWrite(String result)
	{
		HttpServletResponse response = ServletActionContext.getResponse();
		PrintWriter out =null;
		try
		{
			out = response.getWriter();
			response.setContentType("text/html;charset=UTF-8;");
			response.setCharacterEncoding("UTF-8");
			System.out.println("result=="+result);
			out.print(result);
			out.flush();
			
		}
		catch (Exception e)
		{
			System.out.println("response.getWriter().write(result) 错误：" + e);
		}
		finally
		{
			out.close();
		}
	}

效果图: