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

页面引入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">