Bootstrap 5 jQuery QueryBuilder Demo

Demo of jQuery QueryBuilder on Bootstrap 5 with FontAwesome 6

by Steven Goos

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.6.2/dist/css/query-builder.default.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootbox@6.0.0/dist/bootbox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sql-parser-mistic@1.2.3/browser/sql-parser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.17/dist/interact.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.6.2/dist/js/query-builder.standalone.min.js"></script>
<!--
source    https://jsfiddle.net/golabs/wL0jgt2a/
based on  https://jsfiddle.net/pbauzhmw/2

comment   all resources updated to the latest versions @ 2022-12-21

todo      get the getSQL json via a parser to a PHP script on the server so it can be used in a SQL statement
-->

<div class="container">
  <main role="main" class="pb-5">
    <h5 class="pt-5 pb-2">demo1</h5>
    <!-- this first query builder has the id builder-demo1, the data-target value has to be demo1 -->
    <div id="builder-demo1"></div>
    
    <div class="btn-group">
      <button class="btn btn-warning reset" data-target="demo1">Reset</button>
    </div>

    <div class="btn-group">
      <button class="btn btn-success set-sql" data-target="demo1">Set rules from SQL</button>
    </div>

    <div class="btn-group">
      <button class="btn btn-primary parse-sql" data-target="demo1" data-stmt="false">SQL</button>
      <button class="btn btn-primary parse-sql" data-target="demo1" data-stmt="question_mark">statement (?)</button>
      <button class="btn btn-primary parse-sql"...

CSS

/* Mimic .fa */
.glyphicon {
  display: inline-block !important;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: 14px !important;
  font-size: inherit !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Mimic .fa-check-square-o */
.glyphicon-check:before {
  content: '\f046';
}

/* Mimic .fa-plus */
.glyphicon-plus:before {
  content: '\f067';
}

/* Mimic .fa-plus-circle */
.glyphicon-plus-sign:before {
  content: '\f055';
}

/* Mimic .fa-random */
.glyphicon-random:before {
  content: '\f074';
}

/* Mimic .fa-times */
.glyphicon-remove:before {
  content: '\f00d';
}

/* Mimic .fa-sort */
.glyphicon-sort:before {
  content: '\f0dc';
}

/* Mimic .fa-square-o */
.glyphicon-unchecked:before {
  content: '\f096';
}

/* Mimic .fa-warning */
.glyphicon-warning-sign:before {
  content: '\f071';
}

/* My custom CSS (Feel free to ignore) */
.query-builder .rules-group-container {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  width: 100%;
}

/* Not needed when using Font-Awesome 4.7.. but required with v5 and v6 */
.pull-right {
  float: right;
}

JavaScript

// the javascript for the first query builder, which has id builder-demo1 and data-type value demo1,
// therefor we use model_demo1 and #builder-demo1 in the javascript here
var model_demo1 = {
  "QB_Config": {
    "plugins": {
      "sortable": null,
      "unique-filter": null,
      "invert": null,
      "not-group": null,
      "sql-support": {
        "boolean_as_integer": false
      }
    },
    "filters": [{
        "id": "salereportview-bookingconfirmref",
        "field": "BookingConfirmRef",
        "label": "Booking Reference number",
        "optgroup": "SaleReportView",
        "type": "string",
        "input": "text",
        "values": null,
        "value_separator": null,
        "default_value": null,
        "input_event": "change",
        "size": 0,
        "rows": 0,
        "multiple": false,
        "placeholder": null,
        "vertical": false,
        "validation": null,
        "operators": ["begins_with", "not_begins_with", "contains", "not_contains", "ends_with", "not_ends_with", "is_empty", "is_not_empty", "is_null", "is_not_null"],
        "plugin": null,
        "plugin_config": null,
        "data": null,
        "unique": false,
        "description": null,
        "color": null,
        "colors": null
      },
      {
        "id": "salereportview-transferfareinsellingcurrency",
        "field": "TransferFareinsellingcurrency",
        "label": "Transfer Fare in Selling Currency",
        "optgroup": "SaleReportView",
        "type": "string",
        "input": "text",
        "values": null,
        "value_separator": null,
        "default_value": null,
        "input_event": "change",
        "size": 0,
        "rows": 0,
        "multiple": false,
        "placeholder": null,
        "vertical": false,
        "validation": null,
        "operators": ["equal", "not_equal", "in", "not_in", "less", "less_or_equal", "greater", "greater_or_equal", "between", "not_between", "is_null", "is_not_null"],
        "plugin": null,
    ...