ngx-query-建设器

基于 jQuery QueryBuilder 的现代化Angular 4+查询构建器. 支持重定制Angular组件,并提供了处理自定义数据类型的灵活方法.

从( 从)https://github.com/zebzhao/Angular-QueryBuilder 互联网档案馆的存檔,存档日期2013-12-22) 由于原作项目已停止更新,不支持最新的Angular版本,所以我将继续维护并支持Angular的最新版本.

开始

安装

• 角20,使用20.X.X
• 角19,使用19.X.X

npm install @eliot-ragueneau/ngx-query-builder

• 角9,使用0.6.0
• 角8,使用0.5.1
• 角6-7,使用0.4.2
• 角4-5,使用0.3.2

npm install angular2-query-builder

见 https://github.com/zebzhao/Angular-QueryBuilder 互联网档案馆的存檔,存档日期2013-12-22 关于旧版本使用的更详细情况.

实例

基本用途

app.module.ts

import {QueryBuilderModule} from "@eliot-ragueneau/ngx-query-builder";
import {AppComponent} from "./app.component"

@NgModule({
  imports: [...,
  QueryBuilderModule,
  IonicModule.forRoot(AppComponent) // (Optional) for IonicFramework 2+
]})
export class AppModule {
}

app.component.html

...
<ngx-query-builder [(ngModel)]='query' [config]='config'></ngx-query-builder>
...

app.component.ts

import {QueryBuilderConfig} from '@eliot-ragueneau/ngx-query-builder';

export class AppComponent {
  query = {
    condition: 'and',
    rules: [
      {field: 'age', operator: '<=', value: 'Bob'},
      {field: 'gender', operator: '>=', value: 'm'}
    ]
  };

  config: QueryBuilderConfig = {
    fields: {
      age: {name: 'Age', type: 'number'},
      gender: {
        name: 'Gender',
        type: 'category',
        options: [
          {name: 'Male', value: 'm'},
          {name: 'Female', value: 'f'}
        ]
      }
    }
  }
}

自定义输入组件

app.component.html

<ngx-query-builder [(ngModel)]='query' [config]='config'>
  <ng-container *queryInput="let rule; type: 'date'">
    <custom-datepicker [(ngModel)]="rule.value"></custom-datepicker>
  </ng-container>
</ngx-query-builder>

app.component.ts

query = {
  condition: 'and',
  rules: [
    {field: 'birthday', operator: '=', value: new Date()}
  ]
};

config: QueryBuilderConfig = {
  fields: {
    birthday: {
      name: 'Birthday',
      type: 'date',
      operators: ['=', '<=', '>'],
      defaultValue: () => new Date()
    }
  }
}

属性绑定快速引用

ngx-query-builder

结构指令

使用这些指令来用自定义组件来取代查询构建器的不同部分.

queryArrowIcon

用于替换查询构建器倒塌/ accordion 模式中使用的扩展箭头的指令.

querySwitchGroup

用于替换开关控制,例如AND/OR条件。 通过使用此指令来覆盖默认组件,可以指定更多的自定义条件.

queryButtonGroup

用于替换添加的默认按钮组, 添加 Ruleset, 删除 Ruleset 按钮 .

queryRulesetAddRuleButton

用于替换添加规则的默认按钮 .

queryRulesetAddRulesetButton

用于替换添加规则的默认按钮 .

queryRulesetRemoveButton

用于替换删除规则的默认按钮 .

queryEntity

用于替换实体选择组件.

queryField

使用此指令来取代查询字段选择组件.

queryOperator

用于替换查询运算符选择组件.

queryInput

用于替换输入组件. 指定类型/queryInputType,以匹配特定的字段类型到输入模板.

queryRuleRemoveButton

替换默认指令删除单个规则按钮组件 .

queryEmptyWarning

可用于自定义默认的空警告消息,也可以指定 emptyMessage 财产约束.

依赖关系

• 角 18 + 变相

发展

备忘

• pnpm watch
• pnpm start
• http://localhost:4200 查看演示

演示预览

代码结构

• BaseQuery 构建器( 逻辑容器 - 隐藏)
  • 查询构建组件( Root 组件 -) 导出(中文(简体) )
  • 内部查询构建组件( 递归组件 - 隐藏)

构建

• pnpm build

发布

cd dist/ngx-query-builder
npm publish --access public

用于其他地方项目

cd dist/ngx-query-builder
npm link

cd /path/to/other/project
npm link ngx-query-builder

就是这样.