页面引入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">
原文地址：https://www.cnblogs.com/haoerlv/p/8295412.html
时间： 2024-10-23 14:09:18