Bootstrap 4 jQuery Query Builder Demo

Bootstrap 4 jQuery Query Builder Demo

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.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.6.2/dist/interact.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.js"></script>
<div class="container">
  <main role="main">
    <div id="query-builder"></div>
  </main>
</div>

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 you may need it with v5 (not tested yet) */

/*.pull-right {
  float:right;
}*/

JavaScript

var model = {
  "JQQueryBuilderConfig": {
    "plugins": {
      "sortable": null,
      "unique-filter": null,
      "invert": null,
      "not-group": null,
      "sql-support": {
        "boolean_as_integer": false
      }
    },
    "filters": [{
        "id": "salereportview-bookingconfirmref",
        "field": "\"SaleReportView\".\"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": "\"SaleReportView\".\"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,
        "plugin_config": null,
        "data": null,
        "unique": false,
        "description": null,
        "color":...