如何在Angular中使用Jquery Query Builder [英] How to use Jquery Query Builder in Angular
问题描述
在我的angular-cli项目中寻找一种使用 jQuery Query Builder 的方法。
Looking for a way of using the jQuery Query Builder in my angular-cli project.
首先我尝试使用插件 laplasianin / angular- jqueryQueryBuilder ，但我想念如何将其实际导入到我的组件中的说明。我是angular / typescript的新手。
First I've tried using the plugin laplasianin/angular-jqueryQueryBuilder, but I miss instructions on how to actually import this into my component. I am very novice at angular/typescript.
然后我通过安装构建包自行尝试：
npm安装jQuery-QueryBuilder
Then I've tried it on my own by installing the builder package:
npm install jQuery-QueryBuilder
我已将它添加到我的组件中，就像jQuery一样。
这是生成的示例代码，基于以下演示 ：
I've added it to my component, just like jQuery. This is the resulting example code, based on the following demo:
import {AfterViewInit, Component} from "@angular/core";
import * as jQuery from "jquery";
import "jQuery-QueryBuilder/dist/js/query-builder.standalone.js";
import "jQuery-QueryBuilder/dist/css/query-builder.default.css";
@Component({
selector: 'app-query-builder',
templateUrl: './query-builder.component.html',
styleUrls: ['./query-builder.component.scss']
})
export class QueryBuilderComponent implements AfterViewInit{
protected 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
}]
}]
};
ngAfterViewInit() {
this.getQueryBuilder();
}
private getQueryBuilder() {
// jQuery('#builder').html('appelsap');
let queryBuilder = jQuery.fn.queryBuilder;
jQuery('#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: this.rules_basic
});
}
}
在这种情况下，应用程序会编译并加载，但是我返回时收到以下错误
无法读取未定义的属性模板。
In this case the app compiles and loads, but I get the following error in return
Cannot read property 'template' of undefined.
我没有关于如何使这任何工作的线索。真的希望得到一些帮助。谢谢。
I have no clue on how to get any of this working. Would really like some help on this. Thank you.
=======编辑
根据要求，这是完整的错误：
======= EDIT As asked, this is the complete error:
ERROR TypeError: Cannot read property 'template' of undefined
at QueryBuilder.<anonymous> (query-builder.standalone.js:415)
at Array.forEach (<anonymous>)
at new QueryBuilder (query-builder.standalone.js:410)
at jQuery.fn.init.$.fn.queryBuilder (query-builder.standalone.js:3934)
at QueryBuilderComponent.webpackJsonp.../../../../../src/app/components/application/query-builder/query-builder.component.ts.QueryBuilderComponent.getQueryBuilder (query-builder.component.ts:40)
at QueryBuilderComponent.webpackJsonp.../../../../../src/app/components/application/query-builder/query-builder.component.ts.QueryBuilderComponent.ngAfterViewInit (query-builder.component.ts:33)
at callProviderLifecycles (core.es5.js:11269)
at callElementProvidersLifecycles (core.es5.js:11244)
at callLifecycleHooksChildrenFirst (core.es5.js:11228)
at checkAndUpdateView (core.es5.js:12325)
=======编辑
更新了反映当前使用情况的代码。
======= EDIT Updated the code to reflect current usage.
推荐答案
首先，laplasianin / angular-jqueryQueryBuilder是一个AngularJs（1）库。
Firstly, laplasianin/angular-jqueryQueryBuilder is an AngularJs (1) library.
其次，如果你在anglar-cli中设置这一行。 json你可以使它工作：
Secondly, if you set this lines in your anglar-cli.json you will be able to make it works:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/jQuery-QueryBuilder/dist/css/query-builder.default.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"
],
您的组件：
import { Component, AfterViewInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
protected 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
}]
}]
};
ngAfterViewInit() {
this.getQueryBuilder();
}
private getQueryBuilder() {
$('#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: this.rules_basic
});
}
}
不要忘记：
- npm install bootstrap --save
- npm install jquery --save
- npm install jQuery-QueryBuilder --save
不幸的是，你没有任何自动完成功能，但它有效。
Unfortunately, you will not have any autocompletion but it works.
这篇关于如何在Angular中使用Jquery Query Builder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
