在 Jquery Querybuilder afterAddRule 事件中选择创建的规则的后代

Posted 2023-05-08

【中文标题】在 Jquery Querybuilder afterAddRule 事件中选择创建的规则的后代

【英文标题】：Selecting a descendant of the created Rule in the Jquery Querybuilder afterAddRule event

【发布时间】：2021-06-17 08:53:21

【问题描述】：

此 html 是来自新规则的 sn-p，当您在 Jquery Querybuilder 中单击“添加规则”时，该规则会创建。

  <div class="rule-header">
    <div class="btn-group pull-right rule-actions">
      <button type="button" class="btn btn-xs btn-danger" data-delete="rule">
        <i class="glyphicon glyphicon-remove"></i> Delete
      </button>
    </div>
  </div>
  <div class="error-container" data-toggle="tooltip">
    <i class="glyphicon glyphicon-warning-sign"></i>
  </div>
  <div class="rule-filter-container">
    <select class="form-control" name="ruleBuilder_rule_4_filter">
      <option value="-1">------</option>
      <option value="AccountType">AccountType: Account Type</option>
      <option value="ar_ledger">ar_ledger: AR Ledger</option>
         </select>
  </div>
  <div class="rule-operator-container"></div>
  <div class="rule-value-container"></div>
</div>

我正在按如下方式处理 Querybuilder 的 addAfterRule 事件，并尝试在框后初始化模糊搜索下拉菜单。但是，我似乎无法引用该框。 $(rule).find() 不起作用，我尝试了各种不同的选择器。如何获得对框的引用以便操作它？

 $('#ruleBuilder').queryBuilder(
                plugins: ['bt-tooltip-errors'],
                filters: filters,
                rules: jsonRules,
                operators:
                    [
                        'equal',
                        'not_equal',
                        'in',
                        'not_in',
                        'less',
                        'less_or_equal',
                        'greater',
                        'greater_or_equal',
                        'between',
                        'not_between',
                        'begins_with',
                        'not_begins_with',
                        'contains',
                        'not_contains',
                        'ends_with',
                        'not_ends_with',
                        //'is_not_empty',
                        'is_null',
                        'is_not_null',
                         type: 'is_empty', nb_inputs: 0, multiple: false, apply_to: ['string'] ,
                         type: 'is_not_empty', nb_inputs: 0, multiple: false, apply_to: ['string'] 

                    ],
                lang: 
                    operators: 
                        is_empty: 'is empty',
                        is_not_empty: 'is not empty',
                        equal_boolean: 'equal'
                    
                ,
                sqlOperators: 
                    is_empty:  op: 'IS NULL' ,
                    is_not_empty:  op: 'IS NOT NULL' ,
                    equal_boolean:  op: 'equal' 
                
            ).on('afterAddRule.queryBuilder', function (e, rule) 
                $(rule).find('.form-control').each(
                    function (index) 
                        $(this).after('<div id="fuzzSearch' + numFilters + 1 + '"><div id ="fuzzNameContainer"><span class="fuzzName"></span><span class="fuzzArrow"></span></div><div id="fuzzDropdownContainer"><input type="text" value="" class="fuzzMagicBox" placeholder="search.." /><span class="fuzzSearchIcon"></span><ul id="fuzzResults"></ul></div>');
                    );

                $(rule).find('.form-control').each(
                    function (index) 
                        $(this).fuzzyDropdown( mainContainer: '#fuzzSearch' + numFilters + 1 );
                    );
                );

【参考方案1】：

 $('#build-query-defintion').queryBuilder(
            plugins: ['sortable', 'bt-tooltip-errors',
                'bt-checkbox',
                'invert',
                'not-group',
                'filter-description'],
            allow_empty: true,
            filters: result,
            rules: customFilters,
            icons: 
                add_group: 'fa fa-plus-square',
                add_rule: 'fa fa-plus-circle',
                remove_group: 'fa fa-minus-square',
                remove_rule: 'fa fa-minus-circle',
                error: 'fa fa-exclamation-triangle',
                sortable: 'fa fa-exclamation-triangle'
            
        ).on('afterCreateRuleFilters.queryBuilder', function (e, rule) 
            rule.$el.find(QueryBuilder.selectors.rule_filter).selectpicker(
                liveSearch: true,
                //style:'width: 500px;',
            );
        );

请包含 jquery 查询生成器 js、css 引导 js，cs 引导选择器 js,css 希望这个灵魂对你有用。