jQuery-QueryBuilder Demo

Demonstrates select2 and bootstrap-selectpicker support and QueryBuilder invalidates issue #794 (https://github.com/mistic100/jQuery-QueryBuilder/issues/794)

by Sree K

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/query-builder.default.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/query-builder.standalone.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css">
<div id="builder"></div>
<div class="btn-group">
      <button class="btn btn-warning" id="btn-reset">Reset</button>
      <button class="btn btn-success" id="btn-set">Set rules</button>
      <button class="btn btn-primary" id="btn-get">Get rules</button>
</div>

JavaScript

var rules_basic = {
	condition: 'AND',
	rules: [{
		id: 'price',
		operator: 'less',
		value: 10.25
	}, {
		condition: 'OR',
		rules: [{
			id: 'category',
			operator: 'equal',
			value: 2
		}, {
			id: 'category',
			operator: 'equal',
			value: 1
		}]
	}]
};

$('#builder').queryBuilder({
	plugins: {
  	'bt-tooltip-errors': {  // All options supported by the bootstrap tooltips plugin
			container: 'body', 
			html: true, 
			placement: 'auto'
		},
    'bt-selectpicker': {  // All options supported by the selectpicker plugin
			style : "btn-default", 
			width: 'auto'
		},
  },
	
	filters: [{
		id: 'name',
		label: 'Name',
		type: 'string'
	}, {
		id: 'category',
		label: 'Category',
		type: 'integer',
		input: 'select',
		plugin: 'select2',
		plugin_config: {  // All options supported by the select2 plugin
			theme: 'bootstrap',
      placeholder: "------",
			width: "160px",
      allowClear: true
		},
		values: {
    	'':'',	// for select2 palceholder
			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
		}
	}, {
		id: 'id',
		label: 'Identifier',
		type: 'string',
		placeholder: '____-____-____',
		operators: ['equal', 'not_equal'],
		validation: {
			format: /^.{4}-.{4}-.{4}$/
		}
	}],

	rules: rules_basic
});

$('#btn-reset').on('click', function() {
	$('#builder').queryBuilder('reset');
});

$('#btn-set').on('click', function() {
	$('#builder').queryBuilder('setRules', rules_basic);
});

$('#btn-get').on('click', function() {
	var result = $('#builder').queryBuilder('getRules');
	
	if (!$.isEmptyObject(result)) {
		alert(JSON.stringify(result, null, 2));
	}
});