From b1448edbd4c1b010b6874a1b7d9d5a342557aacc Mon Sep 17 00:00:00 2001
From: Jim Fitzpatrick This demo shows how to integrates widgets into QueryBuilder rules. Widgets used are This demo shows how to integrate widgets into QueryBuilder rules. Widgets used are Bootstrap Datepicker,
Bootstrap Slider and Selectize. There are two types of events: triggers are used to identify a point in the code and changers are
- used to modify a value before it used (eg: template, output rules). Both types are used the same way with the jQuery
+ used to modify a value before it is used (eg: template, output rules). Both types are used the same way with the jQuery
Plugins can simply add public methods or make use of events to change the behavior of the builder. Each plugin is a folder in Each plugin is a folder in the Plugins are included in the The plugins' SCSS files are imported at the end of the core SCSS, allowing you to use all defined variable. One
interesting variable is Only main methods are described are. Only main methods are described. Returns a boolean whereas the builder is valid or not. Use the Returns a boolean indicating whether the builder is valid or not. Use the Clears the builder and set new rules. The parameters must have the same structure has the output of Clears the builder and sets new rules. The parameters must have the same structure as the output of QueryBuilder comes with two colors-schemes: default
(clear) and dark. Change the active theme by switching stylesheet, you cannot use
- the two colors-schemes on the same page. QueryBuilder is bundle with an
+ QueryBuilder is bundled with an
extensive list of operators. You can change which operators are available for each filter (see filters configuration) but you can also modify/reorder the operators globally and even add new
custom operators. For very custom customizations, QueryBuilder provides a way to completely overwrite de HTML templates used to
- display rules and groups. It uses the doT.js template engine by default but
+ For very custom customizations, QueryBuilder provides a way to completely overwrite the HTML templates used to
+ display rules and groups. It uses the doT.js template engine by default, but
can be used with most JS template engines, like underscore.js one. Modifying templates can leads to a not functionnal builder if the general layout differs too much. Particularly
- you should keep all CSS classes which are not part of Bootstrap. Modifying templates can lead to a non-functionnal builder if the general layout differs too much. In particular,
+ non-Bootstrap CSS classes should not be removed. Templates can be provided as a doT.js template string or as a
@@ -1140,8 +1140,8 @@ You might have noticed that callbacks and events reffer to two objects Rule and Group. These objects
- are part of the data model with partial data-binding used internally by QueryBuilder. Here the structure of these
+ You might have noticed that callbacks and events refer to two objects Rule and Group. These objects
+ are part of the data model with partial data-binding used internally by QueryBuilder. Here are the structures of these
two objects. Most attributes will live-update the builder when modified. You can find bellow the plugins shipped by default with QueryBuilder, with their identifiers. Below you can find the plugins shipped by default with QueryBuilder, with their identifiers. Want to create a new plugin ? Check our developer doc.
Widgets
-
diff --git a/dev/events.html b/dev/events.html
index 00039406..e9bb3c96 100644
--- a/dev/events.html
+++ b/dev/events.html
@@ -12,7 +12,7 @@
when a validation error happens. The events system is also used by plugins.
on method on the builder container.
to offer a plugins system.
plugins directory, it contains at least a plugin.js file and
- optionally a plugin.scss file and a i18n folder. Everything needed to the plugin operation
+ plugins directory, which contains at least a plugin.js file and
+ optionally a plugin.scss file and a i18n folder. Everything needed for the plugin to operate
must be contained in these two files (but third-party dependencies of course).dist files by the Grunt task (depending on plugins build option)
@@ -140,7 +140,7 @@
$theme-name which contains... the theme name (currently "default" or "dark")
- you can use to make conditionnal formating.Methods
{% endhighlight %}
-
- .validate()validationError event to catch
+ validationError event to catch
per-rule validation errors. If display_errors is enabled the invalid rules will turn red.Other formats
- .setRules(rules)getRules.
+ getRules.
See an exampleThemes
Operators
- Operators
@@ -1072,15 +1072,15 @@ type
string
- Identifier of the operator, use the lang.operators to translate give a human readable name to
+ Identifier of the operator, use the
lang.operators to translate or give a human readable name to
your operator.
Icons
Templates
- Very advanced feature
- operatorSelect
Inside the box
-
{% endhighlight %}
-