操作

Widget

「Filter table」の版間の差分

(ページの作成:「<noinclude>{{TOCright}} == Description == This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows. =…」)
 
編集の要約なし
 
(同じ利用者による、間の2版が非表示)
1行目: 1行目:
<noinclude>{{TOCright}}
<noinclude>
== Description ==
== Description ==
This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows.
This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows.
296行目: 296行目:
// Collect widget inputs
// Collect widget inputs
var table_id = '<!--{$tableid|default:'table1'|escape:javascript}-->';
var table_id = '<!--{$tableid|default:'table1'|escape:javascript}-->';
var filter_classes = '<!--{$filters|default:'pve,wvw,pvp'|escape:javascript}-->';
var filter_classes = '<!--{$filters|default:'aaa,bbb,ccc,ddd,eee'|escape:javascript}-->';
filter_classes = filter_classes.split(',');
filter_classes = filter_classes.split(',');
var mode = '<!--{$mode|default:'and'|escape:javascript}-->';
var mode = '<!--{$mode|default:'and'|escape:javascript}-->';
353行目: 353行目:
fieldset.id = table_id + '-controls';
fieldset.id = table_id + '-controls';
fieldset.className = 'widget';
fieldset.className = 'widget';
var legend = document.createElement('legend');
legend.innerText = 'Table filter options:';
fieldset.appendChild(legend);
var p = document.createElement('p');
p.style['margin-bottom'] = '0.5em';
p.innerText = filter_text;
fieldset.appendChild(p);


var ul = document.createElement('ul');
var ul = document.createElement('ul');
370行目: 359行目:
var button = document.createElement('button');
var button = document.createElement('button');
button.classList.add('filter-table-clear');
button.classList.add('filter-table-clear');
button.innerText = 'Show all';
button.innerText = 'すべて';


ul.appendChild(button);
ul.appendChild(button);

2021年8月29日 (日) 06:47時点における最新版

Description

This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows.

Parameters

tableid
The "id" attribute of the table to target with the widget
filters
A comma separated list of classes to filter for.
Optional: Use a broken-pipe symbol to display a different button text to the underlying value, e.g. value1¦displayname1, value2¦displayname2
Optional: Use wikicode in the button display text, including icons - sorry no commas.
Optional: A value of <br> will instead insert a newline.
Optional: A value of label¦displayname will instead insert a label.
mode
Optional. Defaults to "AND", which uses AND logic to connect filters.
Can be set to "OR" to use OR logic to join the filter buttons with OR logic instead.
Can also be set to "ONLY" logic to only allow one active filter at a time.

Notes

  • This widget should be used via Template:Filter table so that its usage can be tracked.
  • Incompatible with tables with the "collapsible" or "expandable" classes. Use "mw-collapsible" instead.

Example

AND
{| id="table1" class="wikitable"
! Heading one
! Heading two

|- class="filter-row WvW"
| Power wvw
| Precision wvw

|- class="filter-row PvE"
| Power pve
| Precision pve

|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp

|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw

|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}
{{Filter table|tableid=table1|filters=PvE,WvW,PvP|mode=AND}}
Heading one Heading two
Power wvw Precision wvw
Power pve Precision pve
Condition damage pvp Ferocity pvp
Power pve 2 + wvw Precision pve 2 + wvw
Condition damage pvp 2 Ferocity pvp 2

OR
{| id="table2" class="wikitable"
! Heading one
! Heading two

|- class="filter-row WvW"
| Power wvw
| Precision wvw

|- class="filter-row PvE"
| Power pve
| Precision pve

|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp

|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw

|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}
{{Filter table|tableid=table2|filters=PvE,WvW,PvP|mode=OR}}
Heading one Heading two
Power wvw Precision wvw
Power pve Precision pve
Condition damage pvp Ferocity pvp
Power pve 2 + wvw Precision pve 2 + wvw
Condition damage pvp 2 Ferocity pvp 2

ONLY
{| id="table3" class="wikitable"
! Heading one
! Heading two

|- class="filter-row WvW"
| Power wvw
| Precision wvw

|- class="filter-row PvE"
| Power pve
| Precision pve

|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp

|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw

|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}
{{Filter table|tableid=table3|filters=PvE,WvW,PvP|mode=ONLY}}
Heading one Heading two
Power wvw Precision wvw
Power pve Precision pve
Condition damage pvp Ferocity pvp
Power pve 2 + wvw Precision pve 2 + wvw
Condition damage pvp 2 Ferocity pvp 2


「https://music765plus.com/index.php?title=Widget:Filter_table&oldid=18809」から取得