软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > 用于查询操作的javascript类库[附源码]

用于查询操作的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() {
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,得到类似下图:

相关阅读
网友评论
栏目导航
推荐软件