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

2020-05-22 21:55:42易采站长站整理

<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页面。得到下图:



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();会发现查询其它的字体颜色为黑色,而非先前的红色,如图,