Блог

Главная - Вопросы по программированию - Как удалить окружающие пробелы в строке, разделенной запятыми, в плагине jQuery QueryBuilder

Как удалить окружающие пробелы в строке, разделенной запятыми, в плагине jQuery QueryBuilder

#javascript #jquery #whitespace #trim #query-builder

Вопрос:

Я использую плагин 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()) ; }

Поэтому я проверяю текущее входное значение, а затем разделяю его запятой и обрезаю каждый элемент, а затем возвращаю новое значение, но оно не работает.

Есть какие-нибудь предложения, пожалуйста, что я делаю не так ? Спасибо.

 $(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>

Комментарии:

1. Чтобы задать значение узла DOM= в jquery, вы .val(new_value) не используете .value= (или $("sel")[0].value= (обратите внимание на [0])`

2. @freedomn-m спасибо, но не работаю с .val() я пробовал это раньше

3. Тогда ваш селектор, вероятно, неверен. Можете ли вы обновить свой фрагмент, чтобы указать, где вы добавили свой trim код?

4. Вы, вероятно, хотите ....val().split(",").map((item)=>item.trim()).join(",") , так как он ожидает строку, а не массив.

5. @freedomn-m отредактировано. проверьте, пожалуйста, функцию набора значений. Можете ли вы определить, в чем проблема ? очень признателен

Ответ №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>
Метки: , ,