jQuery實現(xiàn)高級檢索功能

更新時間：2019年05月28日 10:14:52 作者：Luyna

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)高級檢索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

初學(xué)JQuery，寫了一個高級檢索的動態(tài)輸入框，如圖所示：

實現(xiàn)的功能：

* 當(dāng)選擇屬性下拉框中不同類型（字符串、數(shù)字、日期）的屬性時，后面彈出不同數(shù)量的和不同格式的文本框（字符串彈出一個輸入文本框，數(shù)字型的彈出兩個輸入文本框，日期型的彈出兩個日期選擇控件）；

* 單擊“添加條件”鏈接后，下面會增加一行條件輸入，可以選擇邏輯（與、或、非）、屬性。

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" >
//用于動態(tài)修改新生成的節(jié)點id，便于定位子節(jié)點，為其添加事件
var conditionCount=1;

$(document).ready( function(){
  $( "#rangeend").hide();
  $( "#timerange").hide();
  $( "#condition").hide();
  //為初始節(jié)點添加事件
  selectClick( "0");
  //日期選擇控件參數(shù)設(shè)置
  $( '#[id*=datetimepicker]').datetimepicker({
   format: 'yyyy-mm-dd',
   todayBtn: true,
   startView:4,
   minView:2,
   maxView:4,
   startView:4,
   todayHighlight: true,
   initialDate: new Date(),
   autoclose: true,  
  }); 
  //為“添加條件”添加事件
  $( "#multiSelect").click( function(event){
   var $nextrow=$( "#0").clone(); //克隆初始節(jié)點
   $nextrow.attr( "id",conditionCount); //修改復(fù)制的節(jié)點id，用于定位子節(jié)點
   $( "#lastrow").before($nextrow);
   $( "#"+conditionCount+ " select[id='condition']").show();
   $( "#"+conditionCount+ " input[id='rangestart']").show();
   $( "#"+conditionCount+ " div[id='rangeend']" ).hide();
   $( "#"+conditionCount+ " div[id='timerange']" ).hide();
   $( "#"+conditionCount+ " div[id='clickgroup']" ).hide();
   var $t1=$( "#"+conditionCount+ " div[id='timerange']").children();
   var at=$t1.attr( "id");
   $t1.attr( "id",at+ ""+conditionCount);
   $t1=$t1.next();
   var at1=$t1.attr( "id");
   $t1.attr( "id",at1+ ""+conditionCount);
   //為新插入的節(jié)點添加事件 
   selectClick(conditionCount);
   conditionCount++;

   $( '#[id*=datetimepicker]').datetimepicker({
    format: 'yyyy-mm-dd',
    todayBtn: true,
    startView:4,
    minView:2,
    maxView:4,
    startView:4,
    todayHighlight: true,
    initialDate: new Date(),
    autoclose: true,  
   }); 

  });
});


  function selectClick(flag){
   /* 三個對象如果放在這里定義的話會出錯，每個選擇事件都會控制最下面一行的文本框的顯示，如果在下面三個事件中分別添加這三行，則事件觸發(fā)正常   
   $start=$("div[id="+flag+"]>dd>input[id='rangestart']");
   $end=$("div[id="+flag+"]>dd>div[id='rangeend']");
   $time=$("div[id="+flag+"]>dd>div[id='timerange']"); */
   $( "#"+flag+ ">dd>select[id='attrlist']>option[value*='Date']" ).click( function(){
    $start=$( "div[id="+flag+ "]>dd>input[id='rangestart']" );
    $end=$( "div[id="+flag+ "]>dd>div[id='rangeend']" );
    $time=$( "div[id="+flag+ "]>dd>div[id='timerange']" );
    $start.hide();
    $end.hide();
    $time.show();
   });
   $( "#"+flag+ ">dd>select[id='attrlist']>option[value*='String']" ).click( function(){
    $start=$( "div[id="+flag+ "]>dd>input[id='rangestart']" );
    $end=$( "div[id="+flag+ "]>dd>div[id='rangeend']" );
    $time=$( "div[id="+flag+ "]>dd>div[id='timerange']" );
    $start.show();
    $end.hide();
    $time.hide();
   });
   $( "#"+flag+ ">dd>select[id='attrlist']>option[value*='Float']" ).click( function(){
    $start=$( "div[id="+flag+ "]>dd>input[id='rangestart']" );
    $end=$( "div[id="+flag+ "]>dd>div[id='rangeend']" );
    $time=$( "div[id="+flag+ "]>dd>div[id='timerange']" );
    $start.show();
    $end.show();
    $time.hide();
   });
  }

</ script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: