jquery flexigrid动态加载数据

最新推荐文章于 2021-03-10 09:15:29 发布
最新推荐文章于 2021-03-10 09:15:29 发布
阅读量496 收藏
点赞数
分类专栏： jquery 文章标签： jQuery CSS JavaScript json C ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengun/article/details/83942182
版权 
<%@ 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;
	}

 效果图：

贤云（xianyun）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿flexigrid样式，滚动到底自动加载，jquery
12-19
仿flexigrid表格控件，里面有data说明。滚动到底自己加载，可添加表头按钮，有停止滚动加载功能，jquery
flexigrid的json格式使用说明
10-18
对于flexigrid的使用，各个参数的意义应该不用解释，网上资料很多。插件接收的数据格式对于刚接触的人来说是个麻烦，这是一位兄台的整理，不尽完美但会告诉你如何封装格式。
如何指定flexigrid的起始加载页
青空
01-29 199
最近使用flexigrid的时候遇到一个问题：在grid中选中一条记录后跳转到其他页面进行操作（比如说编辑数据），之后再回到grid页面时，希望能够回到操作之前所停留的页数，即要“记住当前分页”。   当前页数的保存可以通过session之类的手段实现，但问题的关键点在于如何手动设定flexigrid的起始页。一开始我根据网上广泛流传的那一份flexigrid参数说明，以为是设置page参数，...
flexigrid的colModel中增加新列
11-22
flexigrid的colModel中增加自定义新列
Flexigrid系列使用教程（一）前台代码及参数说明
热门推荐
风过无声
02-23 2万+
摘自：http://www.kwstu.com/Article/ShowArticle.asp?ArticleID=259 本教程从零开始介绍Flexigrid的使用方法，记录了作者学习中的点点滴滴，实例主要是在.net mvc框架下实现的，废话不多说了，先看一下Flexigrid的效果图吧。  一、首先简单介绍一下flexigrid： 1、主要特性： Flexigrid是Jq
jquery flexigrid
08-07
它允许开发者将表格数据与后台数据库紧密连接，通过Ajax实现动态加载，减少了页面刷新，提升了用户体验。表格中的每一列都可以独立设置排序方式，用户只需点击列头，即可实现升序或降序排列。同时，Flexigrid内置了...
Jquery FlexiGrid JS
08-28
**jQuery FlexiGrid JS** 是一个强大的前端数据网格插件，它基于流行的JavaScript库jQuery构建。这个插件允许用户在网页上展示大量数据，并提供排序、分页、搜索和自定义列功能，使得数据管理更加直观和高效。下面将...
jquery表格插件带分页动态数据表格代码
09-22
在这个“jquery表格插件带分页动态数据表格代码”项目中，我们重点探讨的是如何利用jQuery实现一个功能丰富的表格，包括数据分页和动态加载。 一、jQuery表格插件 表格插件通常是基于jQuery构建的，用于增强HTML...
Jquery Flexigrid jsp Demo
05-27
总的来说，"Jquery Flexigrid jsp Demo"是一个实际应用示例，展示了如何在JSP环境中利用Flexigrid实现动态数据展示和交互。通过学习这个Demo，开发者可以更好地理解如何将前端的JavaScript库与后端的Java服务进行...
jquery flexigrid 支持前台排序
09-05
在实际项目中，可能还会涉及到数据的动态加载和更新。在这种情况下，每当新的数据被加载到表格中时，都需要重新初始化Tablesorter，以保持排序功能的正常工作： ```javascript $("#flex1").bind('refresh', ...
Flexigrid使用说明
Simple、
09-13 363
项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。   flexigrid参数说明:     height: 200, //flexigrid插件的高度，单位为px     width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题     str...
玩转jquery插件之flexigrid（一）如何获取并使用flexigrid？
fyqcdbdx的专栏
11-15 1126
用插件来做规律性很强的数据展现是个不错的选择，jquery插件家族中这类插件通常叫做table或者grid，本人用过两个有名的插件:jqgrid和flexgrid，自己也曾经在使用jquery之前尝试过自己写grid插件，这篇文章将就flexgrid插件的使用和改造展开。 非常囧的是flexgrid的homepage居然无法访问了，不过没关系，Google group上已经有了相关的讨论，且非常
FlexGrid动态传参的做法
longflang的博客
08-14 253
  思路：通过ajax动态传JSON方式。回调FlexGrid的flexReload方式实现。   js: $("#flexTable").flexigrid({ width: 700 , height: 150, url: 'workform-function-main!getWbfDetailGridSummaryDate.action', dataTy...
php获取搜索框的函数,WordPress中用于获取搜索表单的PHP函数使用解析
weixin_42204303的博客
03-10 190
get_search_form 函数在 WordPress 中是用来提取预设的搜索表单或者默认的搜索表单的。因为官方这个函数没有中文的，所以我就简单写了一下。描述get_search_form 函数在 WordPress 中是用来提取自定义搜索表单或者默认的搜索表单的。显示自定义表单还是显示默认表单，完全取决于您的主题中是否有search.php文件，如果有该文件，则自动调用该文件，如果没有则显示...
flexigrid如何添加操作列
xwzyxlyl的专栏
08-28 1885
最近开始接触Jquery，接触了几款基于Jquery的列表，对比后还是觉得flexigrid更美观，郁闷的是网上发布的版本，功能还比较弱，好吧，那就自己动手呗~ 修改 flexigrid.js 第一步：在//create grid class之前，添加如下代码： //begin 初始化操作单元格信息 var actionsList = new Array();//保存操
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值