`
郑云飞
  • 浏览: 817272 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery datagrid动态加载数据

jQueryjsonCSSJavaScriptC 
阅读更多 
<%@ 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();
		}
	}

 效果图:

分享到：
| 坦克大战
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的数据，提高网页性能并优化用户体验。 动态加载数据通常指的是懒加载（Lazy Loading）机制，即只在用户滚动到数据视图的底部或者...

    Jquery Datagrid 动态分页以及CRUD（增删改查）

    在Web开发中，数据展示和管理是常见的需求，jQuery Datagrid是一款强大的表格插件，能够帮助我们实现数据的动态分页、增删改查等基本功能。这篇教程将深入探讨如何使用jQuery Datagrid实现这些功能，以供开发者参考...

    基于JQuery的datagrid分页数据实现

    这个小程序利用SSH2（Struts2、Spring、Hibernate）框架，结合Maven构建工具，实现了通过jQuery的datagrid插件进行Ajax分页加载数据的功能。以下将详细介绍其中涉及的技术和知识点。 1. **SSH2框架**：SSH2是Java ...

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件，常用于表格数据的展示和操作，支持分页、排序、过滤、编辑等功能。通过阅读这份文档，我们可以了解 Datagrid 的基本配置和高级特性，以及如何与后端数据源进行...

    Jquery 插件datagrid最新版本下载

    jQuery Datagrid是一款广泛使用的数据网格插件，它基于jQuery库，为Web开发者提供了强大的数据展示和操作功能。这个插件允许用户以表格形式展示大量数据，同时支持分页、排序、过滤、编辑等功能，极大地提高了网页的...

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列丰富的组件，使得开发者可以轻松构建用户界面，而 Datagrid 是其中非常重要的一个组件，常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    可删除列的datagrid

    在这个特定的情况下，"可删除列"功能意味着用户在界面上可以动态地选择移除数据网格中的某一列，这为用户提供了更高的自定义性和灵活性。 在IT行业中，实现这样的功能可能涉及到以下知识点： 1. **前端技术**：在...

    jQuery easyui datagrid动态查询数据实例讲解

    本文详细讲解了如何使用jQuery easyui datagrid组件进行动态查询数据的过程。具体来说，文章将从前端界面接受查询条件，通过后端PHP代码与MSSQL数据库交互，并返回JSON格式的数据展示在easyui datagrid中。这个过程...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果，这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用，比如在本例中的“老师分类”和“老师细类”。...

    JqueryDataGridDemo分页

    在这个"JqueryDataGridDemo分页"示例中，我们将深入探讨如何利用jQuery DataGrid实现高效的数据分页。 ### 一、jQuery DataGrid简介 jQuery DataGrid，也被称为jqGrid，是基于jQuery的一个开源组件，它提供了一个...

    Jquery datagrid实现单元格编辑

    而jQuery UI中的DataGrid组件（也被称为jqGrid）则是一个强大的数据展示和管理工具，尤其适合于构建功能丰富的表格。本篇将详细介绍如何使用jQuery DataGrid实现单元格编辑功能。 首先，我们需要引入jQuery和jqGrid...

    easyui datagrid 数据导出到Excel

    在IT行业中，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如排序、分页、过滤等。在实际工作中，我们经常需要将这些展示的数据导出到Excel文件，以便进行进一步的分析或存储。下面...

    DataGrid中嵌套DataGrid

    总的来说，掌握DataGrid的嵌套技术对于构建动态、交互式的ASP.NET应用程序至关重要，特别是处理多层结构数据时。这需要开发者对ASP.NET控件的深入理解，以及对数据绑定和事件处理的熟练应用。通过不断实践和优化，...

    datagrid 接收数据常用方法

    1. 动态数据绑定：这是最基础的方法，通过服务器端代码将数据库查询结果直接绑定到datagrid。例如，在ASP.NET中，我们可以使用`SqlDataSource`或`ObjectDataSource`控件来配置数据源，然后在datagrid的`DataSourceID...

    JqueryEasyUI DataGrid例子

    在网页开发中，jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的用户界面组件，如 DataGrid，用于创建交互式、数据驱动的表格。DataGrid 是 EasyUI 的一个重要组件，它可以帮助开发者轻松地展示、操作和...

    jquery easyui datagrid 教程

    1. 动态加载：使用 `load` 方法异步加载数据，如 `datagrid('load', {param1: value1, param2: value2})`。 2. 编辑数据：Datagrid 支持行内编辑，通过 `editRow` 和 `saveRow` 方法进行编辑与保存。 3. 数据操作：...

    Jquery的DataGrid

    DataGrid在网页中的应用广泛，尤其在C# ASP.NET环境中，可以与后端数据源如GridView紧密集成，实现动态数据的展示。GridView是ASP.NET中的一种服务器控件，专门用于显示和操作结构化的数据，如数据库查询结果。它...

    datagrid-dnd(可以拖放的datagrid)

    "datagrid-dnd"是EasyUI datagrid的一个扩展，它添加了拖放功能。在标准的datagrid中，数据通常是静态显示的，用户无法直接改变行的顺序。然而，通过启用drag and drop（拖放）功能，用户可以方便地将某一行数据拖动...

    datagrid 多表头及动态生成的实现

    通过上述步骤，我们可以看到如何使用JQuery EasyUI的datagrid组件来实现动态生成具有多表头的数据表格。这种方式不仅提高了系统的灵活性，也大大增强了用户体验。在未来开发类似功能时，这种方法将非常有用。

Magicbox
Global site tag (gtag.js) - Google Analytics