在jquery生成器中防止数据丢失

时间：2018-12-12 15:38:11

标签： javascript jquery

Jquery-builder是用于创建和显示复杂的条件逻辑的工具。这是一个例子。

$(document).ready(function() {
  var rules_basic = {
    condition: 'AND',
    rules: [{
      id: 'price',
      operator: 'less',
      value: 10.25
    }, {
      condition: 'OR',
      rules: [{
        id: 'category',
        operator: 'equal',
        value: 2
      }, {
        id: 'category',
        operator: 'equal',
        value: 1
      }]
    }]
  };

  $('#builder-basic').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
      }
    }, {
      id: 'id',
      label: 'Identifier',
      type: 'string',
      placeholder: '____-____-____',
      operators: ['equal', 'not_equal'],
      validation: {
        format: /^.{4}-.{4}-.{4}$/
      }
    }],
    rules: rules_basic
  });

  $('#btn-reset').on('click', function() {
    $('#builder-basic').queryBuilder('reset');
  });

  $('#btn-set').on('click', function() {
    $('#builder-basic').queryBuilder('setRules', rules_basic);
  });

  $('#btn-get').on('click', function() {
    var result = $('#builder-basic').queryBuilder('getRules');
    if (!$.isEmptyObject(result)) {
      alert(JSON.stringify(result, null, 2));
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.1.2/doT.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-extendext@0.1.2/jQuery.extendext.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.1/dist/js/query-builder.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="btn-group">
    <button class="btn btn-warning reset" id="btn-reset" data-target="basic">Reset</button>
    <button class="btn btn-success set-json" id="btn-set" data-target="basic">Set rules</button>
    <button class="btn btn-primary parse-json" id="btn-get" data-target="basic">Get rules</button>
  </div>
  <br><br>
  <div id="builder-basic"></div>
</body>

此处显示的json是：

{
  condition: 'AND',
  rules: [{
    id: 'price',
    operator: 'less',
    value: 10.25
  }, {
    condition: 'OR',
    rules: [{
      id: 'category',
      operator: 'equal',
      value: 2
    }, {
      id: 'category',
      operator: 'equal',
      value: 1
    }]
  }]
}

我也可以单击Get Rules按钮来检索json。

但是，如果我向json提供condition级别的主数据，则单击Get Rules按钮会导致数据丢失。

例如：

{
  condition: 'AND',
  somekey: "this data is lost",
  rules: [{
    id: 'price',
    operator: 'less',
    value: 10.25
  }, {
    condition: 'OR',
    somekey: "this data is also lost",
    rules: [{
      id: 'category',
      operator: 'equal',
      value: 2
    }, {
      id: 'category',
      operator: 'equal',
      value: 1
    }]
  }]
}

在以下示例中可以看到相同的结果：

$(document).ready(function() {
  var rules_basic = {
    condition: 'AND',
    somekey: "this data is lost",
    rules: [{
      id: 'price',
      operator: 'less',
      value: 10.25
    }, {
      condition: 'OR',
      somekey: "this data is also lost",
      rules: [{
        id: 'category',
        operator: 'equal',
        value: 2
      }, {
        id: 'category',
        operator: 'equal',
        value: 1
      }]
    }]
  };

  $('#builder-basic').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
      }
    }, {
      id: 'id',
      label: 'Identifier',
      type: 'string',
      placeholder: '____-____-____',
      operators: ['equal', 'not_equal'],
      validation: {
        format: /^.{4}-.{4}-.{4}$/
      }
    }],
    rules: rules_basic
  });

  $('#btn-reset').on('click', function() {
    $('#builder-basic').queryBuilder('reset');
  });

  $('#btn-set').on('click', function() {
    $('#builder-basic').queryBuilder('setRules', rules_basic);
  });

  $('#btn-get').on('click', function() {
    var result = $('#builder-basic').queryBuilder('getRules');
    if (!$.isEmptyObject(result)) {
      alert(JSON.stringify(result, null, 2));
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.1.2/doT.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-extendext@0.1.2/jQuery.extendext.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.1/dist/js/query-builder.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="btn-group">
    <button class="btn btn-warning reset" id="btn-reset" data-target="basic">Reset</button>
    <button class="btn btn-success set-json" id="btn-set" data-target="basic">Set rules</button>
    <button class="btn btn-primary parse-json" id="btn-get" data-target="basic">Get rules</button>
  </div>
  <br>
  <br>
  <div id="builder-basic"></div>
</body>

现在，当我单击Get Rules时，键somekey就会丢失。

已经考虑了几种解决方法。例如，我可以编写一个遍历json并根据缺少的实体填充后者的函数。但是我希望会有一些不那么麻烦的方法。在文档中找不到一个。

0 个答案:

没有答案
相关问题
最新问题