I have a data table component and seven multiple selectors related to it. And i want to reset all selectors to default value with a reset button. My data source is SQL database, so i don't have a select "All" option in these selector. Is there any way to make it happen?
问题:
回答1:
There are two issues you need to solve:
- Adding default values for the selectors
- Adding a button that resets these selectors to their default value
For 1 I would go for something like this:
Set the SQL query for the selectors datasource like this:
SELECT '%' FROM [ANY TABLE] UNION [YOUR EXISTING QUERY]
This way you will also have the value
%
as a possible option. This will be your default value, but your DataTable query will have to useLIKE ${YOUR_PARAMETER}
in theWHERE
clause for it to work.
Now for 2 you need some preparation to make things work:
Make your select components listen to the same parameter they are setting. This way changing a parameter will also trigger the update of the select UI.
Add a Script component so you can write the function to reset the parameters in it. This way, you can call this function on the event of a button press.
The final trick is just to add a button which will trigger this function. You can use plain old HTML+JS syntax.
The function + HTML button would be something like this:
function resetParameters() {
// The names of the parameters to be reset
var parameters = [
'param1',
'param2',
...
];
// Iterate them
parameters.each(function(param) {
// Fire the change to the default value.
// The selects are listening for this and will change
// the selected item accordingly
Dashboards.fireChange(param, '%');
});
}
<button onclick="resetParameters()">Reset</button>
I haven't tried but it should do the trick!