`
郑云飞
  • 浏览: 796296 次
  • 性别: 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

    jquery flexigrid；jquery flexigrid

    jquery flexigrid 支持前台排序

    jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目，无需数据库即可运行

    Jquery FlexiGrid JS

    Jquery FlexiGrid JS 前后台数据的传值、对象 前台使用FlexiGrid 插件显示数据条数 注意：action层变量名对应

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

    Jquery flexigrid插件 添加了checkbox，将它设置为true就OK了 (双击事件)onRowDblclick。。。 附带属性说明 共享下。。。。。

    JQuery Flexigrid

    $("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...

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

    jquery flexigrid 与asp.net 的交互，并实现了crud 。提供了sqlserer oracle 等数据库的操作。

    解决JQuery flexigrid在IE下显示问题，以及数据显示问题

    最近项目要用jquery开发，于是打算用flexigrid做表格功能，但是遇到了数据不能显示、IE下显示等问题(在FF下显示正常)。于是花了2个小时时间对flexigrid.pack.js进行调试，经过苦闷的两个小时后，皇天不负有心人，...

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

    仿flexigrid表格控件，里面有data说明。滚动到底自己加载，可添加表头按钮，有停止滚动加载功能，jquery

    jquery flexigrid插件

    Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程： ...

    jQuery flexigrid 表格控件

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

    jquery表格插件Flexigrid

    jquery表格插件Flexigrid 将数据按照表格排列，类似与ext。

    Jquery flexigrid使用

    struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql Struts2返回Json类型，分页显示在flexigrid表中 下载后进行评价获得积分：评价时要选择五角星才能获取积分，不然分数还是会被扣除

    Jquery Flexigrid jsp Demo

    NULL 博文链接：https://piziwang.iteye.com/blog/537636

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

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

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

    升级了IE10，发现flexigrid无法显示数据，提示获取到了数据，但没任何报错任何显示,经过试验和跟踪，修改如下，有类似问题的朋友可以参考下哈

    flexigrid集成Struts实现动态添加删除

    flexigrid表格控件的使用实例，实现了和struts1.3的集成，实现了动态添加和删除。 文档包括： user_mgr.jsp ,jsp页面 UserAction.jsp ，控制层Action js包，相关的js jar使用到的jar包

    jquery表格插件flexigrid-1.1.zip

    Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

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

    SSH整合学习过程中的一个实例，麻雀虽小五脏俱全！应用到了SSH整合应用及Jquery框架flexigrid插件，实现列表数据显示。以下是主要整合配置和JAVA源码(带注释)

    jQuery表格插件 Flexigrid的例子

    Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，...Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对jquery初学者有一定的帮助

    jquery 表格插件 Flexigrid

    jquery 表格插件 Flexigrid

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