A handy tool for creating complex filters.
Webix Query Builder widget inherits from Layout and allows setting extended rules for data filtering, grouping several rules and define the logic of rules' usage.
You can use it as a standalone solution or combine with data widgets, such as DataTable and Pivot. Query Builder can also be used as a built-in filter for DataTable.
Check Query Builder documentation for more details.
var querybuilder = webix.ui({
view:"querybuilder",
id: "querybuilder",
fields: [
{ id:"fname", value:"First Name", type:"string" },
{ id:"lname", value:"Last Name", type:"string" },
{ id:"age", value:"Age", type:"number" },
{ id:"bdate", value:"Birth Date", type:"date" }
]
});
adjust | adjusts the component to the size of the parent HTML container |
attachEvent | attaches the handler to an inner event of the component |
bind | binds components |
blockEvent | temporarily blocks triggering of ALL events of the calling object |
callEvent | calls an inner event |
define | redefines a single configuration property (or a hash of properties) |
destructor | destructs the calling object |
detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
disable | disables the calling view (makes it dimmed and unclickable) |
eachLine | sets a function to be executed with each line |
enable | enables the calling view that was disabled by the 'disable' method |
focus | sets focus to the active (blue-colored) state of the toggle button of QueryBuilder |
getChildViews | returns child views of the calling component |
getFilterHelper | returns the function that implements the filtering logic |
getFormView | returns master form for the input |
getNode | returns the main HTML container for the calling object |
getParentView | returns the parent view of the component |
getSortingElements | returns sorting controls: multiselect and select |
getSortingHelper | returns the function that implements the sorting logic |
getTopParentView | returns top parent view |
getValue | returns the value set for Query Builder |
hasEvent | checks whether the component has the specified event |
hide | hides the view |
isEnabled | checks whether the view is enabled |
isVisible | checks whether the view is visible |
mapEvent | routes events from one object to another |
queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
resize | adjusts the view to a new size |
setValue | sets a value for Query Builder (fields and rules for filtering) |
show | makes the component visible |
toSQL | converts the value of QueryBuilder to an SQL query |
unbind | breaks "bind" link |
unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
validate | checks data in the input field |
onBindRequest | fires when the component is ready to receive data from the master component |
onDestruct | occurs when component destroyed |
onKeySelect | fires when the value of the key field has been selected |
onViewShow | fires when any hidden view is shown |
animate | defines the configuration of view change animation or disables it |
borderless | used to hide the component borders |
columnMode | arranges attributes of filtering fields into columns |
container | an HTML container (or its ID) where the component should be initialized |
css | the name of the CSS class that will be applied to the view container or the object with styles |
disabled | indicates whether an item is enabled |
fields | sets an array of fields that will be used for filtering dataset |
filtering | enables filtering logic |
filters | sets the custom filters for QueryBuilder |
glue | sets the default rule for combining filtering rules |
gravity | sets the view gravity |
height | sets the height of the component |
hidden | defines whether the view will be hidden initially |
id | the ID of a widget |
inputMaxWidth | sets the maximum width of the input |
inputWidth | sets the width of the input |
maxHeight | sets the maximum height for the view |
maxLevel | sets the maximum level of nesting for filtering fields |
maxWidth | sets the maximum width for the view |
minHeight | sets the minimal height for the view |
minWidth | sets the minimal width for the view |
on | allows attaching custom handlers to inner events of the component |
padding | defines the space between the element borders and content (applies the specified value to all sides). |
paddingX | sets the right and left padding (applies the specified value to both sides) |
paddingY | sets the top and bottom padding (applies the specified value to both sides) |
sorting | enables sorting in Query Builder |
type | defines the layout borders |
width | sets the width of a widget |
$getSize | returns the current size of the component |
$height | the current height of the view |
$setSize | sets the component size |
$skin | the method which will be called when skin is defined |
$view | reference to the top HTML element of the view |
$width | the current width of the view |
config | all options from the initial component configuration |
name | indicates the name of the component (a read-only property) |
sqlOperators | a set of SQL operators used for creating SQL queries |