2. 程式人生 > >jsp頁面實現按時間段查詢記錄和快速查詢

jsp頁面實現按時間段查詢記錄和快速查詢

阿新 • • 發佈：2019-01-11

        在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="#" onclick="today()" style="text-decoration:underline;">今天</a>
</div>
<div class="cell">
<a href="#" onclick="week()" style="text-decoration:underline;">一週</a>
</div>
<div class="cell">
<a href="#" onclick="month()" style="text-decoration:underline;">三十天</a>
</div>

        在這裡，控制頁面顯示的css程式碼就不貼出來了，因為實在很簡單，之所以把它釋出出來，一是與大家分享學習中的小經驗，同時也是備份，相信後面的學習中應該還會用到這些的。

相關推薦

jsp頁面實現按時間段查詢記錄和快速查詢

        在jsp頁面中怎樣實現如上圖所示的，通過時間選擇框來查詢某一段時間的業務記錄呢，下面將我的一點小經驗分享給大家。這裡的時間選擇框使用的是My97DatePicker的js外掛，可以在其官網下載http://www.my97.net/，官網上也有相關的使用

ssmweb專案的Demo 攔截器 頁面 jsp頁面實現 未完待續 以及配置資訊的載入順序和載入

Controller請求到springmvc的前端控制器，從處理器對映器找相應的handler(用@RequestMapping(" URL引數之類的東西 ")，對映成功後，由Springmvc生成一個handler物件，該物件中有一個方法，即對映成功的該方法)，由相應的處理

C#實現百度網站收錄和排名查詢功能思路及實例

重構 策略 www protected 交互 得出 完成 def 表達式 一、前言 偶然一次在vs2012默認的項目文件夾裏發現了以前自己做的一個關於SEO的類庫，主要是用來查詢某個網址的收錄次數還有網站的排行數，後來重構了下，今天拿出來寫篇文章，說說自己是如何思考的

JSP+JavaBean實現任意兩個整數和

【問題】設計 Web 程式，計算任意兩個整數的和，並在網頁上顯示結果。要求在 JavaBean 中實現資料的求和功能。 【分析】需要兩個頁面 input.jsp 和 show.jsp ，以及Add.java 【實現】 （1）首先設計實現資料求和的 JavaBean 類 Add.java,

JSP頁面實現語音播報

<%@ page language="java" import="java.util.*,javax.servlet.http.Cookie" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-/

jsp頁面實現input框實時ajax校驗任務名稱是否存在

<!-- 任務名稱 --> <span class="list_name" style="margin-left: 25px;">任務名稱：</span>

【個人學習筆記】Java Web用一個簡單的jsp頁面實現輸出100以內的素數

<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> <html> <

JSP頁面實現批量刪除資料

危樓高百尺，手可摘星辰。 不敢高聲語，恐驚天上人。　—李白《夜宿山寺》 首次：FindServlet.java-->bookList.jsp 刪除：bookList.jsp-->DelServlet.java-->FindSe

JSP頁面實現播放視訊功能

以下程式碼直接放在<body></body>中 在網站中插入media視訊的程式碼- - <OBJECT id=WMP height=320 standby=Loading... width=332 classid=clsid:6BF52A52-394A-11D3-B153-00

jsp頁面動態展示list-使用select和c:forEach標籤

後臺：搜尋資料放入list，然後為這個list提供響應的get和set方法private List<String> l=new ArrayList<String>();  public List<String> getL() {      

android 通話記錄和聯絡人查詢

呼叫記錄有三種類型： 來電：CallLog.Calls.INCOMING_TYPE （常量值：1） 已撥：CallLog.Calls.OUTGOING_TYPE（常量值：2） 未接：CallLog.Calls.MISSED_TYPE（常量值：3） 檢視原始碼中的宣告：

同一jsp頁面實現點選左邊不同連結右邊顯示詳情資訊，解決區域性重新整理

一、此需求可解決區域性重新整理，例如左邊連結直接去後臺返回新的jsp頁面，同時把頁面需要的資料返回。頁面中直接獲取就ok <html> <head> <me

jsp頁面判斷登入輸入的使用者名稱和密碼不能為空

在body裡面插入javascript指令碼，編寫一個判斷函式，在需要的地方呼叫此函式 <script type="text/javascript"> function check(){ var flag = true; var

MySQL（三）INSERT 插入記錄和SELECT查詢

1.在資料表中插入資料條 2.插入多條記錄，就是將SELECT查詢到的結果都插入。用INSERT + SELECT. 3.UPDATE更新，就是更改的意思 公式=>UPDATE 表名 SET col_name = 表示式或DEFAULT [ WHERE條件

Mysql 按時間段、某一天 查詢

今天 select * from 表名 where to_days(時間欄位名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE DATEDIFF(

jsp頁面實現倒計時自動跳轉

在頁面上顯示倒計時 <script type="text/javascript"> function out(sec){ var v = document.getElementById("h1"); if(--sec>0){ se

MySQL通用查詢日誌和慢查詢的日誌分析

MySQL中的日誌包括：錯誤日誌、二進位制日誌、通用查詢日誌、慢查詢日誌等等。這裡主要介紹下比較常用的兩個功能：通用查詢日誌和慢查詢日誌。 1）通用查詢日誌：記錄建立的客戶端連線和執行的語句。 2）慢查詢日誌：記錄所有執行時間超過longquerytime秒的所有查詢或者不使用索引的查詢

關於MySQL 通用查詢日誌和慢查詢日誌分析

MySQL中的日誌包括：錯誤日誌、二進位制日誌、通用查詢日誌、慢查詢日誌等等。這裡主要介紹下比較常用的兩個功能：通用查詢日誌和慢查詢日誌。 1）通用查詢日誌：記錄建立的客戶端連線和執行的語句。 2）慢查詢日誌：記錄所有執行時間超過longquerytime秒的所有查詢或者不使用索引的查詢 （1）通用查詢

MySQL查詢過程和高階查詢

通過中篇的介紹，你會了解到： MySQL查詢過程 高階查詢相關概念 explain命令詳細介紹 索引優化建議 MySQL查詢過程 想要更好的優化查詢，首先要了解其整體查詢過程，從客戶端傳送查詢請求，到接收到查詢結果，MySQL伺

java 二分查詢法和順序查詢法的效率比較

專案背景: 從一個檔案獲取10萬筆字串型別資料，資料庫表中查詢出符合條件的5千數字符竄型別資料。把兩者匹配的資料查詢出來。 結論： 1、如果數量級不大，二種方式速度差不多 2、如果數量級較大    *如果源資料是有序的，則二分查詢法效率高    *