deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-04 23:53:15 +02:00
Code Issues Releases Wiki Activity
Page: 1.06 Checklist filter
Pages
1.0 Configuration 1.01 Appearance 1.02 Main features 1.03 Grid layout 1.04 Paging 1.05 Drop down filter 1.06 Checklist filter 1.07 Rows counter 1.08 Loading indicator 1.09 Submit and reset button 1.10 Status bar 1.11 Data types 1.12 Themes 1.13 Help instructions 1.14 Popup filters 1.15 No results message 1.16 Highlight keywords 1.17 State 1.18 Mark active columns 1.19 Toolbar 1.20 Single filter 2.0 TableFilter class 2.1 Public properties 2.2 Public methods 3.0 Extensions 3.1 Advanced grid 3.1 Sort 3.2 Column operations 3.3 Filters visibility 3.4 Columns visibility 4. Filter operators Home Obsolete TODO
12 1.06 Checklist filter
koalyptus edited this page 2019-06-07 22:03:49 +10:00
Table of Contents
Property Type Description Remarks Example
sort_select boolean|array if set true, it will sort the options in all the drop-down filters. As an array it will only sort the filter options of specified columns (default - true) 
var tfConfig = { sort_select: true };
// or
var tfConfig = { sort_select: [1, 3] };
filter_options_sorter object specify the columns implementing a custom sorter sorting the filters options (only `select`, `multiple` and `checklist` filter types) (default - null) It accepts a col and comparer properties, ie: 
filter_options_sorter: {
  col: [1, 5],
  comparer: [
    function(a, b) { 
      // compare function logic here, 
      // return -1, 0 or positive number 
      return 0; 
    },
    function(a, b) { return -1; }
  ]
}

var tfConfig = { 
  col: [0, 3], 
  comparer: [
    function(a, b) { return a - b; },
    function(a, b) { return b - a; }
  ]
}
sort_filter_options_asc array this property sorts a filter options in ascending order based on the column's data type. It accepts an array containing column indexes ([0, 2]) var tfConfig = { sort_filter_options_asc: [1, 2] }
sort_filter_options_desc array this property sorts a filter options in descending order based on the column's data type. It accepts an array containing column indexes ([0, 2]) var tfConfig = { sort_filter_options_desc: [1, 2] }
clear_filter_text string|array sets "Clear" text in drop-down list; (default - 'Clear') var tfConfig = { clear_filter_text: ['Display all', '[Clear]'] }
div_checklist_css_class string defines the css class of div containing the checklist filter (default + 'div_checklist') var tfConfig = { div_checklist_css_class: 'myClass' }
checklist_css_class string defines the css class of the checklist filter itself (default - 'flt_checklist') <ul> tag var tfConfig = { checklist_css_class: 'myClass' }
checklist_item_css_class string defines the css class of a checklist item (default - 'flt_checklist_item') <li> tag var tfConfig = { checklist_item_css_class: 'myClass' }
checklist_selected_item_css_class string defines the css class of a selected checklist item (default - 'flt_checklist_slc_item') var tfConfig = { checklist_selected_item_css_class: 'myClass' }
checklist_item_disabled_css_class string defines the css class of a disabled checklist item (default - 'flt_checklist_item_disabled') var tfConfig = { checklist_item_disabled_css_class: 'myClass' }
activate_checklist_text string text appearing in the checklist filter when load_filters_on_demand property is set true (default - 'Click to load data') var tfConfig = {
load_filters_on_demand: true, activate_checklist_text: "Click to activate filter" }
enable_checklist_reset_filter boolean if set false the 1st option is removed (default - true) var tfConfig = { enable_checklist_reset_filter: false }
enable_empty_option boolean if set true, it will add the empty criteria option to drop-down filters (default - false) var tfConfig = { enable_empty_option: true }
empty_text string defines the text for the empty criteria option (default * '(Empty)') var tfConfig = { empty_text: '<Empty values>' }
enable_non_empty_option boolean if set true, it will add the non-empty criteria option to drop-down filters (default - false) var tfConfig = { enable_non_empty_option: true }
non_empty_text string defines the text for the non-empty criteria option (default - '(Non empty)') var tfConfig = { non_empty_text: '<Non-empty values>' }

Events

Assuming TableFilter is already instanciated: 

var tf = new TableFilter('my-table-id');
Event Description Remarks Example
before-populating-filter Event emitted just before starting populating a filter Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • colIndex - index of the filter's column
 
	tf.emitter.on(['before-populating-filter'], function(tf, colIndex){ 
	  console.log(tf, colIndex);
	});
after-populating-filter Event emitted when the filter is populated Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • colIndex - index of the filter's column
  • element - filter's DOM element
 
	tf.emitter.on(['after-populating-filter'], function(tf, colIndex, element){ 
	  console.log(tf, colIndex, element);
	});
filter-focus Event emitted when a filter receives focus Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • element - filter's DOM element
 
	tf.emitter.on(['filter-focus'], function(tf, element){ 
	  console.log(tf, element);
	});

Website | Examples | Es6 documentation