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
###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.