mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-03 07:03:33 +02:00
3
1.14 Popup filters
koalyptus edited this page 2017-05-31 21:10:57 +10:00
Generates a filter icon placed in the column header toggling a popup filter when clicked.
| Property | Type | Description | Remarks | Example |
|---|---|---|---|---|
| popup_filters | boolean|object | enables / disables popup filters type, filters will popup when a filter icon placed near the column header is clicked (default - false) |
var tfConfig = { popup_filters: true };
// or
var tfConfig = {
popup_filters: {}
};
|
|
| close_on_filtering | boolean | closes active popup filter upon filtering (default - true) | Multiple selection filter types will remain open to allow user to choose other options upon filtering |
var tfConfig = {
popup_filters: {
close_on_filtering: false
}
};
|
| image | string | sets the path to the filter icon placed in the header. It toggles the popup filter for that column (default - 'style/themes/icn_filter.gif') |
var tfConfig = {
popup_filters: {
image: 'myDir/my_filterIcon.png'
}
};
|
|
| image_active | string | sets the path to the filter icon when active (default - 'style/themes/icn_filterActive.gif') |
var tfConfig = {
popup_filters: {
image_active: 'myDir/my_filterIconActive.png'
}
};
|
|
| image_html | string | sets the HTML of the filter icon placed in the header (default - '<img src="'+ this.popUpImgFlt +'" alt="Column filter" />') | Note that the onclick event is added automatically to the html element and overwrites any onclick attribute |
var tfConfig = {
popup_filters: {
image_html: '
|
| placeholder_css_class | string | defines the css class for the container of the popup element (default - 'popUpPlaceholder') |
var tfConfig = {
popup_filters: {
placeholder_css_class: 'myCssClass'
}
};
|
|
| div_css_class | string | defines the css class for the popup element containing the column filter (default - 'popUpFilter') |
var tfConfig = {
popup_filters: {
popup_div_css_class: 'myCssClass'
}
};
|
|
| adjust_to_container | boolean | ensures filter's popup container element width matches column width (default - true) |
var tfConfig = {
popup_filters: {
adjust_to_container: false
}
};
|
|
| on_before_popup_filter_open | function | callback fired before the popup filter is opened (default - null) | Note that 3 parameters are sent to callback function:
|
var tfConfig = {
popup_filters: {
on_before_popup_filter_open: function(tf, popupElm, colIndex) {
console.log(tf, popupElm, colIndex);
}
}
};
|
| on_after_popup_filter_open | function | callback fired after the popup filter is opened (default - null) | Note that 3 parameters are sent to callback function:
|
var tfConfig = {
popup_filters: {
on_after_popup_filter_open: function(tf, popupElm, colIndex) {
console.log(tf, popupElm, colIndex);
}
}
};
|
| on_before_popup_filter_close | function | callback fired before the popup filter is closed (default - null) | Note that 3 parameters are sent to callback function:
|
var tfConfig = {
popup_filters: {
on_before_popup_filter_close: function(tf, popupElm, colIndex) {
console.log(tf, popupElm, colIndex);
}
}
};
|
| on_after_popup_filter_close | function | callback fired after the popup filter is closed (default - null) | Note that 3 parameters are sent to callback function:
|
var tfConfig = {
popup_filters: {
on_after_popup_filter_close: function(tf, popupElm, colIndex) {
console.log(tf, popupElm, colIndex);
}
}
};
|
'
}
};