@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-query
Then 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 install
while 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 release
License
MIT
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 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
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago