QueryBuilder-3.3.5.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. QueryBuilder = function(id) {
  2. this.id = id;
  3. this.sed = 0;
  4. };
  5. QueryBuilder.prototype.setFields = function(fields) {
  6. this.fields = fields;
  7. };
  8. QueryBuilder.prototype.setData = function(data) {
  9. this.data = data;
  10. };
  11. QueryBuilder.prototype.setUrl = function(url) {
  12. this.url = url;
  13. };
  14. QueryBuilder.prototype.genId = function() {
  15. return this.sed++;
  16. };
  17. QueryBuilder.prototype.render = function() {
  18. this.renderMenu();
  19. this.renderFields();
  20. var self = this;
  21. $(document).delegate('.queryBuilderAdd', 'click', function(e) {
  22. self.addField(e.target.title);
  23. });
  24. $(document).delegate('.queryBuilderDelete', 'click', function(e) {
  25. var el = e.target.parentNode.parentNode;
  26. el.parentNode.removeChild(el);
  27. });
  28. $(document).delegate('', 'hide.bs.dropdown', function(e) {
  29. if ($(e.relatedTarget).parent().hasClass('queryBuilderField')) {
  30. e.preventDefault();
  31. }
  32. });
  33. $(document).on('click.bs.dropdown.data-api', function(e) {
  34. if ($(e.target).parents('.queryBuilderField').length == 0) {
  35. $('.queryBuilderField.open').each(function(index, item) {
  36. $(item).removeClass('open');
  37. var name = item.getAttribute('title');
  38. $('#' + item.id + ' .queryBuilderValue').html(
  39. $('#' + item.id + ' .queryBuilderName').val()
  40. );
  41. });
  42. }
  43. });
  44. $(document).delegate('#queryBuilderButton', 'click', function() {
  45. self.submit();
  46. });
  47. };
  48. QueryBuilder.prototype.renderMenu = function() {
  49. var el = document.getElementById(this.id + 'Menu');
  50. var html = '';
  51. for (var key in this.fields) {
  52. var field = this.fields[key];
  53. html += '<li><a href="#" title="' + field.name + '" class="queryBuilderAdd">' + field.label + '</a></li>'
  54. }
  55. el.innerHTML = html;
  56. };
  57. QueryBuilder.prototype.renderFields = function() {
  58. var el = document.getElementById(this.id + 'Fields');
  59. el.innerHTML = '';
  60. for (var i = 0; i < this.data.length; i++) {
  61. var item = this.data[i];
  62. this.addField(item.name, item.value);
  63. }
  64. };
  65. QueryBuilder.prototype.addField = function(fieldName, fieldValue) {
  66. var field = this.fields[fieldName];
  67. fieldValue = fieldValue ? fieldValue : '';
  68. var el = document.createElement('li');
  69. el.id = this.genId();
  70. el.className = 'queryBuilderField';
  71. el.title = field.name;
  72. el.innerHTML = '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'
  73. + '<span class="queryBuilderLabel">' + field.label + '</span>'
  74. + '<span class="queryBuilderOperator">' + field.operator + ':&nbsp;</span>'
  75. + '<span class="queryBuilderValue">' + fieldValue + '</span>'
  76. + '&nbsp;'
  77. + '<span aria-hidden="true" class="queryBuilderDelete">&times;</span>'
  78. + '</a>'
  79. + '<ul class="dropdown-menu" role="menu">'
  80. + '<li><form><input type="text" class="queryBuilderName" name="' + fieldName + '" value="' + fieldValue + '"></a></li>'
  81. + '</ul>';
  82. document.getElementById(this.id + 'Fields').appendChild(el);
  83. };
  84. QueryBuilder.prototype.submit = function() {
  85. var text = '';
  86. var expr = '#' + this.id + ' input';
  87. $(expr).each(function(index, item) {
  88. var name = item.getAttribute('name');
  89. var value = item.value;
  90. if (value != '') {
  91. text += '|' + name + '=' + value;
  92. }
  93. });
  94. var url = this.url;
  95. if (url.indexOf('?') == -1) {
  96. url += '?q=' + text.substring(1);
  97. } else {
  98. url += '&q=' + text.substring(1);
  99. }
  100. location.href = url;
  101. };