5.0.0-beta.2 • Published 2 years ago

@zhongruigroup/ngx-query v5.0.0-beta.2

Weekly downloads
10
License
-
Repository
-
Last release
2 years ago

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

  1. ngx-query

input property

nametypedefaultdescription
titlestring''title of panel
datePickerReadonlybooleanfalsedatePicker is readonly
modeQueryModeplainthe mode of ngx-query
showModeButtonsbooleantrueshow buttons toolbar
columnNumbernumber2how many columns in a row
dateFormatstring'YYYY-MM-DD'formate of date
fieldsField[][]fields
queryTemplatesArray<{ name: string, template: QueryGroup }>[]
showPlainCollapseToolBarbooleantrueis show collapse toolbar in plainCollaspe mode
collapseToolbarLayoutCollapseToolbarLayoutSingleLinecollapse toolbar layout, support SingleLine,Inline,None layout
isClearDefaultValueWhenResetbooleanfalseis clear default value when click reset button

output event

nameparametertypedescription
queryanywhen excutequery
resetanywhen reset query template
templateChangedanywhen query template changed

property

nametypedescription
isShowCollapsebooleansupport get only

method

namereturnTypedescription
hasCollapse()booleanis has collapse toolbar only support in plainCollapse mode
showCollapse(isShowCollapse: boolean)voidchange collapse only support in plainCollapse mode
getQuery()QueryGroup
getOriginalQuery()QueryGroup
validateQueryboolean
disableInputvoid
showPlainPanelvoid
showPlainCollapsePanelvoid
showAdvancedPanelvoid
queryTemplateChanged(queryTemplate: any)void
resetQueryTemplate()void
executeQuery()void
resetFieldTemplates()voidreset filed template, currently only support label
  1. ngx-query-field

input property

nametypedefaultdescription
namestring''name of field
labelbooleanfalselabel of field
isCollapsebooleanfalseisCollapse in plainCollapse mode
canDisablebooleanfalseis can disable and clear input in plainCollapse mode
typeDataTypeanytype of field
ruleTypestringundefinedquery rule type
customstring'YYYY-MM-DD'custom of field
getRulesanyundefinedcan return custome rule when get rule
validateanyundefinedthe function of validate when excute query
hiddenbooleanfalseis hidden field
isClearValueWhenHiddenbooleantrueis clear value when hidden
  1. ngx-query-disable-input

input property

nametypedefaultdescription
ruleRuleundefinedthe rule of ngx-query-field
diValueanyundefinedthe name of bind property. same with (ngModel) commonly
  1. foRoot config
nametypedefaultdescription
labelsany
collapseToolbarLayoutCollapseToolbarLayoutSingleLinecollapse 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

5.0.0-beta.2

2 years ago

5.0.0-beta.1

2 years ago

4.0.5

3 years ago

3.1.11

3 years ago

4.0.4

3 years ago

3.1.10

3 years ago

3.1.9

3 years ago

4.0.3

3 years ago

4.0.2

3 years ago

3.1.7

3 years ago

4.0.1

3 years ago

4.0.0

3 years ago

4.0.0-beta.2

3 years ago

3.1.6

3 years ago

3.1.5

3 years ago

3.1.4

4 years ago

3.1.3

4 years ago

3.1.2

4 years ago

3.1.1

4 years ago

4.0.0-beta.1

4 years ago

4.0.0-beta.0

4 years ago

3.1.0

4 years ago

3.0.5

5 years ago

3.0.4

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

1.3.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.3.5

6 years ago