用于查詢操作的javascript類庫[附源碼]
來源：程序員人生 發布時間：2014-02-04 19:05:04 閱讀次數：2653次
一.本文干些啥：
通過javascript得到用戶操作改變url參數從而實現某些功能，如查詢(具體的查詢由服務器端代碼得到url中的參數組成查詢語句實現)。
二.準備工作：(代碼下載)
一個JQuery類庫(我使用的版本為：1.3.2)，一個工具類庫(Tool.js，基本都是網上搜索來的代碼)，一個查詢類庫(Search.js，自己寫的),一個htm頁面（用來做練習），將這些js代碼添加進頁面htm頁面。
htm頁面
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title></title>
5 <style type="text/css">
6.initCss{color:#666666}
7 </style>
8 <script type="text/javascript" src="JS/jquery.js"></script>
9 <script type="text/javascript" src="JS/Tool.js"></script>
10 <script type="text/javascript" src="JS/Search.js"></script>
11 <script type="text/javascript">
12$(function() {
13var search = new Search('initCss');
14search._UrlHtmlIdAry['other'] = '#dropOther';
15search._UrlParmAry['other'] = 'mce:2// mce:3// ;background-color: #f5f5f5; color: #000000;">other]]>';
16search._UrlHtmlIdAry['otherTxt'] = '#txtOther';
17search._UrlParmAry['otherTxt'] = 'otherTxt';
18
19search.InitBind();
20search.SearchApply('#searchBut', 'search.htm');
21});
22function Other() {
23$('#txtOther').css('color', 'red');
24}
25 </script>
26 </head>
27 <body>
28 <p>時間：<input id="txtDate" type="text" /></p>
29 <p>開始時間：<input id="txtDateBegin" type="text" /></p>
30 <p>結束時間：<input id="txtDateEnd" type="text" /></p>
31 <p>查詢1：
32<select id="dropWay">
33<option value="">全部</option>
34<option value="1">部分一</option>
35<option value="2">部分二</option>
36</select>
37 </p>
38 <p>查詢2：
39<select id="dropOther">
40<option value="">Other</option>
41<option value="1">Other1</option>
42<option value="2">Other2</option>
43</select>
44 </p>
45 <p>查詢：<input id="txtQuery" type="text" /></p>
46 <p>查詢其它：<input type="text" id="txtOther" /></p>
47 <p>僅查詢自己的數據：<input type="checkbox" id="cbShowMe" /></p>
48 <p><input type="button" id="searchBut" value="查詢" /></p>
49 </body>
50 </html>
三.Search.js介紹
a.需要JQuery和Tool 2個js腳本的支持。
b.已經默認含有些需要操作的id和url參數，它們分別存放在_UrlHtmlIdAry和_UrlParmAry中，當然這兩個完全可以合二為一，如果要添加新的id，請以#開頭，并添加相應的url參數名稱。
c.文本id最好含有txt(查詢框需要特別照顧，需要含有query)；時間id含有date(文中的開始時間含有begin,結束時間含有end)；多選框id含有cb;下拉框id含有drop。這些都是為了javascript能集中管理。
d.創建Search對象時，會傳入一個css參數，這個css主要實現，如，下拉框在未被選擇時，下拉框字體顏色等效果。
e.時間查詢框在未被填入內容時，默認為“xxxx-xx-xx”；查詢框(query)，默認為“關鍵字...”。他們都添加傳入css的效果，在改變了內容的情況下，css效果被移除。
四.調用Search.js
a.首先，運行htm頁面。得到下圖：
b.將前面的htm頁面中的js代碼中的var search = new Search('initCss');改為var search = new Search();刷新頁面，我們會發現頁面中的“關鍵字...”，“xxxx-xx-xx”，和下拉框中的字體顏色改變了，如圖：
這就是這個參數的作用。將代碼還原。
c.隨意操作頁面，然后按查詢按鈕或直接輸入:http://localhost:1406/search.htm?way=1&query=%u4F60%u597D&date=2010-4-20&me=t&bdate=2019-1-1&edate=2019-1-2&other=1&otherTxt=helloworld，得到類似下圖：
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
