基于基于jquery用于查询操作的实现代码用于查询操作的实现代码
通过javascript得到用户操作改变url参数从而实现某些功能,如查询(具体的查询由服务器端代码得到url中的参数
组成查询语句实现)。
一一.本文干些啥:本文干些啥:
通过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>