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">
