jQuery QueryBuilder 实战6 个关键点从可视化界面到生成 SQL【免费下载链接】jQuery-QueryBuilderjQuery plugin offering an interface to create complex queries项目地址: https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilderjQuery QueryBuilder 是一款 jQuery 插件把写查询条件变成点选下拉框的可视化操作你声明好字段用户在界面上组合 AND/OR 条件前端直接产出 JSON 规则、SQL 或 MongoDB 查询语句。适合需要做前端条件筛选和可视化生成 SQL 的场景。什么场景值得引入它判断标准很简单——你的产品里是否存在用户自己定义条件的环节列表页高级筛选后台管理页面里多条件组合检索传统做法是手写一堆表单和后端拼装逻辑查询规则可视化把 SQL 里的 WHERE 部分交给非技术人员配置避免每次改条件都走开发条件持久化用户建好的规则要存下来、下次回显继续编辑而不是每次从零开始。只要命中任意一条用一个现成的查询构建器比自己写表单拼装逻辑要省事得多。⚡ 最快接入一条命令 几行引入先拿到仓库git clone https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilder进入项目后装依赖并构建产物dist/目录会生成打包好的 JS 和 CSSnpm install npm run build页面里按顺序引入样式和脚本核心只有这几行link relstylesheet hrefdist/css/query-builder.default.css script srcnode_modules/jquery/dist/jquery.js/script script srcnode_modules/bootstrap/dist/js/bootstrap.js/script script srcdist/js/query-builder.js/script div idbuilder/div script $(function() { $(#builder).queryBuilder(); }); /script依赖关系一句话讲清QueryBuilder 基于jQuery实现界面控件下拉、按钮依赖Bootstrap渲染样式文件query-builder.default.css提供默认外观。DOM 就绪后对任意容器调用$(#builder).queryBuilder(options)即完成初始化不传参数时使用内置默认配置。所有依赖的完整可运行页面可以直接参考 examples/ 下的示例页。 在界面上搭出嵌套条件初始化后容器里会渲染出查询构建区域顶部是AND / OR切换按钮用来决定同级条件之间是且还是或搭一条规则的操作流程点右上角Add rule新增一行条件第一个下拉选字段如 Price第二个选操作符如 less、equal、contains再填值如 10.25点Add group新增条件组把规则放进组里就形成了嵌套每组独立拥有 AND/OR 开关组与组之间继续叠加逻辑关系。截图里就是一个两层结构外层Price less 10.25且内层组满足Category equal Movies或Name contains bilbo任一条件。每行右侧的Delete按钮用于删除条件多层嵌套条件组就是这么逐层搭出来的。 按场景改配置字段、校验与权限默认配置只能跑通演示真实业务要改两处filters字段清单和权限标记。声明字段与操作符filters告诉插件下拉框里有哪些字段可选type决定值输入框的形态operators按optgroup分组操作符方便下拉框分栏展示var options { allow_empty: true, // 允许空查询 operators: [ { type: equal, optgroup: basic }, { type: not_equal, optgroup: basic }, { type: contains, optgroup: strings } ], filters: [ { id: name, label: 名称, type: string }, { id: price, label: 价格, type: double } ] }; $(#builder).queryBuilder(options);更多可选配置项建议在构建后的dist/产物或官方文档里按需查阅用到哪个查哪个。给字段加格式校验在 filter 里挂validation用户填的值不匹配正则时会显示你写的提示文案错误不用等提交才暴露{ id: custom, label: 自定义编号, type: string, validation: { format: /^[A-Za-z0-9]$/, messages: { format: 只能包含字母和数字 } } }用 flags 锁定结构flags控制用户能改动什么。比如条件组里标记condition_readonly: true后该组的 AND/OR 切换被禁用标记no_delete: true后对应的 Delete 按钮不再出现rules: [{ condition: AND, flags: { condition_readonly: true, no_delete: true }, rules: [] }]适合框架固定、只允许用户填值的表单式查询。 把查询结果交给后端三种输出怎么选条件搭好后用queryBuilder(方法名)把结果取出来三种输出对应不同去向var json $(#builder).queryBuilder(getRules); // 结构化规则 var sql $(#builder).queryBuilder(getSQL); // SQL 条件字符串 var mongo $(#builder).queryBuilder(getMongo); // MongoDB 查询对象getRules返回{ condition, rules }结构的 JSON。适合存储和回显——存库、提交表单、下次用setRules回填都拿它getSQL生成 SQL 条件片段直接用于可视化生成 SQL的报表或数据查询页。需要先启用 sql-support 插件getMongo生成{ field: { $op: value } }形式的查询对象后端接 MongoDB 时直接用。来自 mongodb-support 插件。选择建议先getRules拿到结构做持久化再按后端类型转 SQL 或 Mongo一份规则两种出口。 换语言包与深色皮肤加载语言包项目在 src/i18n/ 目录内置了 20 多种语言的翻译文件。构建后把目标语言脚本引入页面再调用切换$.getScript(dist/i18n/query-builder.zh-CN.js, function() { $(#builder).queryBuilder(setLang, zh-CN); });Add ruleDelete这些界面文案随即变成对应语言用户看到的不再是英文按钮。切深色主题深色皮肤是另一份 CSSquery-builder.dark.css只需替换样式链接不用动 JS$(#qb-theme).attr(href, dist/css/query-builder.dark.css);下一步先跑通最小示例照最快接入一节引入三个文件、调一次queryBuilder()再回来调配置去插件目录挑能力src/plugins/ 下有 sortable拖拽排序、filter-description字段说明、sql-support、mongodb-support 等按需挂载通读核心源码src/里的 core.js、main.js 按模块拆分读懂后再自定义 changer 事件扩展成本最低。【免费下载链接】jQuery-QueryBuilderjQuery plugin offering an interface to create complex queries项目地址: https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考