jquerybuilder

by dshilkret

HTML

<body>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://querybuilder.js.org/assets/css/docs.min.css" rel="stylesheet">
  <link href="http://querybuilder.js.org/assets/css/style.css" rel="stylesheet">
  

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.query-builder/2.3.3/js/query-builder.standalone.min.js"></script>

<div id="builder-basic"></div>

<div class="btn-group">
      <button id="btn-reset" class="btn btn-warning reset" data-target="basic">Reset</button>
      <button id="btn-set" class="btn btn-success set-json" data-target="basic">Set rules</button>
      <button id="btn-get" class="btn btn-primary parse-json" data-target="basic">Get rules</button>
  </div>
</body>

<script>
var rules_basic = {
  condition: 'AND',
  rules: [{
    id: 'price',
    operator: 'less',
    value: 10.25,
    data: { container: 'user', isCustomData: 'true' }
  }]
};

jQuery('#builder-basic').queryBuilder({
  plugins: ['bt-tooltip-errors'],
  
  filters: [{
    id: 'name',
    label: 'Name',
    type: 'string'
  }, {
    id: 'category',
    label: 'Category',
    type: 'integer',
    input: 'select',
    values: {
      1: 'Books',
      2: 'Movies',
      3: 'Music',
      4: 'Tools',
      5: 'Goodies',
      6: 'Clothes'
    },
    operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
  }, {
    id: 'in_stock',
    label: 'In stock',
    type: 'integer',
    input: 'radio',
    values: {
      1: 'Yes',
      0: 'No'
    },
    operators: ['equal']
  }, {
    id: 'price',
    label: 'Price',
    type: 'double',
    validation: {
      min: 0,
      step: 0.01
    },
    data: { container: 'user', isCustomData: 'true' }
  }, {
    id: 'id',
    label: 'Identifier',
    type: 'string',
    placeholder:...