Basic QueryBuilder Usage

by dshilkret

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/mistic100/sql-parser/master/browser/sql-parser.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mistic100/jQuery-QueryBuilder/master/dist/css/query-builder.default.min.css">
<script src="https://rawgit.com/mistic100/jQuery-QueryBuilder/master/dist/js/query-builder.standalone.min.js"></script>
<span id="getsql">Get SQL</span>

<br/>
<br/>
<div id="queryBuilderGoesHere"></div>
<div id="sql"></div>

CSS

body {
    margin:15px;
}
#getsql {
    border:1px solid #555;
    ;
    padding: 6px 18px;
}
#queryBuilderGoesHere {
    border-bottom: 1px solid navy;
}
.ltblue {
    background: lightblue;
    color:white;
    font-weight:bold;
}
#sql {
    border : 1px solid lightblue;
    padding : 15px
}

JavaScript

$("#getsql").addClass("ltblue");

var myFilters = [{
    id: 'column1',
    label: 'Column 1',
    type: 'string'
}, {
    id: 'column2',
    label: 'Column 2',
    type: 'double'
}, {
    id: 'column3',
    label: 'Column 3',
    type: 'boolean'
}];
$("#queryBuilderGoesHere").queryBuilder({
    filters: myFilters
});
$("#getsql").on('click', function () {
    var sqlob = $("#queryBuilderGoesHere").queryBuilder("getSQL", false);
    $("#sql").text(sqlob.sql);
});