jsp页面实现按时间段查询记录和快速查询

最新推荐文章于 2022-04-11 07:07:47 发布

科技Ins

最新推荐文章于 2022-04-11 07:07:47 发布

阅读量1.4w

点赞数 9

分类专栏：记录快速查询文章标签：经验分享 javascript datepicker

本文链接：https://blog.csdn.net/Prince_WCS/article/details/23600427

版权

记录快速查询专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在jsp页面中怎样实现如上图所示的，通过时间选择框来查询某一段时间的业务记录呢，下面将我的一点小经验分享给大家。这里的时间选择框使用的是My97DatePicker的js插件，可以在其官网下载http://www.my97.net/，官网上也有相关的使用方法介绍。
在这里，我们首先需要在在页面<head>标签中引入使用的WdatePicker.js文件，然后在<body>标签中插入两个<div>标签，分别在每个<div>中插入一个<input>标签，如下所示

<div class="cell" style="width: 126px;">
	<input type="text" class="Wdate" id="d1" name="startTime" value="<%=request.getParameter("startTime")==null?"":request.getParameter("startTime")%>" onFocus="var d2=$dp.$('d2');WdatePicker({onpicked:function(){d2.focus();},maxDate:'#F{$dp.$D(\'d2\')}'})" />
</div>
至
<div class="cell" style="width: 126px;">
	<input type="text" class="Wdate" id="d2" name="endTime" value="<%=request.getParameter("endTime")==null?"":request.getParameter("endTime")%>" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d1\')}'})"/>
</div>
<div class="cell" style="width: 200px;margin-left: 33px;">
	<input class="list_btn" value="查询" type="submit" />
</div>

这里我们使用的WdatePicker插件实现的效果为：在第一个时间选择框中选择时间startTime后，第二个时间选择框会自动弹出，同时，可选择的时间endTime满足endTime>=startTime.当然大家也可以根据自己的实际需要，选择不同的效果，可在http://www.my97.net/dp/demo/index.htm查看演示效果。
这里的value之所以用这种方式来获得，是因为实现点击“查询”按钮，获得相关数据信息的同时页面会自动刷新，刷新后，<input>标签中的值会清空，而一般来说，点击查询后，时间应该保留显示，以提醒使用人员查询的是什么时间段的数据，所以这里就采用这种方式。

选择了时间后，我们需要在后台获取时间进行相关处理，在这里就不贴出后台代码了。在很多时候，由于时间久了数据量会很大，于是就会有快速查询短时间内数据的需要，就像网银中有查看当天或者一周、一个月的交易记录的功能，这里实现的思路就是通过点击相关的快速查询链接，触发一系列动作，即首先改变时间输入框中d1和d2的值，然后触发submit按钮，这里我们通过js函数来实现这种效果。
首先，对于“今天”来说，我们需要自动获取系统当前时间，并将其赋值给“d1”和“d2”，由于获取的系统时间精确到秒，而我们这里只需要精确到天，因此需要对时间进行格式转换；其次，对于“一周”和“三十天”来说，实现的思路是，首先将当前系统时间经过格式转换后，赋值给“d2”,然后再分别将转换后的系统时间减去6天和29天赋值给“d1”即可。主要通过下面的JavaScript代码实现：

	// 对Date的扩展，将 Date 转化为指定格式的String  
	// 例子： 
	// (new Date()).Format("yyyy-MM-dd hh:mm:ss") ==> 2014-03-02 08:09:04
	// (new Date()).Format("yyyy-MM-dd ")      ==> 2014-03-02 
	Date.prototype.Format = function(fmt) {
		var o = {
			"M+" : this.getMonth() + 1, //月份 
			"d+" : this.getDate(), //日 
			"h+" : this.getHours(), //小时 
			"m+" : this.getMinutes(), //分 
			"s+" : this.getSeconds(), //秒 
			"q+" : Math.floor((this.getMonth() + 3) / 3), //季度 
			"S" : this.getMilliseconds()//毫秒 
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
					.substr(4 - RegExp.$1.length));
		for ( var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt
						.replace(
								RegExp.$1,
								(RegExp.$1.length == 1) ? (o[k])
										: (("00" + o[k])
												.substr(("" + o[k]).length)));
		return fmt;
	}

	//获取当前日期，并进行格式化
	var time = new Date().Format("yyyy-MM-dd");

	//对日期进行加减
	function addDate(date, days) {
		var d = new Date(date);
		d.setDate(d.getDate() + days);
		var m = d.getMonth() + 1;
		return d.getFullYear() + '-' + m + '-' + d.getDate();
	}
	//其中，date参数是要进行加减的日期，days参数是要加减的天数，如果往前算就传入负数，往后算就传入正数，如果是要进行月份的加减，就调用setMonth()和getMonth（）就可以了，需要注意的是返回的月份是从0开始计算的，也就是说返回的月份要比实际月份少一个月，因此要相应的加上1。

	//“今天”日期设置
	function today() {
		document.getElementById("d1").value = time;
		document.getElementById("d2").value = time;
		document.getElementById("myform").submit();
	}
	//“一周”日期设置
	function week() {
		document.getElementById("d1").value = addDate(time, -6);
		document.getElementById("d2").value = time;
		document.getElementById("myform").submit();
	}
	//“三十天”日期设置
	function month() {
		document.getElementById("d1").value = addDate(time, -29);
		document.getElementById("d2").value = time;
		document.getElementById("myform").submit();
	}

jsp页面调用如下所示:

<div class="cell" >
<a href="#" οnclick="today()" style="text-decoration:underline;">今天</a>
</div>
<div class="cell">
<a href="#" οnclick="week()" style="text-decoration:underline;">一周</a>
</div>
<div class="cell">
<a href="#" οnclick="month()" style="text-decoration:underline;">三十天</a>
</div>

在这里，控制页面显示的css代码就不贴出来了，因为实在很简单，之所以把它发布出来，一是与大家分享学习中的小经验，同时也是备份，相信后面的学习中应该还会用到这些的。

科技Ins

关注

9
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
jsp页面实现按时间段查询记录和快速查询

在jsp页面中怎样实现如上图所示的，通过时间选择框来查询某一段时间的业务记录呢，下面将我的一点小经验分享给大家。这里的时间选择框使用的是My97DatePicker的js插件，可以在其官网下载http://www.my97.net/，官网上也有相关的使用方法介绍。在这里，我们首先需要在在页面标签中引入使用的WdatePicker.js文件，然后在标签中插入两个标签，分别在每个中
复制链接

扫一扫

专栏目录