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

jquery flexigrid动态加载数据

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

 效果图：

分享到：
| jquery datagrid动态加载数据
评论
发表评论

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

相关推荐

    jquery flexigrid

    它允许开发者将表格数据与后台数据库紧密连接，通过Ajax实现动态加载，减少了页面刷新，提升了用户体验。表格中的每一列都可以独立设置排序方式，用户只需点击列头，即可实现升序或降序排列。同时，Flexigrid内置了...

    jquery flexigrid 支持前台排序

    在实际项目中，可能还会涉及到数据的动态加载和更新。在这种情况下，每当新的数据被加载到表格中时，都需要重新初始化Tablesorter，以保持排序功能的正常工作： ```javascript $("#flex1").bind('refresh', ...

    Jquery FlexiGrid JS

    **jQuery FlexiGrid JS** 是一个强大的前端数据网格插件，它基于流行的JavaScript库jQuery构建。这个插件允许用户在网页上展示大量数据，并提供排序、分页、搜索和自定义列功能，使得数据管理更加直观和高效。下面将...

    jquery FlexiGrid与asp.net 后台交互例子

    - 分页优化：FlexiGrid支持服务器端分页，减少一次性加载大量数据对性能的影响。 - 自定义事件：利用FlexiGrid的事件机制，可以添加自定义的前端验证或后端逻辑。 - 数据缓存：为提高性能，可以考虑使用缓存策略...

    Jquery Flexigrid jsp Demo

    总的来说，"Jquery Flexigrid jsp Demo"是一个实际应用示例，展示了如何在JSP环境中利用Flexigrid实现动态数据展示和交互。通过学习这个Demo，开发者可以更好地理解如何将前端的JavaScript库与后端的Java服务进行...

    Jquery flexigrid插件 添加checkbox,(双击事件)onRowDblclick

    Flexigrid是一款基于jQuery的强大的数据网格插件，它提供了丰富的功能，如分页、排序、搜索和自定义列。在开发web应用时，我们经常需要处理大量的表格数据，这时Flexigrid就能派上用场，它使得数据显示更加灵活且...

    仿flexigrid样式，滚动到底自动加载，jquery

    当用户滚动到表格的底部时，Gdftable会自动请求更多数据并动态地添加到表格中，无需用户手动翻页。这种功能提高了用户体验，特别是在处理大量数据时。实现这一功能可能涉及到JavaScript事件监听（如滚动事件）、Ajax...

    Jquery flexigrid使用

    该应用的核心是通过Flexigrid在前端展示数据，并支持动态分页和数据查询。 #### 关键文件与组件 - **JavaScript 文件**：主要包括`jquery.js`、`flexigrid.js`、`query.js`、`thickbox.js`和`util.js`。 - `jquery...

    jquery表格插件Flexigrid

    Flexigrid是一款基于jQuery的强大的表格插件，它允许开发者将数据以美观、可操作的表格形式呈现出来，类似于知名的JavaScript框架ExtJS的表格组件。这个插件的主要优点在于其灵活性和可定制性，能够满足各种复杂的...

    jQuery flexigrid 表格控件

    只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我添加了一些功能,比如可以添加 复选框 , 行按钮 等操作, 对...

    jquery插件之flexigrid篇

    Flexigrid是一款基于jQuery的轻量级数据网格插件，专为实现强大的表格展示和操作功能而设计。在Web开发中，特别是在构建数据密集型应用时，它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...

    jquery的flexigrid无法显示数据提示获取到数据

    3. jquery的addData方法:jquery的addData方法用于向flexigrid表格中添加数据。这个方法会接收一个tbody元素作为参数，该tbody元素包含了需要显示的数据。 4. html标记的书写规范:html标记的书写需要遵循一定的规范...

    jQuery插件flexigrid使用总结--进一步优化

    2. 数据异步加载：使用AJAX动态加载数据，提高页面加载速度，避免一次性加载大量数据导致的性能问题。 3. 自定义事件：利用flexigrid提供的事件（如`onBeforeLoad`和`onAfterLoad`）进行业务逻辑处理，如数据预处理...

    JQuery_插件FlexiGrid_之完全配置与使用

    FlexiGrid支持多种功能，如排序、分页、筛选等，非常适合用于展示动态数据或对数据进行交互式操作的场景。本文将详细介绍如何安装和配置FlexiGrid，并通过一个示例项目来演示其基本用法。 #### 二、FlexiGrid的安装...

    Jquery仿Ext表格flexigrid

    Flexigrid的核心是HTML表格元素（`&lt;table&gt;`），通过jQuery对表格进行增强，添加了动态加载、排序、分页、搜索和自定义列等功能。开发者可以通过设置不同的参数来自定义表格的行为和外观。 2. **初始化Flexigrig** ...

    SSH整合应用+Jquary+Flexigrid实现表格数据显示

    在这个实例中，SSH整合被用于实现一个数据列表的显示功能，利用了Jquery框架的Flexigrid插件。下面我们将详细讲解SSH整合的配置以及Flexigrid的使用。 首先，SSH框架的整合主要包括Spring负责控制反转和依赖注入，...

    jquery插件之flexigrid学习实例

    前端的Flexigrid插件接收到JSON数据后，会自动填充到表格中，实现数据的动态加载和展示。 对于标签中的其他技术，JavaScript是Flexigrid的基础，用于处理用户交互和DOM操作；jQuery简化了跨浏览器的JavaScript编程...

    jquery插件FlexiGrid的使用（已更新）

    FlexiGrid是一款基于jQuery的表格插件，它提供了丰富的功能，包括数据分页、排序、过滤、编辑等，使得在Web应用中展示和操作大量数据变得更加便捷。在本篇文章中，我们将深入探讨FlexiGrid的使用方法，以及如何将其...

    jquery插件之flexigrid学习实例-jar包

    Flexigrid是一款基于jQuery的表格插件，它提供了丰富的功能，如数据分页、排序、搜索和自定义列宽等，极大地增强了网页中表格的展示效果和交互性。在"jquery插件之flexigrid学习实例-jar包"中，我们主要关注的是如何...

    jquery表格插件带分页动态数据表格代码

    在这个“jquery表格插件带分页动态数据表格代码”项目中，我们重点探讨的是如何利用jQuery实现一个功能丰富的表格，包括数据分页和动态加载。 一、jQuery表格插件 表格插件通常是基于jQuery构建的，用于增强HTML...

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