jQuery实现高级检索功能


Posted in jQuery onMay 28, 2019

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

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,  
  }); 
  //为“添加条件”添加事件
  $( "#multiSelect").click( function(event){
   var $nextrow=$( "#0").clone(); //克隆初始节点
   $nextrow.attr( "id",conditionCount); //修改复制的节点id,用于定位子节点
   $( "#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);
   //为新插入的节点添加事件 
   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){
   /* 三个对象如果放在这里定义的话会出错,每个选择事件都会控制最下面一行的文本框的显示,如果在下面三个事件中分别添加这三行,则事件触发正常   
   $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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
通过jQuery学习js类型判断的技巧
May 27 #jQuery
jQuery中使用validate插件校验表单功能
May 24 #jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
You might like
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
继续学习javascript闭包
2015/12/03 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python 异常处理的实例详解
2017/09/11 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python flask框架post接口调用示例
2019/07/03 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python持续监听文件变化代码实例
2020/07/22 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
酒店大堂副理的职责范文
2014/02/13 职场文书
考试作弊检讨
2015/01/27 职场文书
新学期家长寄语2016
2015/12/03 职场文书
导游词之襄阳古城
2019/09/27 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
python状态机transitions库详解
2021/06/02 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers