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 相关文章推荐
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
vue实现抽屉弹窗效果
2020/11/15 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
Python单例模式实例详解
2017/03/01 Python
python在非root权限下的安装方法
2018/01/23 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
在django模板中实现超链接配置
2019/08/21 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
2014学年自我鉴定
2014/02/23 职场文书
目标管理责任书
2014/04/15 职场文书
支部书记四风对照材料
2014/08/28 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
MySQL基础(二)
2021/04/05 MySQL
SQL 聚合、分组和排序
2021/11/11 MySQL