mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-26 09:20:26 +02:00
Updated 1.14 Popup filters (markdown)
parent
44415fea4d
commit
0440719e5b
|
@ -12,71 +12,132 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<th>popup_filters</th>
|
||||
<td>boolean</td>
|
||||
<td>boolean|object</td>
|
||||
<td>enables / disables popup filters type, filters
|
||||
will popup when a filter icon placed near the column header is clicked
|
||||
(default - false)</td>
|
||||
<td></td>
|
||||
<td><code>var tfConfig = { popup_filters: true }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = { popup_filters: true };
|
||||
// or
|
||||
var tfConfig = {
|
||||
popup_filters: {}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>popup_filters_close_on_filtering</th>
|
||||
<th>close_on_filtering</th>
|
||||
<td>boolean</td>
|
||||
<td>closes active popup filter upon filtering (default - true)</td>
|
||||
<td>Multiple selection filter types will remain open to allow user to choose other options upon filtering</td>
|
||||
<td><code>var tfConfig = { popup_filters_close_on_filtering: false };</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
close_on_filtering: false
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>popup_filters_image</th>
|
||||
<th>image</th>
|
||||
<td>string</td>
|
||||
<td>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')</td>
|
||||
<td></td>
|
||||
<td><code>var tfConfig = { popup_filters_image: 'myDir/my_filterIcon.png'
|
||||
}</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
image: 'myDir/my_filterIcon.png'
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>popup_filters_image_active</th>
|
||||
<th>image_active</th>
|
||||
<td>string</td>
|
||||
<td>sets the path to the filter icon when active (default
|
||||
- 'style/themes/icn_filterActive.gif')</td>
|
||||
<td></td>
|
||||
<td><code>var tfConfig = { popup_filters_image_active: 'myDir/my_filterIconActive.png'
|
||||
}</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
image_active: 'myDir/my_filterIconActive.png'
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>popup_filters_image_html</th>
|
||||
<th>image_html</th>
|
||||
<td>string</td>
|
||||
<td>sets the HTML of the filter icon placed in the header
|
||||
(default - '<img src="'+ this.popUpImgFlt +'" alt="Column
|
||||
filter" />') </td>
|
||||
<td>Note that the onclick event is added automatically to the html element and overwrites any onclick attribute</td>
|
||||
<td><code>var tfConfig = { popup_filters_image_html: '<img src="myDir/my_filterIcon.png"
|
||||
alt="Toggle filters"/>' }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
image_html: '<img src="myDir/my_filterIcon.png" alt="Toggle filters"/>'
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>popup_placeholder_css_class</th>
|
||||
<th>placeholder_css_class</th>
|
||||
<td>string</td>
|
||||
<td>defines the css class for the container of the popup element (default
|
||||
- 'popUpPlaceholder')</td>
|
||||
<td></td>
|
||||
<td><code>var tfConfig = { popup_placeholder_css_class: 'myCssClass' }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
placeholder_css_class: 'myCssClass'
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>popup_div_css_class</th>
|
||||
<th>div_css_class</th>
|
||||
<td>string</td>
|
||||
<td>defines the css class for the popup element containing the column filter (default
|
||||
- 'popUpFilter')</td>
|
||||
<td></td>
|
||||
<td><code>var tfConfig = { popup_div_css_class: 'myCssClass' }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
popup_div_css_class: 'myCssClass'
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>popup_filters_adjust_to_container</th>
|
||||
<th>adjust_to_container</th>
|
||||
<td>boolean</td>
|
||||
<td>ensures filter's popup container element width matches column width (default - true)</td>
|
||||
<td></td>
|
||||
<td><code>var tfConfig = { popup_filters_adjust_to_container: false };</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
adjust_to_container: false
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>on_before_popup_filter_open</th>
|
||||
|
@ -85,12 +146,21 @@
|
|||
is opened (default - null)</td>
|
||||
<td><p>Note that 3 parameters are sent to callback function:</p>
|
||||
<ul>
|
||||
<li>o is the current TableFilter instance</li>
|
||||
<li>tf is the current TableFilter instance</li>
|
||||
<li>popupElm is the element containing the filter</li>
|
||||
<li>colIndex is the column index</li>
|
||||
</ul></td>
|
||||
<td><code>var tfConfig = { on_before_popup_filter_open: function(o,popupElm,colIndex){alert(o
|
||||
+' '+ popupElm +' '+ colIndex); } }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
on_before_popup_filter_open: function(tf, popupElm, colIndex) {
|
||||
console.log(tf, popupElm, colIndex);
|
||||
}
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>on_after_popup_filter_open</th>
|
||||
|
@ -99,12 +169,21 @@
|
|||
opened (default - null)</td>
|
||||
<td><p>Note that 3 parameters are sent to callback function:</p>
|
||||
<ul>
|
||||
<li>o is the current TableFilter instance</li>
|
||||
<li>tf is the current TableFilter instance</li>
|
||||
<li>popupElm is the element containing the filter</li>
|
||||
<li>colIndex is the column index</li>
|
||||
</ul></td>
|
||||
<td><code>var tfConfig = { on_after_popup_filter_open: function(o,popupElm,colIndex){alert(o
|
||||
+' '+ popupElm +' '+ colIndex); } }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
on_after_popup_filter_open: function(tf, popupElm, colIndex) {
|
||||
console.log(tf, popupElm, colIndex);
|
||||
}
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>on_before_popup_filter_close</th>
|
||||
|
@ -113,12 +192,21 @@
|
|||
is closed (default - null)</td>
|
||||
<td><p>Note that 3 parameters are sent to callback function:</p>
|
||||
<ul>
|
||||
<li>o is the current TableFilter instance</li>
|
||||
<li>tf is the current TableFilter instance</li>
|
||||
<li>popupElm is the element containing the filter</li>
|
||||
<li>colIndex is the column index</li>
|
||||
</ul></td>
|
||||
<td><code>var tfConfig = { on_before_popup_filter_close: function(o,popupElm,colIndex){alert(o
|
||||
+' '+ popupElm +' '+ colIndex); } }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
on_before_popup_filter_close: function(tf, popupElm, colIndex) {
|
||||
console.log(tf, popupElm, colIndex);
|
||||
}
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>on_after_popup_filter_close</th>
|
||||
|
@ -127,12 +215,21 @@
|
|||
closed (default - null)</td>
|
||||
<td><p>Note that 3 parameters are sent to callback function:</p>
|
||||
<ul>
|
||||
<li>o is the current TableFilter instance</li>
|
||||
<li>tf is the current TableFilter instance</li>
|
||||
<li>popupElm is the element containing the filter</li>
|
||||
<li>colIndex is the column index</li>
|
||||
</ul></td>
|
||||
<td><code>var tfConfig = { on_after_popup_filter_close: function(o,popupElm,colIndex){alert(o
|
||||
+' '+ popupElm +' '+ colIndex); } }</code></td>
|
||||
<td>
|
||||
<pre>
|
||||
var tfConfig = {
|
||||
popup_filters: {
|
||||
on_after_popup_filter_close: function(tf, popupElm, colIndex) {
|
||||
console.log(tf, popupElm, colIndex);
|
||||
}
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
Loading…
Reference in a new issue