@zhongruigroup/ngx-query v5.0.0-beta.2
ngx-query
Demo
http://ngx-query.sharekudu.lunztech.cn/
Table of contents
About
ngx-query is a component for Angular 4+. A person searches data easily through ngx-query.
Features
- Quick search panel
- Quick Collapse search panel
- Advanced search panel
- Query templates
- Custom value input box
- Custom Toolbar
- Multi-language
Installation
- Install through npm:
npm install --save @zhongruigroup/ngx-queryThen include in your apps module:
import { Component, NgModule } from '@angular/core'; import { NgxQueryModule } from 'ngx-query'; @NgModule({ imports: [ NgxQueryModule.forRoot({ labels:{ buttons: { 'quick': 'Quick', ... }, ... }, ... }) ] }) export class MyModule {}You may also find it useful to view the demo source.
Finally use in one of your apps components:
import { Component } from '@angular/core';
@Component({
template:
'<ng-query #ngxQuery [title]="queryTitle" [fields]="fields" [queryTemplates]="queryTemplates" (query)="search($event)"></ng-query>'
})
export class MyComponent {}You may also find it useful to view the demo source.
Usage without a module bundler
<script src="node_modules/ngx-query/bundles/ngx-query.umd.js"></script>
<script>
// everything is exported ngxQuery namespace
</script>Documentation
https://gitlab.lunz.cn/lunz-ui-library/ngx-query
api
- ngx-query
input property
| name | type | default | description |
|---|---|---|---|
| title | string | '' | title of panel |
| datePickerReadonly | boolean | false | datePicker is readonly |
| mode | QueryMode | plain | the mode of ngx-query |
| showModeButtons | boolean | true | show buttons toolbar |
| columnNumber | number | 2 | how many columns in a row |
| dateFormat | string | 'YYYY-MM-DD' | formate of date |
| fields | Field[] | [] | fields |
| queryTemplates | Array<{ name: string, template: QueryGroup }> | [] | |
| showPlainCollapseToolBar | boolean | true | is show collapse toolbar in plainCollaspe mode |
| collapseToolbarLayout | CollapseToolbarLayout | SingleLine | collapse toolbar layout, support SingleLine,Inline,None layout |
| isClearDefaultValueWhenReset | boolean | false | is clear default value when click reset button |
output event
| name | parametertype | description |
|---|---|---|
| query | any | when excutequery |
| reset | any | when reset query template |
| templateChanged | any | when query template changed |
property
| name | type | description |
|---|---|---|
| isShowCollapse | boolean | support get only |
method
| name | returnType | description |
|---|---|---|
| hasCollapse() | boolean | is has collapse toolbar only support in plainCollapse mode |
| showCollapse(isShowCollapse: boolean) | void | change collapse only support in plainCollapse mode |
| getQuery() | QueryGroup | |
| getOriginalQuery() | QueryGroup | |
| validateQuery | boolean | |
| disableInput | void | |
| showPlainPanel | void | |
| showPlainCollapsePanel | void | |
| showAdvancedPanel | void | |
| queryTemplateChanged(queryTemplate: any) | void | |
| resetQueryTemplate() | void | |
| executeQuery() | void | |
| resetFieldTemplates() | void | reset filed template, currently only support label |
- ngx-query-field
input property
| name | type | default | description |
|---|---|---|---|
| name | string | '' | name of field |
| label | boolean | false | label of field |
| isCollapse | boolean | false | isCollapse in plainCollapse mode |
| canDisable | boolean | false | is can disable and clear input in plainCollapse mode |
| type | DataType | any | type of field |
| ruleType | string | undefined | query rule type |
| custom | string | 'YYYY-MM-DD' | custom of field |
| getRules | any | undefined | can return custome rule when get rule |
| validate | any | undefined | the function of validate when excute query |
| hidden | boolean | false | is hidden field |
| isClearValueWhenHidden | boolean | true | is clear value when hidden |
- ngx-query-disable-input
input property
| name | type | default | description |
|---|---|---|---|
| rule | Rule | undefined | the rule of ngx-query-field |
| diValue | any | undefined | the name of bind property. same with (ngModel) commonly |
- foRoot config
| name | type | default | description |
|---|---|---|---|
| labels | any | ||
| collapseToolbarLayout | CollapseToolbarLayout | SingleLine | collapse toolbar layout, support SingleLine,Inline,None layout |
Development
Prepare your environment
- Install Node.js and NPM
- Install local dev dependencies:
npm installwhile current directory is this repo
Development server
Run npm start to start a development server on port 8000 with auto reload + tests.
Testing
Run npm test to run tests once or npm run test:watch to continually run tests.
Release
- Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run releaseLicense
MIT
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago