jQuery QueryBuilder 使用教程
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": "^