Question

我正在尝试在jquery查询构建器中使用多个选择，然后创建Sql规则，如下所示

创建sql规则时，我遇到了多项选择问题。例如，在这里，而不是获取country IN('Australia','Germany')我得到country IN('Australia,Germany')，当我根据此规则提取数据时，这会导致问题。

将所有选定的项目作为一个字符串。这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>x86 Query Builder</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet" />
  <!-- <link rel="stylesheet" href="http://www.maatwebsite.nl/demo-builder/bower_components/selectize/dist/css/selectize.css"> -->

  <link href="http://querybuilder.js.org/dist/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://querybuilder.js.org/dist/selectize/dist/js/standalone/selectize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script> 
  <!-- <script src="http://www.maatwebsite.nl/demo-builder/bower_components/selectize/dist/js/standalone/selectize.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
 <script src="http://querybuilder.js.org/dist/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
   <div class="container"> 
   <div id="builder"></div> 
   <button class="btn btn-info" id="btn-get-sql">SQL</button>

   <script>
  data = '[{"id": 1,"name": "Germany"},{"id": 2,"name": "Austria"},{"id": 3,"name": "USA"},{"id": 4,"name": "Australia"}]'; 

$('#builder').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
  if (rule.filter.plugin == 'selectize') {
    rule.$el.find('.rule-value-container').css('min-width', '200px')
      .find('.selectize-control').removeClass('form-control');} });

$('#builder').queryBuilder({
  plugins: [
    'bt-tooltip-errors',
    'not-group'
  ],
  filters: [{ id: 'country',
    label: 'country',
    type: 'string',
    plugin: 'selectize',
    operators: ['equal','in'],
    plugin_config: {
      valueField: 'name',
      labelField: 'name',
      searchField: 'name',
      sortField: 'name',
      create: false,
      // maxItems: 1,
      plugins: ['remove_button'],
      onInitialize: function() {
        var that = this;
          JSON.parse(data).forEach(function(item) {
              that.addOption(item);
              console.log(item); }); } },
      valueSetter: function(rule, value) {
       rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);} }] }); 

    $('#btn-get-sql').on('click', function() {
  var result = $('#builder').queryBuilder('getSQL', false);
  // console.log(result);
  if (result.sql.length) {
    alert(result.sql);}
});
</script> 

   </div>  

</body>
</html>

我在很多论坛中搜索，我发现这个value_separator: ','将其添加到我的过滤器中，但它不起作用。我还尝试创建一个值设置器并对其进行自定义但是我没有成功使其工作。

有什么建议吗？非常感谢你。

Answer 1

问这个问题已经三个月了。但是如果有人在解决同样的问题，下面的解决方案解决了我的问题：

input: 'select', // this is important
multiple: true, // this is too

以下是GitHub issue

＆＃39; IN＆＃39;在Query Builder Jquery中获取SQL规则时，运算符无法正常工作

1 个答案: