未捕获类型错误:无法设置未定义的属性“extendext”
已尝试所有方法让查询生成器正常工作，但无法(在艰难的 2 天之后)任何帮助将不胜感激
获取 query-builder.standalone.min.js:7 未捕获的类型错误:无法设置未定义的属性“extendext”
如果使用独立版本的查询生成器，则不应得到此信息
我的index.html如下:
提前致谢并致以问候 托比
<html>
<head>
<title></title>
<base href="/"></base>
<link href="https://querybuilder.js.org/assets/css/style.css" rel="stylesheet"></link>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet"></link>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.js"></script>
<script type="text/javascript">
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').queryBuilder({
plugins: ['bt-tooltip-errors'],
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
});
/****************************************************************
Triggers and Changers QueryBuilder
*****************************************************************/
$('#btn-get').on('click', function() {
var result = $('#builder').queryBuilder('getRules');
if (!$.isEmptyObject(result)) {
alert(JSON.stringify(result, null, 2));
}
else{
console.log("invalid object :");
}
console.log(result);
});
$('#btn-reset').on('click', function() {
$('#builder').queryBuilder('reset');
});
$('#btn-set').on('click', function() {
//$('#builder').queryBuilder('setRules', rules_basic);
var result = $('#builder').queryBuilder('getRules');
if (!$.isEmptyObject(result)) {
rules_basic = result;
}
});
//When rules changed :
$('#builder').on('getRules.queryBuilder.filter', function(e) {
//$log.info(e.value);
});
</script>
</head>
<body>
<div id="builder"></div>
<button class="btn btn-success" id="btn-set">Set Rules</button>
<button class="btn btn-primary" id="btn-get">Get Rules</button>
<button class="btn btn-warning" id="btn-reset">Reset</button>
</body>
最佳答案
如果您添加到页面 jQuery 并注释掉缺少的插件引用，似乎不会出现错误。
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').queryBuilder({
// plugins: ['bt-tooltip-errors'], not in the code/ cdn
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-get').on('click', function() {
var result = $('#builder').queryBuilder('getRules');
if (!$.isEmptyObject(result)) {
alert(JSON.stringify(result, null, 2));
} else {
// console.log("invalid object :");
}
// console.log(result);
});
$('#btn-reset').on('click', function() {
$('#builder').queryBuilder('reset');
});
$('#btn-set').on('click', function() {
//$('#builder').queryBuilder('setRules', rules_basic);
var result = $('#builder').queryBuilder('getRules');
if (!$.isEmptyObject(result)) {
rules_basic = result;
}
});
//When rules changed :
$('#builder').on('getRules.queryBuilder.filter', function(e) {
//$log.info(e.value);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://querybuilder.js.org/assets/css/style.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.js"></script>
<div id="builder"></div>
<button class="btn btn-success" id="btn-set">Set Rules</button>
<button class="btn btn-primary" id="btn-get">Get Rules</button>
<button class="btn btn-warning" id="btn-reset">Reset</button>关于javascript - jQuery 查询生成器 - 无法使其工作 - 未捕获的 TypeError : Cannot set property 'extendext' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52895825/