├── README.md
└── src
└── cb
├── condition-builder.html
├── condition-builder.js
└── res
├── add.png
├── json2.js
└── remove.png
/README.md:
--------------------------------------------------------------------------------
1 | jsexpbuilder
2 | ============
3 |
4 | Expression Builder for creating complex nested conditions/expressions using jQuery
5 |
6 | Expression Builder is used to create nested condition /expression builder which can be used to generate complex expressions
7 |
8 | This is still a 0.1 version where the UI works fine but the columns /conditions are hardcoded. A good place for someone looking for a decent start.
9 |
10 | The plan is to make this into a jquery plugin. Please feel free to drop by a mail for any features you need.
11 |
--------------------------------------------------------------------------------
/src/cb/condition-builder.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Query Builder
4 |
17 |
18 |
19 |
20 |
39 |
40 |
41 | Query Starts after this
42 |
43 |
44 |
46 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/cb/condition-builder.js:
--------------------------------------------------------------------------------
1 | //Helps in creating a structure will help later.
2 | function makeStruct(names) {
3 | var names = names.split(' ');
4 | var count = names.length;
5 | function constructor() {
6 | for (var i = 0; i < count; i++) {
7 | this[names[i]] = arguments[i];
8 | }
9 | }
10 | return constructor;
11 | }
12 |
13 | var rootcondition = '
';
53 |
54 | var addqueryroot = function (sel, isroot) {
55 | $(sel).append(rootcondition);
56 | var q = $(sel).find('table');
57 | var l = q.length;
58 | var elem = q;
59 | if (l > 1) {
60 | elem = $(q[l - 1]);
61 | }
62 |
63 | //If root element remove the close image
64 | if (isroot) {
65 | elem.find('td >.remove').detach();
66 | }
67 | else {
68 | elem.find('td >.remove').click(function () {
69 | // td>tr>tbody>table
70 | $(this).parent().parent().parent().parent().detach();
71 | });
72 | }
73 |
74 | // Add the default staement segment to the root condition
75 | elem.find('td >.querystmts').append(statement);
76 |
77 | // Add the head class to the first statement
78 | elem.find('td >.querystmts div >.remove').addClass('head');
79 |
80 | // Handle click for adding new statement segment
81 | // When a new statement is added add a condition to handle remove click.
82 | elem.find('td div >.add').click(function () {
83 | $(this).parent().siblings('.querystmts').append(statement);
84 | var stmts = $(this).parent().siblings('.querystmts').find('div >.remove').filter(':not(.head)');
85 | stmts.unbind('click');
86 | stmts.click(function () {
87 | $(this).parent().detach();
88 | });
89 | });
90 |
91 | // Handle click to add new root condition
92 | elem.find('td div > .addroot').click(function () {
93 | addqueryroot($(this).parent(), false);
94 | });
95 | };
96 |
97 |
98 | //Recursive method to parse the condition and generate the query. Takes the selector for the root condition
99 | var getCondition = function (rootsel) {
100 | //Get the columns from table (to find a clean way to do it later) //tbody>tr>td
101 | var elem = $(rootsel).children().children().children();
102 | //elem 0 is for operator, elem 1 is for expressions
103 |
104 | var q = {};
105 | var expressions = [];
106 | var nestedexpressions = [];
107 |
108 | var operator = $(elem[0]).find(':selected').val();
109 | q.operator = operator;
110 |
111 | // Get all the expressions in a condition
112 | var expressionelem = $(elem[1]).find('> .querystmts div');
113 | for (var i = 0; i < expressionelem.length; i++) {
114 | expressions[i] = {};
115 | var col = $(expressionelem[i]).find('.col :selected');
116 | var op = $(expressionelem[i]).find('.op :selected');
117 | expressions[i].colval = col.val();
118 | expressions[i].coldisp = col.text();
119 | expressions[i].opval = op.val();
120 | expressions[i].opdisp = op.text();
121 | expressions[i].val = $(expressionelem[i]).find(':text').val();
122 | }
123 | q.expressions = expressions;
124 |
125 | // Get all the nested expressions
126 | if ($(elem[1]).find('> div > table').length != 0) {
127 | var len = $(elem[1]).find('> div > table').length;
128 |
129 | for (var k = 0; k < len; k++) {
130 | nestedexpressions[k] = getCondition($(elem[1]).find('> div > table')[k]);
131 | }
132 | }
133 | q.nestedexpressions = nestedexpressions;
134 |
135 | return q;
136 | };
137 |
138 | //Recursive method to iterate over the condition tree and generate the query
139 | var getQuery = function (condition) {
140 | var op = [' ', condition.operator, ' '].join('');
141 |
142 | var e = [];
143 | var elen = condition.expressions.length;
144 | for (var i = 0; i < elen; i++) {
145 | var expr = condition.expressions[i];
146 | e.push(expr.colval + " " + expr.opval + " " + expr.val);
147 | }
148 |
149 | var n = [];
150 | var nlen = condition.nestedexpressions.length;
151 | for (var k = 0; k < nlen; k++) {
152 | var nestexpr = condition.nestedexpressions[k];
153 | var result = getQuery(nestexpr);
154 | n.push(result);
155 | }
156 |
157 | var q = [];
158 | if (e.length > 0)
159 | q.push(e.join(op));
160 |
161 | if (n.length > 0)
162 | q.push(n.join(op));
163 |
164 | return ['(', q.join(op), ')'].join(' ');
165 | };
166 |
167 |
--------------------------------------------------------------------------------
/src/cb/res/add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gantir/jsexpbuilder/1f9e6103ffeaddd6360f6c70bab0cf531a1097ed/src/cb/res/add.png
--------------------------------------------------------------------------------
/src/cb/res/json2.js:
--------------------------------------------------------------------------------
1 | /*
2 | http://www.JSON.org/json2.js
3 | 2010-11-17
4 |
5 | Public Domain.
6 |
7 | NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
8 |
9 | See http://www.JSON.org/js.html
10 |
11 |
12 | This code should be minified before deployment.
13 | See http://javascript.crockford.com/jsmin.html
14 |
15 | USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
16 | NOT CONTROL.
17 |
18 |
19 | This file creates a global JSON object containing two methods: stringify
20 | and parse.
21 |
22 | JSON.stringify(value, replacer, space)
23 | value any JavaScript value, usually an object or array.
24 |
25 | replacer an optional parameter that determines how object
26 | values are stringified for objects. It can be a
27 | function or an array of strings.
28 |
29 | space an optional parameter that specifies the indentation
30 | of nested structures. If it is omitted, the text will
31 | be packed without extra whitespace. If it is a number,
32 | it will specify the number of spaces to indent at each
33 | level. If it is a string (such as '\t' or ' '),
34 | it contains the characters used to indent at each level.
35 |
36 | This method produces a JSON text from a JavaScript value.
37 |
38 | When an object value is found, if the object contains a toJSON
39 | method, its toJSON method will be called and the result will be
40 | stringified. A toJSON method does not serialize: it returns the
41 | value represented by the name/value pair that should be serialized,
42 | or undefined if nothing should be serialized. The toJSON method
43 | will be passed the key associated with the value, and this will be
44 | bound to the value
45 |
46 | For example, this would serialize Dates as ISO strings.
47 |
48 | Date.prototype.toJSON = function (key) {
49 | function f(n) {
50 | // Format integers to have at least two digits.
51 | return n < 10 ? '0' + n : n;
52 | }
53 |
54 | return this.getUTCFullYear() + '-' +
55 | f(this.getUTCMonth() + 1) + '-' +
56 | f(this.getUTCDate()) + 'T' +
57 | f(this.getUTCHours()) + ':' +
58 | f(this.getUTCMinutes()) + ':' +
59 | f(this.getUTCSeconds()) + 'Z';
60 | };
61 |
62 | You can provide an optional replacer method. It will be passed the
63 | key and value of each member, with this bound to the containing
64 | object. The value that is returned from your method will be
65 | serialized. If your method returns undefined, then the member will
66 | be excluded from the serialization.
67 |
68 | If the replacer parameter is an array of strings, then it will be
69 | used to select the members to be serialized. It filters the results
70 | such that only members with keys listed in the replacer array are
71 | stringified.
72 |
73 | Values that do not have JSON representations, such as undefined or
74 | functions, will not be serialized. Such values in objects will be
75 | dropped; in arrays they will be replaced with null. You can use
76 | a replacer function to replace those with JSON values.
77 | JSON.stringify(undefined) returns undefined.
78 |
79 | The optional space parameter produces a stringification of the
80 | value that is filled with line breaks and indentation to make it
81 | easier to read.
82 |
83 | If the space parameter is a non-empty string, then that string will
84 | be used for indentation. If the space parameter is a number, then
85 | the indentation will be that many spaces.
86 |
87 | Example:
88 |
89 | text = JSON.stringify(['e', {pluribus: 'unum'}]);
90 | // text is '["e",{"pluribus":"unum"}]'
91 |
92 |
93 | text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
94 | // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
95 |
96 | text = JSON.stringify([new Date()], function (key, value) {
97 | return this[key] instanceof Date ?
98 | 'Date(' + this[key] + ')' : value;
99 | });
100 | // text is '["Date(---current time---)"]'
101 |
102 |
103 | JSON.parse(text, reviver)
104 | This method parses a JSON text to produce an object or array.
105 | It can throw a SyntaxError exception.
106 |
107 | The optional reviver parameter is a function that can filter and
108 | transform the results. It receives each of the keys and values,
109 | and its return value is used instead of the original value.
110 | If it returns what it received, then the structure is not modified.
111 | If it returns undefined then the member is deleted.
112 |
113 | Example:
114 |
115 | // Parse the text. Values that look like ISO date strings will
116 | // be converted to Date objects.
117 |
118 | myData = JSON.parse(text, function (key, value) {
119 | var a;
120 | if (typeof value === 'string') {
121 | a =
122 | /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
123 | if (a) {
124 | return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
125 | +a[5], +a[6]));
126 | }
127 | }
128 | return value;
129 | });
130 |
131 | myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
132 | var d;
133 | if (typeof value === 'string' &&
134 | value.slice(0, 5) === 'Date(' &&
135 | value.slice(-1) === ')') {
136 | d = new Date(value.slice(5, -1));
137 | if (d) {
138 | return d;
139 | }
140 | }
141 | return value;
142 | });
143 |
144 |
145 | This is a reference implementation. You are free to copy, modify, or
146 | redistribute.
147 | */
148 |
149 | /*jslint evil: true, strict: false, regexp: false */
150 |
151 | /*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
152 | call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
153 | getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
154 | lastIndex, length, parse, prototype, push, replace, slice, stringify,
155 | test, toJSON, toString, valueOf
156 | */
157 |
158 |
159 | // Create a JSON object only if one does not already exist. We create the
160 | // methods in a closure to avoid creating global variables.
161 |
162 | if (!this.JSON) {
163 | this.JSON = {};
164 | }
165 |
166 | (function () {
167 | "use strict";
168 |
169 | function f(n) {
170 | // Format integers to have at least two digits.
171 | return n < 10 ? '0' + n : n;
172 | }
173 |
174 | if (typeof Date.prototype.toJSON !== 'function') {
175 |
176 | Date.prototype.toJSON = function (key) {
177 |
178 | return isFinite(this.valueOf()) ?
179 | this.getUTCFullYear() + '-' +
180 | f(this.getUTCMonth() + 1) + '-' +
181 | f(this.getUTCDate()) + 'T' +
182 | f(this.getUTCHours()) + ':' +
183 | f(this.getUTCMinutes()) + ':' +
184 | f(this.getUTCSeconds()) + 'Z' : null;
185 | };
186 |
187 | String.prototype.toJSON =
188 | Number.prototype.toJSON =
189 | Boolean.prototype.toJSON = function (key) {
190 | return this.valueOf();
191 | };
192 | }
193 |
194 | var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
195 | escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
196 | gap,
197 | indent,
198 | meta = { // table of character substitutions
199 | '\b': '\\b',
200 | '\t': '\\t',
201 | '\n': '\\n',
202 | '\f': '\\f',
203 | '\r': '\\r',
204 | '"' : '\\"',
205 | '\\': '\\\\'
206 | },
207 | rep;
208 |
209 |
210 | function quote(string) {
211 |
212 | // If the string contains no control characters, no quote characters, and no
213 | // backslash characters, then we can safely slap some quotes around it.
214 | // Otherwise we must also replace the offending characters with safe escape
215 | // sequences.
216 |
217 | escapable.lastIndex = 0;
218 | return escapable.test(string) ?
219 | '"' + string.replace(escapable, function (a) {
220 | var c = meta[a];
221 | return typeof c === 'string' ? c :
222 | '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
223 | }) + '"' :
224 | '"' + string + '"';
225 | }
226 |
227 |
228 | function str(key, holder) {
229 |
230 | // Produce a string from holder[key].
231 |
232 | var i, // The loop counter.
233 | k, // The member key.
234 | v, // The member value.
235 | length,
236 | mind = gap,
237 | partial,
238 | value = holder[key];
239 |
240 | // If the value has a toJSON method, call it to obtain a replacement value.
241 |
242 | if (value && typeof value === 'object' &&
243 | typeof value.toJSON === 'function') {
244 | value = value.toJSON(key);
245 | }
246 |
247 | // If we were called with a replacer function, then call the replacer to
248 | // obtain a replacement value.
249 |
250 | if (typeof rep === 'function') {
251 | value = rep.call(holder, key, value);
252 | }
253 |
254 | // What happens next depends on the value's type.
255 |
256 | switch (typeof value) {
257 | case 'string':
258 | return quote(value);
259 |
260 | case 'number':
261 |
262 | // JSON numbers must be finite. Encode non-finite numbers as null.
263 |
264 | return isFinite(value) ? String(value) : 'null';
265 |
266 | case 'boolean':
267 | case 'null':
268 |
269 | // If the value is a boolean or null, convert it to a string. Note:
270 | // typeof null does not produce 'null'. The case is included here in
271 | // the remote chance that this gets fixed someday.
272 |
273 | return String(value);
274 |
275 | // If the type is 'object', we might be dealing with an object or an array or
276 | // null.
277 |
278 | case 'object':
279 |
280 | // Due to a specification blunder in ECMAScript, typeof null is 'object',
281 | // so watch out for that case.
282 |
283 | if (!value) {
284 | return 'null';
285 | }
286 |
287 | // Make an array to hold the partial results of stringifying this object value.
288 |
289 | gap += indent;
290 | partial = [];
291 |
292 | // Is the value an array?
293 |
294 | if (Object.prototype.toString.apply(value) === '[object Array]') {
295 |
296 | // The value is an array. Stringify every element. Use null as a placeholder
297 | // for non-JSON values.
298 |
299 | length = value.length;
300 | for (i = 0; i < length; i += 1) {
301 | partial[i] = str(i, value) || 'null';
302 | }
303 |
304 | // Join all of the elements together, separated with commas, and wrap them in
305 | // brackets.
306 |
307 | v = partial.length === 0 ? '[]' :
308 | gap ? '[\n' + gap +
309 | partial.join(',\n' + gap) + '\n' +
310 | mind + ']' :
311 | '[' + partial.join(',') + ']';
312 | gap = mind;
313 | return v;
314 | }
315 |
316 | // If the replacer is an array, use it to select the members to be stringified.
317 |
318 | if (rep && typeof rep === 'object') {
319 | length = rep.length;
320 | for (i = 0; i < length; i += 1) {
321 | k = rep[i];
322 | if (typeof k === 'string') {
323 | v = str(k, value);
324 | if (v) {
325 | partial.push(quote(k) + (gap ? ': ' : ':') + v);
326 | }
327 | }
328 | }
329 | } else {
330 |
331 | // Otherwise, iterate through all of the keys in the object.
332 |
333 | for (k in value) {
334 | if (Object.hasOwnProperty.call(value, k)) {
335 | v = str(k, value);
336 | if (v) {
337 | partial.push(quote(k) + (gap ? ': ' : ':') + v);
338 | }
339 | }
340 | }
341 | }
342 |
343 | // Join all of the member texts together, separated with commas,
344 | // and wrap them in braces.
345 |
346 | v = partial.length === 0 ? '{}' :
347 | gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
348 | mind + '}' : '{' + partial.join(',') + '}';
349 | gap = mind;
350 | return v;
351 | }
352 | }
353 |
354 | // If the JSON object does not yet have a stringify method, give it one.
355 |
356 | if (typeof JSON.stringify !== 'function') {
357 | JSON.stringify = function (value, replacer, space) {
358 |
359 | // The stringify method takes a value and an optional replacer, and an optional
360 | // space parameter, and returns a JSON text. The replacer can be a function
361 | // that can replace values, or an array of strings that will select the keys.
362 | // A default replacer method can be provided. Use of the space parameter can
363 | // produce text that is more easily readable.
364 |
365 | var i;
366 | gap = '';
367 | indent = '';
368 |
369 | // If the space parameter is a number, make an indent string containing that
370 | // many spaces.
371 |
372 | if (typeof space === 'number') {
373 | for (i = 0; i < space; i += 1) {
374 | indent += ' ';
375 | }
376 |
377 | // If the space parameter is a string, it will be used as the indent string.
378 |
379 | } else if (typeof space === 'string') {
380 | indent = space;
381 | }
382 |
383 | // If there is a replacer, it must be a function or an array.
384 | // Otherwise, throw an error.
385 |
386 | rep = replacer;
387 | if (replacer && typeof replacer !== 'function' &&
388 | (typeof replacer !== 'object' ||
389 | typeof replacer.length !== 'number')) {
390 | throw new Error('JSON.stringify');
391 | }
392 |
393 | // Make a fake root object containing our value under the key of ''.
394 | // Return the result of stringifying the value.
395 |
396 | return str('', {'': value});
397 | };
398 | }
399 |
400 |
401 | // If the JSON object does not yet have a parse method, give it one.
402 |
403 | if (typeof JSON.parse !== 'function') {
404 | JSON.parse = function (text, reviver) {
405 |
406 | // The parse method takes a text and an optional reviver function, and returns
407 | // a JavaScript value if the text is a valid JSON text.
408 |
409 | var j;
410 |
411 | function walk(holder, key) {
412 |
413 | // The walk method is used to recursively walk the resulting structure so
414 | // that modifications can be made.
415 |
416 | var k, v, value = holder[key];
417 | if (value && typeof value === 'object') {
418 | for (k in value) {
419 | if (Object.hasOwnProperty.call(value, k)) {
420 | v = walk(value, k);
421 | if (v !== undefined) {
422 | value[k] = v;
423 | } else {
424 | delete value[k];
425 | }
426 | }
427 | }
428 | }
429 | return reviver.call(holder, key, value);
430 | }
431 |
432 |
433 | // Parsing happens in four stages. In the first stage, we replace certain
434 | // Unicode characters with escape sequences. JavaScript handles many characters
435 | // incorrectly, either silently deleting them, or treating them as line endings.
436 |
437 | text = String(text);
438 | cx.lastIndex = 0;
439 | if (cx.test(text)) {
440 | text = text.replace(cx, function (a) {
441 | return '\\u' +
442 | ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
443 | });
444 | }
445 |
446 | // In the second stage, we run the text against regular expressions that look
447 | // for non-JSON patterns. We are especially concerned with '()' and 'new'
448 | // because they can cause invocation, and '=' because it can cause mutation.
449 | // But just to be safe, we want to reject all unexpected forms.
450 |
451 | // We split the second stage into 4 regexp operations in order to work around
452 | // crippling inefficiencies in IE's and Safari's regexp engines. First we
453 | // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
454 | // replace all simple value tokens with ']' characters. Third, we delete all
455 | // open brackets that follow a colon or comma or that begin the text. Finally,
456 | // we look to see that the remaining characters are only whitespace or ']' or
457 | // ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
458 |
459 | if (/^[\],:{}\s]*$/
460 | .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
461 | .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
462 | .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
463 |
464 | // In the third stage we use the eval function to compile the text into a
465 | // JavaScript structure. The '{' operator is subject to a syntactic ambiguity
466 | // in JavaScript: it can begin a block or an object literal. We wrap the text
467 | // in parens to eliminate the ambiguity.
468 |
469 | j = eval('(' + text + ')');
470 |
471 | // In the optional fourth stage, we recursively walk the new structure, passing
472 | // each name/value pair to a reviver function for possible transformation.
473 |
474 | return typeof reviver === 'function' ?
475 | walk({'': j}, '') : j;
476 | }
477 |
478 | // If the text is not JSON parseable, then a SyntaxError is thrown.
479 |
480 | throw new SyntaxError('JSON.parse');
481 | };
482 | }
483 | }());
484 |
--------------------------------------------------------------------------------
/src/cb/res/remove.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gantir/jsexpbuilder/1f9e6103ffeaddd6360f6c70bab0cf531a1097ed/src/cb/res/remove.png
--------------------------------------------------------------------------------
