Question

我正在尝试添加具有空规则的组（即，新组仅具有AND / OR按钮，添加时没有任何规则）。我可以不加任何规则地加载querybuilder，但是在添加组时不知道如何实现。这是一堆实时示例的link。我已经将它们作为基础并对其进行了修改，以实现所需的功能。

$(function(){
$('#builder').queryBuilder({

  filters: [{
    id: 'name',
    label: 'Name',
    type: 'string'
  }, {
    id: 'category',
    label: 'Category',
    type: 'integer',
    input: 'select',
    values: {
      1: 'Books',
      2: 'Movies',
      3: 'Music',
      4: 'Tools',
      5: 'Goodies',
      6: 'Clothes'
    },
    operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
  }, {
    id: 'in_stock',
    label: 'In stock',
    type: 'integer',
    input: 'radio',
    values: {
      1: 'Yes',
      0: 'No'
    },
    operators: ['equal']
  }, {
    id: 'price',
    label: 'Price',
    type: 'double',
    validation: {
      min: 0,
      step: 0.01
    }
  }],

  rules: {
    condition: 'AND',
    rules: []
  }
});
$('#builder').on('afterAddGroup.queryBuilder', function(e, rule, error, 
value) {

   


let builder = $('#builder')[0].queryBuilder;

builder.setRules({condition: 'AND',rules:[]});

  });


})

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"></script>

</head>

<body>

  <div id="builder"></div>

</body>

</html>

如您所见，我正在侦听afterAddGroup之后的事件，然后尝试为该特定组设置规则，但出现错误。

添加空过滤器组

0 个答案: