用于查询操作的javascript类库
一.本文干些啥：
通过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() {
13 var search = new Search('initCss');
14 search._UrlHtmlIdAry['other'] = '#dropOther';
15 search._UrlParmAry['other'] = ';background-color: #f5f5f5; color: #000000;">other]]>';
16 search._UrlHtmlIdAry['otherTxt'] = '#txtOther';
17 search._UrlParmAry['otherTxt'] = 'otherTxt';
18
19 search.InitBind();
20 search.SearchApply('#searchBut', 'search.htm');
21 });
22 function Other() {
23 $('#txtOther').css('color', 'red');
24 }
25 </script>
26 </head>
27 <body>
28 <div>时间：<input id="txtDate" type="text" /></div>
29 <div>开始时间：<input id="txtDateBegin" type="text" /></div>
30 <div>结束时间：<input id="txtDateEnd" type="text" /></div>
31 <div>查询1：
32 <select id="dropWay">
33 <option value="">全部</option>
34 <option value="1">部分一</option>
35 <option value="2">部分二</option>
36 </select>
37 </div>
38 <div>查询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 </div>
45 <div>查询：<input id="txtQuery" type="text" /></div>
46 <div>查询其它：<input type="text" id="txtOther" /></div>
47 <div>仅查询自己的数据：<input type="checkbox" id="cbShowMe" /></div>
48 <div><input type="button" id="searchBut" value="查询" /></div>
49 </body>
50 </html>
51
三.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，得到类似下图：
js代码已将url参数内容绑定到页面中。
d.现在去掉
search._UrlHtmlIdAry['other'] = '#dropOther';
search._UrlParmAry['other'] = 'other';
search._UrlHtmlIdAry['otherTxt'] = '#txtOther';
search._UrlParmAry['otherTxt'] = 'otherTxt';
刷新页面，会发现未给查询2和查询其它绑定查询内容，这是因为此刻_UrlHtmlIdAry和_UrlParmAry并没有对应的值，未操作相应的数据。如图，
还原代码。
e.现在将search.InitBind(Other);改为search.InitBind();会发现查询其它的字体颜色为黑色，而非先前的红色，如图，
这是因为没有为InitBind（）方法添加一个方法参数，这个参数能在不改变InitBind（）方法的情况下进行一个操作内容的扩展。将代码还原。
f.SearchApply方法第一个参数是‘#’加上一个操作按钮的id（Search类会为该按钮添加回车事件），第二个参数是页面定向的url地址。
五.代码
Tool.jsSearch.js
1 function Search(initCss) {
2 this._Tool = new Tool();
3 this._UrlParmAry = { way: 'way', query: 'query', date: 'date', me: 'me', bdate: "bdate", edate: "edate" };
4 this._UrlHtmlIdAry = { way: '#dropWay', query: '#txtQuery', date: '#txtDate', me: '#cbShowMe', bdate: "#txtDateBegin", edate: "#txtDateEnd" };
5 this._DateInitStr = 'xxxx-xx-xx';
6 this._QueryInitStr = '关键字...';
7 this._Args = this._Tool.GetUrlParms();
8 this.InitBind = function(fnOther) {
9 for (var arg in this._Args) {
10 $(this._UrlHtmlIdAry[arg]).attr('checked', true);
11 $(this._UrlHtmlIdAry[arg]).val(unescape(this._Args[arg]));
12 }
13 this.InitCssInfo(fnOther);
14 }
15 this.SearchApply = function(searchId, gotoUrl) {
16 var searchObj = this;
17 $(searchId).click(function() {
18 window.location.href = gotoUrl + searchObj.GetUrlParms();
19 });
20 $(document).keydown(function(event) {
21 if (event.which == 13) {
22 $(searchId).focus().click();
23 }
24 });
25 }
26 this.GetUrlParms = function() {
27 var parms = '?';
28 var isFirst = true;
29 for (var parm in this._UrlParmAry) {
30 htmlId = this._UrlHtmlIdAry[parm];
31 htmlVal = escape($(htmlId).val());
32
33 //时间txt处理
34 if (this._Tool.IsFindStr(htmlId, 'date', true)) {//|| this._Tool.IsFindStr(htmlId, 'Begin', true) || this._Tool.IsFindStr(htmlId, 'End', true)) {
35 if (this._Tool.IsNoNullOrEmpty(htmlVal) && htmlVal != this._DateInitStr && this._Tool.IsShortTime(htmlVal)) {
36 if (isFirst != true) parms += "&";
37 parms += parm + '=' + htmlVal; isFirst = false;
38 }
39 }
40 //处理关键字
41 else if (this._Tool.IsFindStr(htmlId, 'query', true)) {
42 if (this._Tool.IsNoNullOrEmpty(htmlVal) && unescape(htmlVal) != this._QueryInitStr) {
43 if (isFirst != true) parms += "&";
44 parms += parm + '=' + htmlVal; isFirst = false;
45 }
46 }
47 //处理下拉框
48 else if (this._Tool.IsFindStr(htmlId, 'drop', true)) {
49 if (this._Tool.IsNoNullOrEmpty(htmlVal)) {
50 if (isFirst != true) parms += "&";
51 parms += parm + '=' + htmlVal; isFirst = false;
52 }
53 }
54 //处理checkbox
55 else if (this._Tool.IsFindStr(htmlId, 'cb', true)) {
56 if ($(htmlId).attr('checked')) {
57 if (isFirst != true) parms += "&";
58 parms += parm + '=t'; isFirst = false;
59 }
60 }
61 //如果关键查询 放在 其它文本查询之前
62 else if (this._Tool.IsFindStr(htmlId, 'txt', true)) {
63 if (this._Tool.IsNoNullOrEmpty(htmlVal)) {
64 if (isFirst != true) parms += "&";
65 parms += parm + '=' + htmlVal; isFirst = false;
66 }
67 }
68 }
69 if (parms == '?') parms = '';
70 return parms
71 }
72 this.InitCssInfo = function(fnOther) {
73 var htmlId;
74 var urlParm;
75 for (var arg in this._UrlHtmlIdAry) {
76 urlParm = this._UrlParmAry[arg];
77 htmlId = this._UrlHtmlIdAry[arg];
78 //时间
79 if (this._Tool.IsFindStr(htmlId, 'date', true)) {// || this._Tool.IsFindStr(htmlId, 'begin', true) || this._Tool.IsFindStr(htmlId, 'end', true)) {
80 if ($(htmlId).val() == this._DateInitStr) $(htmlId).val(''); //兼容FF的刷新，FF刷新后仍会将先前的值带到刷新后的页面
81 if ($(htmlId).val() == '') {
82 $(htmlId).val(this._DateInitStr);
83 $(htmlId).addClass(initCss);
84 }
85 this.TimeTxTEvent(htmlId);
86 }
87 //查询
88 else if (this._Tool.IsFindStr(htmlId, 'query', true)) {
89 if ($(htmlId).val() == this._QueryInitStr) $(htmlId).val(''); //兼容FF的刷新，FF刷新后仍会将先前的值带到刷新后的页面
90 if ($(htmlId).val() == '') {
91 $(htmlId).val(this._QueryInitStr);
92 $(htmlId).addClass(initCss);
93 }
94 this.QueryTxTEvent(htmlId);
95 }
96 else if (this._Tool.IsFindStr(htmlId, 'drop', true)) {
97 dropCss(htmlId);
98 this.DropEvent(htmlId);
99 }
100 }
101 if (typeof (fnOther) == 'function') {
102 setTimeout(fnOther, 0);
103 }
104 }
105 this.QueryTxTEvent = function(htmlId) {
106 var searchObj = this;
107 $(htmlId).blur(function() {
108 $(this).removeClass(initCss);
109 if ($(this).val() == '') {
110 $(this).val(searchObj._QueryInitStr);
111 $(this).addClass(initCss);
112 }
113 });
114 $(htmlId).focus(function() {
115 if ($(this).val() == searchObj._QueryInitStr) {
116 $(this).val('');
117 $(this).removeClass(initCss);
118 }
119 });
120 }
121 this.TimeTxTEvent = function(htmlId) {
122 var searchObj = this;
123 //离开事件
124 $(htmlId).blur(function() {
125 //为真确填写的日期
126 if (searchObj._Tool.IsShortTime($(this).val())) {
127
128 }
129 else if ($(this).val() != '') {
130 alert('请正确输入日期格式，如：2010-1-1');
131 }
132 if ($(this).val() == '') {
133 $(this).val(searchObj._DateInitStr);
134 $(this).addClass(initCss);
135 }
136 else {
137 $(this).removeClass(initCss);
138 }
139 });
140 $(htmlId).focus(function() {
141 if ($(this).val() == searchObj._DateInitStr) {
142 $(this).val('');
143 $(this).removeClass(initCss);
144 }
145 });
146 }
147 this.DropEvent = function(htmlId) {
148 $(htmlId).change(function() {
149 dropCss(htmlId);
150 });
151 }
152
153 //为了浏览器兼容，不同游览器对select的字体颜色设置不同
154 function dropCss(htmlId) {
155 if ($(htmlId).val() != '') {
156 $(htmlId).removeClass(initCss);
157 var count = 0;
158 $(htmlId + ' option:first').addClass(initCss);
159 }
160 else {
161 $(htmlId).addClass(initCss);
162 var count = 0;
163 $(htmlId + ' option').each(function() {
164 if (count > 0) {
165 $(this).css('color', 'black');
166 }
167 count++;
168 });
169 }
170 }
171 }
六.总结：
这个Search类为工作带来了许多便捷，当然自己对js及JQuery的学习还是起步阶段，如果存在bug请大家提出，我会及时更改。
七.下载
浙公网安备 33010602011771号