jQuery实现高级检索功能

2020-05-24 21:29:18易采站长站整理

初学JQuery,写了一个高级检索的动态输入框,如图所示: 

实现的功能:

* 当选择属性下拉框中不同类型(字符串、数字、日期)的属性时,后面弹出不同数量的和不同格式的文本框(字符串弹出一个输入文本框,数字型的弹出两个输入文本框,日期型的弹出两个日期选择控件);

* 单击“添加条件”链接后,下面会增加一行条件输入,可以选择逻辑(与、或、非)、属性。

html部分代码如下:


< div id= "0" class ="row" >

< dd >

<select id = "condition" class= "span2" style = 'width:110px;' >

<option value= 'and' >与 </option >
<option value = 'or'> 或</ option>
<option value= 'not' >非 </option >

</select >

</dd >

< dd >< select id= "attrlist" class= "span2" style = 'width:110px;' >
<s:iterator value= "equipAttrs" id ="attrs" >
<option value= '< s:property value= "#attrs[2]" />' ><s:property value= "#attrs[1]" /></option >

</s:iterator >

</select ></dd >

< dd> <input id = "rangestart" type= "text" class = "span2 search-query"></ dd>
< dd> <div id = "rangeend"> --< input type= "text" class = "span2 search-query" ></div ></dd >
< dd> <div id = "timerange">< input type= "text" id = "datetimepicker1"> --
<input type = "text" id= "datetimepicker2" >
</div ></dd >
<div id = "clickgroup">

< dd> <button id = "searchButton" type= "submit" class = "btn"> 搜索</ button></ dd>
< dd> <a id = "multiSelect" href= "#"> 添加条件 </a ></dd >

</div >
</div >
< div id= "lastrow" ></div >

JQuery代码:


< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></ script >
< script type= "text/javascript" >
//用于动态修改新生成的节点id,便于定位子节点,为其添加事件
var conditionCount=1;

$(document).ready( function(){
$( "#rangeend").hide();
$( "#timerange").hide();
$( "#condition").hide();
//为初始节点添加事件
selectClick( "0");
//日期选择控件参数设置
$( '#[id*=datetimepicker]').datetimepicker({
format: 'yyyy-mm-dd',
todayBtn: true,
startView:4,
minView:2,
maxView:4,
startView:4,
todayHighlight: true,
initialDate: new Date(),
autoclose: true,
});
//为“添加条件”添加事件