全站通知:

烟雨江湖:表格数据筛器

来自烟雨江湖WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

本零件可以为表格列增加筛选功能。

注意:带有rowspancolspan的表格可能导致筛选结果出错。

使用方法

  1. 安装本零件,等待缓存刷新。
  2. 为需要进行数据筛选的表格添加样式类filterable,然后在需要筛选的列头上添加样式类filterable-head
  3. 页面在显示表格时会在列头末尾加上浅色的  图标。
  4. 点击图标即可打开筛选菜单。

相关说明

  • 筛选器未生效时(没有输入任何筛选字段且筛选项目为全选状态)图标为灰色,生效时图标为黑色。
  • 筛选字段与全体筛选项目之前为关系(即只有同时符合这两种筛选条件的行才会保留)。筛选项目之间为关系(即只要符合其中一个筛选项目的行就会保留)。
  • 筛选的依据是单元格的内的文本内容(如果单元格中只有图片,那这个单元格很可能会被判定为空)。
  • 筛选操作有0.5秒的缓冲间隔。也就是说,间隔不超过0.5秒的连续操作中只有最后一次的操作结果才会真正执行。这种设定也会让筛选有一个短暂的延迟。

示例

{| class="wikitable filterable"
! id
! class="filterable-head" | first_name
! last_name
! class="filterable-head" | gender
|-
|1||Jessalyn||Corstorphine||Female
|-
|2||Loutitia||Smallman||Female
|-
|3||Collin||Toland||Male
|-
|4||Huberto||Coxall||Male
|-
|5||Nixie||Schober||Female
|-
|6||Saba||Bradberry||Female
|-
|7||Dolores||Duffer||Female
|-
|8||Sinclare||Torregiani||Male
|-
|9||Darci||Atlee||Female
|-
|10||Lorry||Flavelle||Male
|}

上面的代码会产生下面的效果:

id first_name last_name gender
1 Jessalyn Corstorphine Female
2 Loutitia Smallman Female
3 Collin Toland Male
4 Huberto Coxall Male
5 Nixie Schober Female
6 Saba Bradberry Female
7 Dolores Duffer Female
8 Sinclare Torregiani Male
9 Darci Atlee Female
10 Lorry Flavelle Male

移植模板

在管理的wiki下创建以下内容:

  • 在管理的wiki下MediaWiki:Gadgets-definition页面中申明(需管理员权限)
    * Filterable [ResourceLoader|default] | Filterable.js | Filterable.css