QueryBuilder 前端构造SQL条件的插件使用方法

页面引入JS等：

1 <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/jquery.js"></script>
2 <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/bootstrap.min.js"></script>
3 <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/sql-parser.js"></script>
4 <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/doT.js"></script>
5 <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/jQuery.extendext.min.js"></script>
6 <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/query-builder.js" charset="UTF-8"></script>

除query-builder.js外 其他均为依赖js
一般我们只需要使用两个按钮就好了。获取sql，重置。

1 <button class="btn btn-danger reset">Reset</button>
2 
3 <button class="btn btn-primary parse-sql" data-stmt="false">SQL</button>

 

在自己的js里面给这俩按钮绑定事件：

 1 //绑定重置事件
 2 $('.reset').on('click', function() {
 3 $('#builder').queryBuilder('reset');
 4 $('#result').addClass('hide').find('pre').empty();
 5 });
 6 
 7 //绑定生成sql事件
 8 $('.parse-sql').on('click', function() {
 9 var res = $('#builder').queryBuilder('getSQL', $(this).data('stmt'), false);
10 var SQL = res.sql + (res.params ? '\n\n' + JSON.stringify(res.params, undefined, 2) : '');
11 this.conditionSql = SQL;
12 $('#result').removeClass('hide').find('pre').html(SQL);
13 });

下面是以前做过的一个使用插件的Demo,看下就知道怎么使用了

  1 /**
  2  * 构造查询条件的入口在   insertFileds(array) 这个方法；
  3  *
  4  * 根据前面的数据格式 可改变参数的形式，具体数据对象的属性也可以变，
  5  *
  6  */
  7 $(document).ready(function() {
  8   demo.init();
  9 });
 10 
 11 demo = {
 12   el: null, //dom对象
 13   builder: null, // sql解析器
 14   conditionSql: null,
 15   init: function() {
 16     this.el = $('#builder');
 17     if (Query.Builder) {
 18       this.builder = new Query.Builder(this.el);
 19     }
 20 
 21     demo.bindEvents();
 22     demo.insertFileds();
 23     /**
 24      * 除上面的方法  还可以
 25      *
 26      * var option = this.builder.getOption();
 27      *
 28      * ... 对这个option的filter进行注入
 29      *
 30      * 然后 this.builder.render(option);
 31      */
 32   },
 33   /**
 34    * 注入可选择的列
 35    * @param  {[type]} array [description]
 36    * @return {[type]}       [description]
 37    */
 38   insertFileds: function(array) {
 39     //临时造的假数据
 40     var array = [{
 41       "table": "wd_swjg",
 42       "tableName": "税务机关表",
 43       "field": "swjg_dm",
 44       "mc": "税务机关代码",
 45       "type": "string"
 46     }, {
 47       "table": "wd_yf",
 48       "tableName": "维度月份表",
 49       "field": "yf_id",
 50       "mc": "月份代码",
 51       "type": "string"
 52     }, {
 53       "table": "wd_yf",
 54       "tableName": "维度月份表",
 55       "field": "scjlrq",
 56       "mc": "生成记录日期",
 57       "type": "date"
 58     }, {
 59       "table": "qysds_szsb_2014hy",
 60       "tableName": "企税年报主表",
 61       "field": "zs",
 62       "mc": "总数",
 63       "type": "number"
 64     }];
 65     this.builder.addFilters(array);
 66     this.builder.render();
 67   },
 68   /**
 69    * 绑定页面事件
 70    * @return {[type]} [description]
 71    */
 72   bindEvents: function() {
 73 
 74     //绑定重置事件
 75     $('.reset').on('click', function() {
 76       $('#builder').queryBuilder('reset');
 77       $('#result').addClass('hide').find('pre').empty();
 78     });
 79 
 80     //绑定生成sql事件
 81     $('.parse-sql').on('click', function() {
 82       var res = $('#builder').queryBuilder('getSQL', $(this).data('stmt'), false);
 83       var SQL = res.sql + (res.params ? '\n\n' + JSON.stringify(res.params, undefined, 2) : '');
 84       this.conditionSql = SQL;
 85       $('#result').removeClass('hide').find('pre').html(SQL);
 86     });
 87   },
 88   /**
 89    * 获取查询条件sql 
 90    * @return {[type]} [description]
 91    */
 92   getConditionSql: function() {
 93 
 94     return this.conditionSql;
 95   }
 96 
 97 
 98 }
 99 Query = {};
100 
101 /**
102  * sql解析器
103  * @param {[type]} obj [description]
104  */
105 Query.Builder = function(obj) {
106   this.el = obj;
107   this.init();
108 }
109 
110 Query.Builder.prototype = {
111   el: null,
112   option: null,
113   /**
114    * 目前支持的sql计算方式
115    * @type {Array}
116    */
117   operators: [{
118     type: 'equal',
119     optgroup: 'basic'
120   }, {
121     type: 'not_equal',
122     optgroup: 'basic'
123   }, {
124     type: 'in',
125     optgroup: 'basic'
126   }, {
127     type: 'not_in',
128     optgroup: 'basic'
129   }, {
130     type: 'less',
131     optgroup: 'numbers'
132   }, {
133     type: 'less_or_equal',
134     optgroup: 'numbers'
135   }, {
136     type: 'greater',
137     optgroup: 'numbers'
138   }, {
139     type: 'greater_or_equal',
140     optgroup: 'numbers'
141   }, {
142     type: 'between',
143     optgroup: 'numbers'
144   }, {
145     type: 'not_between',
146     optgroup: 'numbers'
147   }, {
148     type: 'begins_with',
149     optgroup: 'strings'
150   }, {
151     type: 'not_begins_with',
152     optgroup: 'strings'
153   }, {
154     type: 'contains',
155     optgroup: 'strings'
156   }, {
157     type: 'not_contains',
158     optgroup: 'strings'
159   }, {
160     type: 'ends_with',
161     optgroup: 'strings'
162   }, {
163     type: 'not_ends_with',
164     optgroup: 'strings'
165   }, {
166     type: 'is_empty'
167   }, {
168     type: 'is_not_empty'
169   }, {
170     type: 'is_null'
171   }, {
172     type: 'is_not_null'
173   }],
174   init: function() {
175     this.initOption();
176     //this.render();
177   },
178   getOption: function() {
179     return this.option;
180   },
181   setOption: function(data) {
182     this.option = data;
183     return this;
184   },
185   /**
186    * 构造filter   根据具体的数据格式 改写此方法
187    * @param {[type]} array [description]
188    */
189   addFilters: function(array) {
190     var tempArray = [];
191     for (var i = 0, j = array.length; i < j; i++) {
192       var obj = array[i];
193       var template = new Query.filter();
194       //这块可以前面构造的数据格式跟后面的一直就不需要挨个赋值了
195       template.id = obj.table + "." + obj.field;
196       template.label = obj.tableName + "." + obj.mc;
197       template.type = obj.type == "number" ? "double" : "string";
198       tempArray.push(template);
199       delete template;
200     }
201     if (tempArray.length > 0) {
202       this.option.filters = tempArray;
203     }
204 
205   },
206   /**
207    * 展现页面  
208    * 支持自定义 option
209    * @param  {[type]} option [description]
210    * @return {[type]}        [description]
211    */
212   render: function(option) {
213     //var option = option || this.option;
214     var option = $.extend({}, this.option, option);
215     this.el.queryBuilder(option);
216   },
217   /**
218    * 初始化 option  只有基本的属性
219    * @return {[type]} [description]
220    */
221   initOption: function() {
222     this.option = {
223       allow_empty: true,
224       sort_filters: true,
225       plugins: {
226         'bt-tooltip-errors': {
227           delay: 100
228         },
229         'filter-description': {
230           mode: 'inline'
231         } //关于规则的描述插件 删除旁边蓝色的按钮  mode是显示的方式
232 
233       },
234       operators: this.operators,
235       filters: [{
236         id: 'name'
237       }]
238     };
239   }
240 }
241 
242 /**
243  * 过滤器抽象出来的对象 后续属性可增加
244  * @type {Object}
245  */
246 Query.filter = function() {
247   var filter = {
248     id: "", //不配置field 这个就是字段名字， 建议拼成 table.field
249     label: "", //下拉列表展现   建议拼成 表名-字段名（中文）
250     type: "", //目前就double 和 string 好了
251     value_separator: ',',
252     description: function(rule) {
253       if (rule.operator && ['in', 'not_in'].indexOf(rule.operator.type) !== -1) {
254         return '如果多个值,请使用\', \'分隔。';
255       }
256     }
257   }
258   return filter;
259 }

 

 

注： querybuilder 是不支持ie8的。 但是我们可以下下载谷歌内核,来安装到ie8

然后在页面指定使用谷歌内核来渲染页面即可。

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">