如何在 jQuery QueryBuilder 插件中删除逗号分隔字符串中的周围空格

Question

我正在使用 jQuery QueryBuilder 插件。我有 in 运算符和输入文本。用户可以键入一个值或逗号分隔的字符串。

我使用了 value_separator: ','，但它使用了周围空间的全部值，如下所示。预期结果应该是 name IN ('Alex','Anne','Marie')

我尝试使用 valueSetter 函数如下：

    valueSetter: function(rule, value) { 
    rule.$el.find('.rule-value-container input').value = 
    rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim()) ; }

所以我检查了当前输入值，然后用逗号和 trim 将其分开，然后 return 新值，但它不起作用。

请问我做错了什么？谢谢。

$(document).ready(function() { 

$('#queryBuilder').queryBuilder({
    filters: [ 
     { id: 'name',
    label: 'Name',
    type: 'string',
    value_separator: ',',
    operators: ['in'],
    //this value setter to get current input value, split it by comma if it has and return with item trimmed
    valueSetter: function(rule, value) { 
    rule.$el.find('.rule-value-container input').val() = 
    rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim()) ; }
    }
    ]
 });   
 
$('#sql').on('click', function() { 
var filter = $('#queryBuilder').queryBuilder('getSQL', false);
console.log(filter.sql);
 });
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>

<div id="queryBuilder"></div>
<button type="submit" id="sql" class="btn btn-primary btn-outline btn-rounded center-block">SQL</button>

Answer 1

您可以使用 valueGetter 代替 valueSetter:

        valueGetter: function(rule) {
          return rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim());
        },

$(document).ready(function() { 

$('#queryBuilder').queryBuilder({
    filters: [ 
     { id: 'name',
    label: 'Name',
    type: 'string',
    valueGetter: function(rule) {
      return rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim());
    },
    value_separator: ',',
    operators: ['in'] }
    ]
 });   
 
$('#sql').on('click', function() { 
var filter = $('#queryBuilder').queryBuilder('getSQL', false);
console.log(filter.sql);
 });
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>

<div id="queryBuilder"></div>
<button type="submit" id="sql" class="btn btn-primary btn-outline btn-rounded center-block">SQL</button>

如何在 jQuery QueryBuilder 插件中删除逗号分隔字符串中的周围空格

How to remove surrounding spaces in a comma delimited string in jQuery QueryBuilder plugin

javascript

jquery

whitespace

trim

query-builder