用于查詢操作的javascript類庫[附源碼]
來源：程序員人生 發(fā)布時(shí)間：2014-02-04 19:05:04 閱讀次數(shù)：2660次
一.本文干些啥：
通過javascript得到用戶操作改變url參數(shù)從而實(shí)現(xiàn)某些功能，如查詢(具體的查詢由服務(wù)器端代碼得到url中的參數(shù)組成查詢語句實(shí)現(xiàn))。
二.準(zhǔn)備工作：(代碼下載)
一個(gè)JQuery類庫(我使用的版本為：1.3.2)，一個(gè)工具類庫(Tool.js，基本都是網(wǎng)上搜索來的代碼)，一個(gè)查詢類庫(Search.js，自己寫的),一個(gè)htm頁面（用來做練習(xí)），將這些js代碼添加進(jìn)頁面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>時(shí)間：<input id="txtDate" type="text" /></p>
29 <p>開始時(shí)間：<input id="txtDateBegin" type="text" /></p>
30 <p>結(jié)束時(shí)間：<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>僅查詢自己的數(shù)據(jù)：<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個(gè)js腳本的支持。
b.已經(jīng)默認(rèn)含有些需要操作的id和url參數(shù)，它們分別存放在_UrlHtmlIdAry和_UrlParmAry中，當(dāng)然這兩個(gè)完全可以合二為一，如果要添加新的id，請以#開頭，并添加相應(yīng)的url參數(shù)名稱。
c.文本id最好含有txt(查詢框需要特別照顧，需要含有query)；時(shí)間id含有date(文中的開始時(shí)間含有begin,結(jié)束時(shí)間含有end)；多選框id含有cb;下拉框id含有drop。這些都是為了javascript能集中管理。
d.創(chuàng)建Search對象時(shí)，會傳入一個(gè)css參數(shù)，這個(gè)css主要實(shí)現(xiàn)，如，下拉框在未被選擇時(shí)，下拉框字體顏色等效果。
e.時(shí)間查詢框在未被填入內(nèi)容時(shí)，默認(rèn)為“xxxx-xx-xx”；查詢框(query)，默認(rèn)為“關(guān)鍵字...”。他們都添加傳入css的效果，在改變了內(nèi)容的情況下，css效果被移除。
四.調(diào)用Search.js
a.首先，運(yùn)行htm頁面。得到下圖：
b.將前面的htm頁面中的js代碼中的var search = new Search('initCss');改為var search = new Search();刷新頁面，我們會發(fā)現(xiàn)頁面中的“關(guān)鍵字...”，“xxxx-xx-xx”，和下拉框中的字體顏色改變了，如圖：
這就是這個(gè)參數(shù)的作用。將代碼還原。
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，得到類似下圖：
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
