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实现二级联动效果
Mar 30 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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生成WAP页面
2006/10/09 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
nodeJS模块简单用法示例
2018/04/21 NodeJs
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python中的函数作用域
2018/05/07 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Python序列类型的打包和解包实例
2019/12/21 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
秘书岗位职责
2013/11/18 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
高二英语教学反思
2014/01/19 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
五四演讲稿范文
2014/09/03 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js