页面引入JS等：
<script type="text/javascript" src="/qysds-jx/pages/gzrw/js/jquery.js"></script>
<script type="text/javascript" src="/qysds-jx/pages/gzrw/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/qysds-jx/pages/gzrw/js/sql-parser.js"></script>
<script type="text/javascript" src="/qysds-jx/pages/gzrw/js/doT.js"></script>
<script type="text/javascript" src="/qysds-jx/pages/gzrw/js/jQuery.extendext.min.js"></script>
<script type="text/javascript" src="/qysds-jx/pages/gzrw/js/query-builder.js" charset="UTF-8"></script>
除query-builder.js外 其他均为依赖js
一般我们只需要使用两个按钮就好了。获取sql，重置。
<button class="btn btn-danger reset">Reset</button> <button class="btn btn-primary parse-sql" data-stmt="false">SQL</button>
在自己的js里面给这俩按钮绑定事件：
//绑定重置事件
$('.reset').on('click', function() {
$('#builder').queryBuilder('reset');
$('#result').addClass('hide').find('pre').empty();
}); //绑定生成sql事件
$('.parse-sql').on('click', function() {
var res = $('#builder').queryBuilder('getSQL', $(this).data('stmt'), false);
var SQL = res.sql + (res.params ? '\n\n' + JSON.stringify(res.params, undefined, 2) : '');
this.conditionSql = SQL;
$('#result').removeClass('hide').find('pre').html(SQL);
});
下面是以前做过的一个使用插件的Demo,看下就知道怎么使用了
/**
* 构造查询条件的入口在 insertFileds(array) 这个方法；
*
* 根据前面的数据格式 可改变参数的形式，具体数据对象的属性也可以变，
*
*/
$(document).ready(function() {
demo.init();
}); demo = {
el: null, //dom对象
builder: null, // sql解析器
conditionSql: null,
init: function() {
this.el = $('#builder');
if (Query.Builder) {
this.builder = new Query.Builder(this.el);
} demo.bindEvents();
demo.insertFileds();
/**
* 除上面的方法 还可以
*
* var option = this.builder.getOption();
*
* ... 对这个option的filter进行注入
*
* 然后 this.builder.render(option);
*/
},
/**
* 注入可选择的列
* @param {[type]} array [description]
* @return {[type]} [description]
*/
insertFileds: function(array) {
//临时造的假数据
var array = [{
"table": "wd_swjg",
"tableName": "税务机关表",
"field": "swjg_dm",
"mc": "税务机关代码",
"type": "string"
}, {
"table": "wd_yf",
"tableName": "维度月份表",
"field": "yf_id",
"mc": "月份代码",
"type": "string"
}, {
"table": "wd_yf",
"tableName": "维度月份表",
"field": "scjlrq",
"mc": "生成记录日期",
"type": "date"
}, {
"table": "qysds_szsb_2014hy",
"tableName": "企税年报主表",
"field": "zs",
"mc": "总数",
"type": "number"
}];
this.builder.addFilters(array);
this.builder.render();
},
/**
* 绑定页面事件
* @return {[type]} [description]
*/
bindEvents: function() { //绑定重置事件
$('.reset').on('click', function() {
$('#builder').queryBuilder('reset');
$('#result').addClass('hide').find('pre').empty();
}); //绑定生成sql事件
$('.parse-sql').on('click', function() {
var res = $('#builder').queryBuilder('getSQL', $(this).data('stmt'), false);
var SQL = res.sql + (res.params ? '\n\n' + JSON.stringify(res.params, undefined, 2) : '');
this.conditionSql = SQL;
$('#result').removeClass('hide').find('pre').html(SQL);
});
},
/**
* 获取查询条件sql
* @return {[type]} [description]
*/
getConditionSql: function() { return this.conditionSql;
} }
Query = {}; /**
* sql解析器
* @param {[type]} obj [description]
*/
Query.Builder = function(obj) {
this.el = obj;
this.init();
} Query.Builder.prototype = {
el: null,
option: null,
/**
* 目前支持的sql计算方式
* @type {Array}
*/
operators: [{
type: 'equal',
optgroup: 'basic'
}, {
type: 'not_equal',
optgroup: 'basic'
}, {
type: 'in',
optgroup: 'basic'
}, {
type: 'not_in',
optgroup: 'basic'
}, {
type: 'less',
optgroup: 'numbers'
}, {
type: 'less_or_equal',
optgroup: 'numbers'
}, {
type: 'greater',
optgroup: 'numbers'
}, {
type: 'greater_or_equal',
optgroup: 'numbers'
}, {
type: 'between',
optgroup: 'numbers'
}, {
type: 'not_between',
optgroup: 'numbers'
}, {
type: 'begins_with',
optgroup: 'strings'
}, {
type: 'not_begins_with',
optgroup: 'strings'
}, {
type: 'contains',
optgroup: 'strings'
}, {
type: 'not_contains',
optgroup: 'strings'
}, {
type: 'ends_with',
optgroup: 'strings'
}, {
type: 'not_ends_with',
optgroup: 'strings'
}, {
type: 'is_empty'
}, {
type: 'is_not_empty'
}, {
type: 'is_null'
}, {
type: 'is_not_null'
}],
init: function() {
this.initOption();
//this.render();
},
getOption: function() {
return this.option;
},
setOption: function(data) {
this.option = data;
return this;
},
/**
* 构造filter 根据具体的数据格式 改写此方法
* @param {[type]} array [description]
*/
addFilters: function(array) {
var tempArray = [];
for (var i = 0, j = array.length; i < j; i++) {
var obj = array[i];
var template = new Query.filter();
//这块可以前面构造的数据格式跟后面的一直就不需要挨个赋值了
template.id = obj.table + "." + obj.field;
template.label = obj.tableName + "." + obj.mc;
template.type = obj.type == "number" ? "double" : "string";
tempArray.push(template);
delete template;
}
if (tempArray.length > 0) {
this.option.filters = tempArray;
} },
/**
* 展现页面
* 支持自定义 option
* @param {[type]} option [description]
* @return {[type]} [description]
*/
render: function(option) {
//var option = option || this.option;
var option = $.extend({}, this.option, option);
this.el.queryBuilder(option);
},
/**
* 初始化 option 只有基本的属性
* @return {[type]} [description]
*/
initOption: function() {
this.option = {
allow_empty: true,
sort_filters: true,
plugins: {
'bt-tooltip-errors': {
delay: 100
},
'filter-description': {
mode: 'inline'
} //关于规则的描述插件 删除旁边蓝色的按钮 mode是显示的方式 },
operators: this.operators,
filters: [{
id: 'name'
}]
};
}
} /**
* 过滤器抽象出来的对象 后续属性可增加
* @type {Object}
*/
Query.filter = function() {
var filter = {
id: "", //不配置field 这个就是字段名字， 建议拼成 table.field
label: "", //下拉列表展现 建议拼成 表名-字段名（中文）
type: "", //目前就double 和 string 好了
value_separator: ',',
description: function(rule) {
if (rule.operator && ['in', 'not_in'].indexOf(rule.operator.type) !== -1) {
return '如果多个值,请使用\', \'分隔。';
}
}
}
return filter;
}
注： querybuilder 是不支持ie8的。 但是我们可以下下载谷歌内核,来安装到ie8
然后在页面指定使用谷歌内核来渲染页面即可。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">