【亲测免费】 jQuery QueryBuilder 使用教程

2026-01-17 08:40:00作者：庞眉杨Will

1. 项目的目录结构及介绍

jQuery QueryBuilder 是一个用于创建查询和过滤器的 UI 组件。以下是其基本目录结构：

jQuery-QueryBuilder/
├── dist/
│   ├── css/
│   ├── img/
│   └── js/
├── docs/
├── src/
│   ├── css/
│   ├── img/
│   └── js/
├── test/
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bower.json
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── package.json
└── README.md

目录介绍：

dist/：包含编译后的文件，包括 CSS、图片和 JavaScript 文件。
docs/：包含项目的文档。
src/：包含源代码，包括 CSS、图片和 JavaScript 文件。
test/：包含测试文件。
.gitignore：Git 忽略文件。
.jshintrc：JSHint 配置文件。
.travis.yml：Travis CI 配置文件。
bower.json：Bower 包管理文件。
CONTRIBUTING.md：贡献指南。
Gruntfile.js：Grunt 任务配置文件。
LICENSE：许可证文件。
package.json：NPM 包管理文件。
README.md：项目说明文件。

2. 项目的启动文件介绍

jQuery QueryBuilder 的启动文件主要是 dist/js/query-builder.standalone.js，这是一个独立的版本，包含了所有必要的依赖。

启动文件使用示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="dist/css/query-builder.default.min.css">
    <script src="dist/js/query-builder.standalone.js"></script>
</head>
<body>
    <div id="builder"></div>
    <script>
        $('#builder').queryBuilder({
            filters: [
                {
                    id: 'name',
                    label: 'Name',
                    type: 'string'
                }
            ]
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

jQuery QueryBuilder 的配置文件主要是 Gruntfile.js 和 package.json。

`Gruntfile.js`：

Gruntfile.js 是 Grunt 任务配置文件，用于自动化构建过程，包括编译、压缩和测试等任务。

`package.json`：

package.json 是 NPM 包管理文件，包含了项目的依赖、脚本和其他元数据。

{
  "name": "jQuery-QueryBuilder",
  "version": "2.7.0",
  "description": "jQuery plugin for user friendly query/filter creator",
  "main": "dist/js/query-builder.js",
  "scripts": {
    "test": "grunt test"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mistic100/jQuery-QueryBuilder.git"
  },
  "author": "Damien \"Mistic\" Sorel",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/mistic100/jQuery-QueryBuilder/issues"
  },
  "homepage": "https://querybuilder.js.org",
  "dependencies": {
    "jquery": ">=1.10.0"
  },
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^3.0.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-sass": "^