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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现开关灯效果
Aug 02 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
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
python中PIL安装简单教程
2016/04/21 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python实现飞船大战
2020/04/24 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
关于VPN
2012/06/10 面试题
促销活动计划书
2014/05/02 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
nginx lua 操作 mysql
2022/05/15 Servers