diff --git a/src/core.js b/src/core.js index 305a9e53..b664e778 100644 --- a/src/core.js +++ b/src/core.js @@ -653,6 +653,11 @@ QueryBuilder.prototype.createRuleOperators = function(rule) { return; } + if (rule.filter.dynamic_filter) { + var $filterDynamic = $(this.getRuleFilterDynamic(rule.filter)); + rule.$el.find(QueryBuilder.selectors.filter_container).append($filterDynamic); + } + var operators = this.getOperators(rule.filter); var $operatorSelect = $(this.getRuleOperatorSelect(rule, operators)); diff --git a/src/defaults.js b/src/defaults.js index b6c5a5eb..4815df53 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -155,6 +155,7 @@ QueryBuilder.DEFAULTS = { templates: { group: null, rule: null, + filterDynamic: null, filterSelect: null, operatorSelect: null, ruleValueSelect: null diff --git a/src/public.js b/src/public.js index 79491b96..20a73867 100644 --- a/src/public.js +++ b/src/public.js @@ -262,9 +262,14 @@ QueryBuilder.prototype.getRules = function(options) { value = rule.value; } + var filterName = rule.filter ? rule.filter.field : null; + if (rule.filter.dynamic_filter) { + filterName = rule.$el.find('.rule-filter-container input').val(); + } + var ruleData = { id: rule.filter ? rule.filter.id : null, - field: rule.filter ? rule.filter.field : null, + field: filterName, type: rule.filter ? rule.filter.type : null, input: rule.filter ? rule.filter.input : null, operator: rule.operator ? rule.operator.type : null, diff --git a/src/template.js b/src/template.js index 004d4693..20652391 100644 --- a/src/template.js +++ b/src/template.js @@ -65,7 +65,13 @@ QueryBuilder.templates.filterSelect = '\ \ {{~}} \ {{? optgroup !== null }}{{?}} \ -'; +\ +'; + +QueryBuilder.templates.filterDynamic = '\ +
\ + \ +'; QueryBuilder.templates.operatorSelect = '\ {{? it.operators.length === 1 }} \ @@ -191,6 +197,35 @@ QueryBuilder.prototype.getRuleFilterSelect = function(rule, filters) { return this.change('getRuleFilterSelect', h, rule, filters); }; +/** + * Returns rule's filter dynamic name HTML + * @param {Rule} rule + * @param {object[]} filters + * @returns {string} + * @fires QueryBuilder.changer:getRuleFilterTemplate + * @private + */ +QueryBuilder.prototype.getRuleFilterDynamic = function(filter) { + var h = this.templates.filterDynamic({ + builder: this, + filter: filter, + icons: this.icons, + settings: this.settings, + translate: this.translate.bind(this) + }); + + /** + * Modifies the raw HTML of the rule's filter dynamic input + * @event changer:getRuleFilterSelect + * @memberof QueryBuilder + * @param {string} html + * @param {Rule} rule + * @param {QueryBuilder.Filter[]} filters + * @returns {string} + */ + return this.change('getRuleFilterDynamic', h, filter); +}; + /** * Returns rule's operator HTML * @param {Rule} rule