JQuery实现高级检索功能
https://blog.csdn.net/muziruoyi/article/details/44494465
< 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 >
< 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>
< div id= "0"class ="row" >
< dd >
<select id = "condition"class= "span2" style = 'width:110px;' >
<optionvalue= 'and' >与 </option >
<optionvalue = 'or'> 或</ option>
<optionvalue= 'not' >非 </option >
</select >
</dd >
< dd >< select id= "attrlist"class= "span2" style = 'width:110px;' >
<s:iterator value= "equipAttrs" id ="attrs" >
<optionvalue= '< 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实现高级检索功能的更多相关文章
- 基于NEO4J的高级检索功能
基于NEO4J的高级检索 一.需求 二.创建索引 1.索引自动更新配置 2.执行带有索引自动更新配置的过程 三.查询索引 1.LUCENE查询语法 2.实现高级检索的核心:LUCENE QUERY语句 ...
- SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能(maven)
SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...
- 百度API的经历,怎样为多个点添加带检索功能的信息窗口
不管我们要做什么样的效果,APIKey(密钥)都是不可缺少的要件,所以我们需要先去百度申请我们的APIKey!!! 伸手党,请直接到页面底部获取完整代码! 最近做一个门店查询的内容展示,考虑到用户直观 ...
- Elasticsearch实现类Google高级检索
文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247483914&idx=1&sn=436f814 ...
- 百度地图API 批量添加 带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 手动实现jQuery Tools里面tab功能
平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- 百度地图 Android SDK - 检索功能使用的简单演示样例
百度地图 SDK 不仅为广大开发人员提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发人员提供了多种 LBS 检索的能力. 通过这些接口,开发人员能够轻松的訪问百度的 LBS 数据,丰富自己的移 ...
随机推荐
- Unity 4.x 资源加载
using UnityEngine; using System.Collections; using System.IO; public class LoadResource : MonoBehavi ...
- Java-Java语言
2017-10-03 21:25:38 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.J ...
- LeetCode--108--将有序数组转化为二叉搜索树
问题描述: 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定有序数组: [-10 ...
- laravel时间判断
$now = Carbon::now(); if ($now >= '2019-01-02') { }
- 『Sklearn』框架自带数据集接口
自带数据集类型如下: # 自带小型数据集# sklearn.datasets.load_<name># 在线下载数据集# sklearn.datasets.fetch_<name&g ...
- hdu-1404-博弈+打表
Digital Deletions Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- JavaScript In OA Framework
原文地址:JavaScript In OA Framework (需FQ) “To be or not to be…… is the question…..!” The famous soliloqu ...
- 使用a标签实现软件下载及下载量统计
通常最简单的软件下载就是采用如下方式: <a id="welcomeMiddleBtn" href="${basePath}/files/client/instal ...
- Oracle 11g 在audit_file_dest目录下产生大量的aud文件
一.adump目录数据暴增现象 发现某台数据库服务器的根目录的使用率在暴涨,发现Oracle数据库的adump目录,每秒生成一个dump文件.数据库并未开通审计外部记录.为什么adump目录会生成那么 ...
- linux fdisk 添加硬盘,分区,挂载,永久挂载
具体步骤: 1.SSH登陆服务器: 2.列出所有硬盘: 命令:ll /dev/disk/by-path 我这里还有个sda 3.查看磁盘分区情况: 命令 :fdisk -l 最上面两部分表示我有两个物 ...