jQuery Query Builder

Simple Demo https://github.com/fr0z3nfyr/jQuery-QueryBuilder

by Sree K

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://boiteaimages.com/demo/querybuilder/query-builder.js"></script>
<div id="container" class="container search-template">
    <div id="content">
        <link rel="stylesheet" type="text/css" href="/cakephp/css/query-builder.css" />
        <script type="text/javascript" src="/cakephp/js/query-builder.js"></script>
        <div id="builder"></div>
        <form role="form" method="post" id="query-builder-form">
            <div class="btn-group">
                <input type="button" class="btn btn-warning reset" value="Reset" />
                <input type="button" class="btn btn-primary parse-sql" value="Run" />
            </div>
            <hr/>
            <textarea class="form-control json-parsed" rows="10" id="json-parsed" name="json-parsed" readonly></textarea>
            <hr/>
            <textarea class="form-control sql-parsed" rows="10" id="sql-parsed" name="sql-parsed" readonly></textarea>
        </form>
    </div>
</div>

CSS

@charset "UTF-8";
/* CSS Document */

/*!
 * jQuery QueryBuilder 1.3.0-SNAPSHOT
 * Copyright 2014 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */
 .rule-container, .rules-group-container, .rule-placeholder {
    margin:4px 0;
    border-radius:5px;
    padding:5px;
    border:1px solid #eee;
    background:#fff;
    background:rgba(255, 255, 255, 0.9);
}
/* GROUPS */
 .rules-group-container {
    padding:10px 10px 5px 10px;
    border:1px solid #DCC896;
    background:#FCF9ED;
    background:rgba(250, 240, 210, 0.5);
}
.rules-group-header {
    margin-bottom:10px;
}
.rules-group-header input[name$=_cond] {
    display:none;
}
/* RULES */
 .rules-list {
    list-style:none;
    padding:0 0 0 20px;
    margin:0;
}
.rule-container {
}
.rule-container.has-error {
    background:#fdd;
    border-color:#f99;
}
.rule-container>div:not(.rule-header) {
    display:inline-block;
    margin:0 5px 0 0;
    vertical-align:top;
}
.rule-value-container:not(:empty) {
    border-left:1px solid #ddd;
    padding-left:5px;
}
.rule-value-container label {
    margin-bottom:0;
}
.rule-value-container label.block {
    display:block;
}
.rule-container select, .rule-container input[type=text], .rule-container input[type=number] {
    padding:1px;
}
/* TICKS */
 .rules-list>* {
    position:relative;
}
.rules-list>*:before, .rules-list>*:after {
    content:'';
    position:absolute;
    left:-15px;
    width:15px;
    height:calc(50% + 4px);
    border-color:#ccc;
    border-style:solid;
}
.rules-list>*:before {
    top:-2px;
    border-width:0 0 2px 2px;
}
.rules-list>*:after {
    top:50%;
    border-width:0 0 0 2px;
}
.rules-list>*:first-child:before {
    top:-12px;
    height:calc(50% + 14px);
}
.rules-list>*:last-child:before {
    border-radius:0 0 0 4px;
}
.rules-list>*:last-child:after {
    display:none;
}
/* DRAG & DROP */
 .rule-container .drag-handle, .rules-group-container .drag-handle {
    cursor:move;
 ...

JavaScript

// JavaScript Document
// + - + - + - + - + - + - + - + - + - + - + - + - + - + - 
// + - + - + - + - + - + - + - + - + - + - + - + - + - + - 

$('#builder').queryBuilder({

    sortable: true,

    filters: [{
        id: 'core_ID',
        type: 'integer',
        operators: ['equal', 'not_equal', 'in', 'not_in']
    }, {
        id: 'store_id',
        label: 'Store ID',
        type: 'string',
        operators: ['equal', 'not_equal', 'in', 'not_in']
    }]

});


// set rules
$('#builder').queryBuilder('setRules', {
  "condition": "AND",
  "rules": [
    {
      "id": "core_ID",
      "field": "core_ID",
      "type": "integer",
      "input": "text",
      "operator": "in",
      "value": "1240"
    }
  ]
});


// reset builder
$('.reset').on('click', function () {

    $('#builder').queryBuilder('reset');

    $(".json-parsed").empty();

    $(".sql-parsed").empty();

});

// get rules & SQL
$('.parse-sql').on('click', function () {

    // JSON

    var resJson = $('#builder').queryBuilder('getRules');

    $(".json-parsed").html(JSON.stringify(resJson, null, 2));

    // SQL

    var resSql = $('#builder').queryBuilder('getSQL', false);

    $(".sql-parsed").html(resSql.sql);

});

// result

$(document).ready(function(){
    
    $( ".parse-sql" ).trigger( "click" );
    
});