Skip to content

FilterBuilder is an UI component to create queries and filters. Based on vue 2.0.

License

Notifications You must be signed in to change notification settings

akumatus/FilterBuilder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FilterBuilder

FilterBuilder is an UI component to create queries and filters. Based on vue 2.0 and bootstrap & AdminLTE.css

Use the FilterBuilder to construct queries of arbitrary complexity.

🌰 Here is a DEMO

Page

###Usage Writing HTML like:

<and-or :options="options" :isFirst="isFirst" ref="andOr"></and-or>

Passing Pros like:

{
  options: {
    keys: [{
      name: 'Choose Key',
      id: -99
    },{
      name: 'Crash Number',
      id: 134
    },{
      name: 'Daily Startup',
      id: 256
    }],
    operators: [{
      name: 'Choose Operator',
      id: -99
    },{
      name: 'more',
      id: '>'
    },{
      name: 'equal',
      id: '='
    },{
      name: 'less',
      id: '<'
    }]
  },
  isFirst: true
}

Using queryFormStatus() function to get query result like:

{
    "conditions": "AND",
    "rules": [
        {
            "key": "2",
            "operator": "more",
            "value": "1"
        },
        {
            "key": "2",
            "operator": "equal",
            "value": "3"
        },
        {
            "conditions": "OR",
            "rules": [
                {
                    "key": "1",
                    "operator": "equal",
                    "value": "4"
                },
                {
                    "key": "3",
                    "operator": "equal",
                    "value": "5"
                },
                {
                    "conditions": "AND",
                    "rules": [
                        {
                            "key": "2",
                            "operator": "less",
                            "value": "6"
                        }
                    ]
                }
            ]
        }
    ]
}

Using fillFormStatus() function to fill query into this component.

🍒Form validation & other addtional function is still in develop.

About

FilterBuilder is an UI component to create queries and filters. Based on vue 2.0.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published