[英]jquery-queryBuilder init rules with last search submitted
我有一個集成了插件querybuilder.js.org
的表單
我的js
是:
來自: scripts.js
$(document).ready(function(e) {
// INIT PLUGIN
$('#queryBuilder').queryBuilder({
plugins: ['bt-tooltip-errors'],
filters: [{
id: 'description',
label: 'Description',
type: 'string'
}]
});
// RESTORE RULES FROM LAST SEARCH
$('#queryBuilder').queryBuilder('setRules', decodeURIComponent($("#rules").val()) );
// ON SUBMIT, EDIT THE FORM AND APPEND SQL, PARAMS to USE IN SEARCH FROM DATABASE, AND APPEND RULES TO RESTORE IT TO NEXT LOAD OF THE PAGE
$("#btn-submit").on("click", function(e) {
e.preventDefault();
var form = $("#form");
var rules = $('#queryBuilder').queryBuilder('getRules');
var query = $('#queryBuilder').queryBuilder('getSQL', 'question_mark');
// FOR RESTORE INITIAL VALUES ON RELOAD PAGE
form.append('<input type="hidden" name="rules" value="' + encodeURIComponent(JSON.stringify(rules, null, 2)) + '">');
form.append('<input type="hidden" name="sql" value="' + query.sql + '">');
form.append('<input type="hidden" name="params" value="' + encodeURIComponent(JSON.stringify(query.params, null, 2)) + '">');
form.submit();
});
});
我在index.php
中的代碼是:
<?php
if ( isset($_POST) ) {
$rules = isset($_POST['rules']) ? $_POST['rules'] : "";
}
?>
<form name="form" id="form" role="form" method="post" action="">
<div id="queryBuilder"></div>
<!--used only to restore rules in jquery-querybuilder-->
<input type="hidden" id="rules" value="<?php echo $rules; ?>">
<button type="button" id="btn-submit" class="btn btn-success">Search</button>
</form>
問題是規則沒有按預期恢復。
如果我在准備好的文檔上插入警報,例如:
alert(decodeURIComponent($("#rules").val()));
我得到正確的規則:
{
"condition": "AND",
"rules": [
{
"id": "description",
"field": "description",
"type": "string",
"input": "text",
"operator": "equal",
"value": "test value"
}
],
"valid": true
}
看來這$('#queryBuilder').queryBuilder('setRules', decodeURIComponent($("#rules").val()) );
不是初始化插件的有效方法。
如果我嘗試以這種方式對規則進行硬編碼:
var rules_basic = {
"condition": "AND",
"rules": [
{
"id": "description",
"field": "description",
"type": "string",
"input": "text",
"operator": "equal",
"value": "test value"
}
],
"valid": true
};
$('#queryBuilder').queryBuilder({
plugins: ['bt-tooltip-errors'],
filters: [{
id: 'description',
label: 'Description',
type: 'string'
}],
rules: rules_basic
});
然后一切正常!
如何強制從動態隱藏輸入字段中獲取初始化規則? 我的script.js
與 HTML 是分開的,所以我不能(也不想)強制使用PHP
編寫初始規則,例如:
index.php
:
.... HTML PART
..... JS PART
$('#queryBuilder').queryBuilder({
plugins: ['bt-tooltip-errors'],
filters: [{
id: 'description',
label: 'Description',
type: 'string'
}],
rules: <?php echo $rules; ?> // <---------------- HERE
});
可能的原因是你得到了一個帶有“.val”的字符串值 function 但插件需要一個 JSON object 來設置規則,請嘗試在腳本中使用此代碼。
var customRules = decodeURIComponent($("#rules").val());
$('#queryBuilder').queryBuilder('setRules', JSON.parse(customRules) );
而不是這個:
$('#queryBuilder').queryBuilder('setRules', decodeURIComponent($("#rules").val()) );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.