1.此插件用于过滤搜索的功能,功能强大,可实现复杂条件过滤,单选多选的等条件的过滤。还可以在插件中调用其他插件。

  下载地址和文档阅读:http://querybuilder.js.org/

  效果图:

2.全英文文档,感觉学起来有丢丢的困难==

需要引入的文件

<link rel="stylesheet" href="${ctx}/resource/plugins/QueryBuilder/css/query-builder.default.min.css">

//基于jquery,还要引入jquery框架

<script type="text/javascript" src="${ctx}/resource/plugins/QueryBuilder/js/query-builder.standalone.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/QueryBuilder/i18n/query-builder.zh-CN.js"></script>//中文显示 

3.基本用法

<div id='builder-basic'></div>
$('#builder-basic').queryBuilder({
  plugins: {
'bt-selectpicker':{liveSearch:true,style:'btn-inverse'},//引用了selectpicker
'bt-tooltip-errors':{delay:100},
},
  filters: data,
  rules: rules_basic })

上面的引用了selectpicker插件,使搜索框带一个搜索字段的功能。

例如:

未完待续。。。。。。。。。。。。

jquery queryBuilder过滤插件的使用的更多相关文章

  1. MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

  2. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  3. Vanilla Masker – 功能强大的输入过滤插件

    Vanilla Masker 是一个纯 JavaScript 实现的输入内容过滤和自动转换插件.现在你可以使用一个简单而纯粹的 JavaScript 库来控制你的 input 元素,而不需要加载 jQ ...

  4. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

  5. 提示用户体验的最佳免费 Jquery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  6. 10款jQuery文本高亮插件

    [编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...

  7. Jquery的部分插件

    jQuery Easing:jQuery 动画效果扩展 jQuery Migrate:jQuery 应用迁移辅助插件Modernizr:专为HTML5和CSS3开发的功能检测类库jQuery Flex ...

  8. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  9. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

随机推荐

  1. Php+Redis队列原理

    我们新建一个文件queue.php <?php while(true){ echo 1; sleep(1); } 然后中 命令行里面 执行 php queue 你会发现每秒钟输出一个1:等了很久 ...

  2. ubuntu重置root密码(转载自https://zhinan.sogou.com/guide/detail/?id=316512881651)

    ubuntu忘记root密码怎么办?如果普通用户忘记了怎么办 ### 第一种方法:无论你是否申请了root帐号,或是普通账号密码忘记了都没有问题的! 1. 重启ubuntu,随即长按shift进入gr ...

  3. 数据结构(5) 第五天 快速排序、归并排序、堆排序、高级数据结构介绍:平衡二叉树、红黑树、B/B+树

    01 上次课程回顾 希尔排序 又叫减少增量排序 increasement = increasement / 3 + 1 02 快速排序思想 思想: 分治法 + 挖坑填数 分治法: 大问题分解成各个小问 ...

  4. 【Tool】Augmentor和imgaug——python图像数据增强库

    Augmentor和imgaug--python图像数据增强库 Tags: ComputerVision Python 介绍两个图像增强库:Augmentor和imgaug,Augmentor使用比较 ...

  5. keepalived实现IP地址高可用

    yum -y install keepalived vim /etc/keepalived/keepalived.conf global_defs { router_id LVS_DEVEL_ngin ...

  6. MyBatis中的大于号小于号表示

    可以使用转义字符把大于号和小于号这种直接替换掉: select* from table where '字段1'>=10怎么表示,问题来啦 xml转义可以使用 根据这个规则上面的sql写法应该变成 ...

  7. MongoDB记录(坑在末尾)

    Mongo数据库基本配置 基本配置 密码配置 pymongo认证 参考资料 基本配置 基本配置包括 1.端口号:默认27017,安全性较低 2.数据库文件位置 3.日志文件位置 4.日志写入模式 5. ...

  8. socketserver模块初识

    python提供了两个级别访问的网络服务: 低级的网络服务支持基本的socket,它提供了标准的BSD sockets API,可以访问底层操作系统socket接口的全部方法 高级别的网络服务模块so ...

  9. Profile 动态切换环境

    一.多 Profile 文件我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用 application.properties 的 ...

  10. C/C++学习:函数指针

    曾经在书上看到函数指针相关的都没怎么重视.可是近期在实际的工作中却派上了用场.所以认真地学习了一遍. 函数指针的申明 申明一个函数指针非常easy,就是将函数申明中的函数名替换为一个指针就可以: C/ ...