基于jquery用于查询操作的实现代码


Posted in Javascript onMay 10, 2010

一.本文干些啥:
通过javascript得到用户操作改变url参数从而实现某些功能,如查询(具体的查询由服务器端代码得到url中的参数组成查询语句实现)。
二.准备工作:
一个JQuery类库(我使用的版本为:1.3.2),一个工具类库(Tool.js,基本都是网上搜索来的代码),一个查询类库(Search.js,自己写的),一个htm页面(用来做练习),将这些js代码添加进页面htm页面。
htm页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<style type="text/css"> 
.initCss{color:#666666} 
</style> 
<script type="text/javascript" src="JS/jquery.js"></script> 
<script type="text/javascript" src="JS/Tool.js"></script> 
<script type="text/javascript" src="JS/Search.js"></script> 
<script type="text/javascript"> 
$(function() { 
var search = new Search('initCss'); 
search._UrlHtmlIdAry['other'] = '#dropOther'; 
search._UrlParmAry['other'] = 'other'; 
search._UrlHtmlIdAry['otherTxt'] = '#txtOther'; 
search._UrlParmAry['otherTxt'] = 'otherTxt'; 
search.InitBind(); 
search.SearchApply('#searchBut', 'search.htm'); 
}); 
function Other() { 
$('#txtOther').css('color', 'red'); 
} 
</script> 
</head> 
<body> 
<div>时间:<input id="txtDate" type="text" /></div> 
<div>开始时间:<input id="txtDateBegin" type="text" /></div> 
<div>结束时间:<input id="txtDateEnd" type="text" /></div> 
<div>查询1: 
<select id="dropWay"> 
<option value="">全部</option> 
<option value="1">部分一</option> 
<option value="2">部分二</option> 
</select> 
</div> 
<div>查询2: 
<select id="dropOther"> 
<option value="">Other</option> 
<option value="1">Other1</option> 
<option value="2">Other2</option> 
</select> 
</div> 
<div>查询:<input id="txtQuery" type="text" /></div> 
<div>查询其它:<input type="text" id="txtOther" /></div> 
<div>仅查询自己的数据:<input type="checkbox" id="cbShowMe" /></div> 
<div><input type="button" id="searchBut" value="查询" /></div> 
</body> 
</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页面。得到下图:

基于jquery用于查询操作的实现代码

b.将前面的htm页面中的js代码中的var search = new Search('initCss');改为var search = new Search();刷新页面,我们会发现页面中的“关键字...”,“xxxx-xx-xx”,和下拉框中的字体颜色改变了,如图:

基于jquery用于查询操作的实现代码

这就是这个参数的作用。将代码还原。
 

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,得到类似下图:

基于jquery用于查询操作的实现代码

js代码已将url参数内容绑定到页面中。
 

d.现在去掉

search._UrlHtmlIdAry['other'] = '#dropOther';

search._UrlParmAry['other'] = 'other';

search._UrlHtmlIdAry['otherTxt'] = '#txtOther';

search._UrlParmAry['otherTxt'] = 'otherTxt';

刷新页面,会发现未给查询2和查询其它绑定查询内容,这是因为此刻_UrlHtmlIdAry和_UrlParmAry并没有对应的值,未操作相应的数据。如图,

基于jquery用于查询操作的实现代码

还原代码。
 

e.现在将search.InitBind(Other);改为search.InitBind();会发现查询其它的字体颜色为黑色,而非先前的红色,如图,

基于jquery用于查询操作的实现代码

这是因为没有为InitBind()方法添加一个方法参数,这个参数能在不改变InitBind()方法的情况下进行一个操作内容的扩展。将代码还原。
 

f.SearchApply方法第一个参数是‘#'加上一个操作按钮的id(Search类会为该按钮添加回车事件),第二个参数是页面定向的url地址。
五 代码
tools.js

//工具类 
function Tool() { 
//字符串的替换格式化 ('a{0}c{1}','b','d')=> abcd 
this.FormatStr = function(str, ary) { 
for (var a in ary) { 
str = str.replace('{' + a + '}', ary[a]); 
} 
return str; 
} 
//字符串不为空 
this.IsNoNullOrEmpty = function(str) { 
if (typeof (str) == "undefined" || str == null || str == '' || str == 'undefined') { 
return false; 
} 
else { 
return true; 
} 
} 
//得到URL参数 
this.GetUrlParms = function() { 
var args = new Object(); 
var query = location.search.substring(1); 
var pairs = query.split("&"); 
for (var i = 0; i < pairs.length; i++) { 
var pos = pairs[i].indexOf('='); 
if (pos == -1) continue; 
var argname = pairs[i].substring(0, pos); 
var value = pairs[i].substring(pos + 1); 
args[argname] = unescape(value); 
} 
return args; 
} 
//查找字符串中需要字符的位置,isCase = true 表示忽略大小写 
this.FindStr = function(str, findStr, isCase) { 
if (typeof (findStr) == 'number') { 
return str.indexOf(findStr); 
} 
else { 
var re = new RegExp(findStr, isCase ? 'i' : ''); 
var r = str.match(re); 
return r == null ? -1 : r.index; 
} 
} 
//查找字符串找是否存在相应的字符 isCase = true 表示忽略大小写 
this.IsFindStr = function(str, findStr, isCase) { 
return this.FindStr(str, findStr, isCase) > 0 ? true : false; 
} 
//验证短日期2010-2-2 
this.IsShortTime = function(str) { 
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
if (r == null) return false; 
var d = new Date(r[1], r[3] - 1, r[4]); 
return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]); 
} 
}

search.js
function Search(initCss) { 
this._Tool = new Tool(); 
this._UrlParmAry = { way: 'way', query: 'query', date: 'date', me: 'me', bdate: "bdate", edate: "edate" }; 
this._UrlHtmlIdAry = { way: '#dropWay', query: '#txtQuery', date: '#txtDate', me: '#cbShowMe', bdate: "#txtDateBegin", edate: "#txtDateEnd" }; 
this._DateInitStr = 'xxxx-xx-xx'; 
this._QueryInitStr = '关键字...'; 
this._Args = this._Tool.GetUrlParms(); 
this.InitBind = function(fnOther) { 
for (var arg in this._Args) { 
$(this._UrlHtmlIdAry[arg]).attr('checked', true); 
$(this._UrlHtmlIdAry[arg]).val(unescape(this._Args[arg])); 
} 
this.InitCssInfo(fnOther); 
} 
this.SearchApply = function(searchId, gotoUrl) { 
var searchObj = this; 
$(searchId).click(function() { 
window.location.href = gotoUrl + searchObj.GetUrlParms(); 
}); 
$(document).keydown(function(event) { 
if (event.which == 13) { 
$(searchId).focus().click(); 
} 
}); 
} 
this.GetUrlParms = function() { 
var parms = '?'; 
var isFirst = true; 
for (var parm in this._UrlParmAry) { 
htmlId = this._UrlHtmlIdAry[parm]; 
htmlVal = escape($(htmlId).val()); //时间txt处理 
if (this._Tool.IsFindStr(htmlId, 'date', true)) {//|| this._Tool.IsFindStr(htmlId, 'Begin', true) || this._Tool.IsFindStr(htmlId, 'End', true)) { 
if (this._Tool.IsNoNullOrEmpty(htmlVal) && htmlVal != this._DateInitStr && this._Tool.IsShortTime(htmlVal)) { 
if (isFirst != true) parms += "&"; 
parms += parm + '=' + htmlVal; isFirst = false; 
} 
} 
//处理关键字 
else if (this._Tool.IsFindStr(htmlId, 'query', true)) { 
if (this._Tool.IsNoNullOrEmpty(htmlVal) && unescape(htmlVal) != this._QueryInitStr) { 
if (isFirst != true) parms += "&"; 
parms += parm + '=' + htmlVal; isFirst = false; 
} 
} 
//处理下拉框 
else if (this._Tool.IsFindStr(htmlId, 'drop', true)) { 
if (this._Tool.IsNoNullOrEmpty(htmlVal)) { 
if (isFirst != true) parms += "&"; 
parms += parm + '=' + htmlVal; isFirst = false; 
} 
} 
//处理checkbox 
else if (this._Tool.IsFindStr(htmlId, 'cb', true)) { 
if ($(htmlId).attr('checked')) { 
if (isFirst != true) parms += "&"; 
parms += parm + '=t'; isFirst = false; 
} 
} 
//如果关键查询 放在 其它文本查询之前 
else if (this._Tool.IsFindStr(htmlId, 'txt', true)) { 
if (this._Tool.IsNoNullOrEmpty(htmlVal)) { 
if (isFirst != true) parms += "&"; 
parms += parm + '=' + htmlVal; isFirst = false; 
} 
} 
} 
if (parms == '?') parms = ''; 
return parms 
} 
this.InitCssInfo = function(fnOther) { 
var htmlId; 
var urlParm; 
for (var arg in this._UrlHtmlIdAry) { 
urlParm = this._UrlParmAry[arg]; 
htmlId = this._UrlHtmlIdAry[arg]; 
//时间 
if (this._Tool.IsFindStr(htmlId, 'date', true)) {// || this._Tool.IsFindStr(htmlId, 'begin', true) || this._Tool.IsFindStr(htmlId, 'end', true)) { 
if ($(htmlId).val() == this._DateInitStr) $(htmlId).val(''); //兼容FF的刷新,FF刷新后仍会将先前的值带到刷新后的页面 
if ($(htmlId).val() == '') { 
$(htmlId).val(this._DateInitStr); 
$(htmlId).addClass(initCss); 
} 
this.TimeTxTEvent(htmlId); 
} 
//查询 
else if (this._Tool.IsFindStr(htmlId, 'query', true)) { 
if ($(htmlId).val() == this._QueryInitStr) $(htmlId).val(''); //兼容FF的刷新,FF刷新后仍会将先前的值带到刷新后的页面 
if ($(htmlId).val() == '') { 
$(htmlId).val(this._QueryInitStr); 
$(htmlId).addClass(initCss); 
} 
this.QueryTxTEvent(htmlId); 
} 
else if (this._Tool.IsFindStr(htmlId, 'drop', true)) { 
dropCss(htmlId); 
this.DropEvent(htmlId); 
} 
} 
if (typeof (fnOther) == 'function') { 
setTimeout(fnOther, 0); 
} 
} 
this.QueryTxTEvent = function(htmlId) { 
var searchObj = this; 
$(htmlId).blur(function() { 
$(this).removeClass(initCss); 
if ($(this).val() == '') { 
$(this).val(searchObj._QueryInitStr); 
$(this).addClass(initCss); 
} 
}); 
$(htmlId).focus(function() { 
if ($(this).val() == searchObj._QueryInitStr) { 
$(this).val(''); 
$(this).removeClass(initCss); 
} 
}); 
} 
this.TimeTxTEvent = function(htmlId) { 
var searchObj = this; 
//离开事件 
$(htmlId).blur(function() { 
//为真确填写的日期 
if (searchObj._Tool.IsShortTime($(this).val())) { 
} 
else if ($(this).val() != '') { 
alert('请正确输入日期格式,如:2010-1-1'); 
} 
if ($(this).val() == '') { 
$(this).val(searchObj._DateInitStr); 
$(this).addClass(initCss); 
} 
else { 
$(this).removeClass(initCss); 
} 
}); 
$(htmlId).focus(function() { 
if ($(this).val() == searchObj._DateInitStr) { 
$(this).val(''); 
$(this).removeClass(initCss); 
} 
}); 
} 
this.DropEvent = function(htmlId) { 
$(htmlId).change(function() { 
dropCss(htmlId); 
}); 
} 
//为了浏览器兼容,不同游览器对select的字体颜色设置不同 
function dropCss(htmlId) { 
if ($(htmlId).val() != '') { 
$(htmlId).removeClass(initCss); 
var count = 0; 
$(htmlId + ' option:first').addClass(initCss); 
} 
else { 
$(htmlId).addClass(initCss); 
var count = 0; 
$(htmlId + ' option').each(function() { 
if (count > 0) { 
$(this).css('color', 'black'); 
} 
count++; 
}); 
} 
} 
}

六.总结:
这个Search类为工作带来了许多便捷,当然自己对js及JQuery的学习还是起步阶段,如果存在bug请大家提出,我会及时更改。

七.下载
代码打包下载

Javascript 相关文章推荐
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
jquery tab标签页的制作
May 10 #Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 #Javascript
js 小数取整的函数
May 10 #Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 #Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 #Javascript
JavaScript几种形式的树结构菜单
May 10 #Javascript
js function使用心得
May 10 #Javascript
You might like
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
女大学生自我鉴定
2013/12/09 职场文书
《掌声》教学反思
2014/02/23 职场文书
知识竞赛主持词
2014/03/26 职场文书
付款委托书范本
2014/04/04 职场文书
外贸业务员求职信
2014/06/16 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Java中的Kotlin 内部类原理
2022/06/16 Java/Android