全站通知:
模板:表格数据筛器
刷
历
编
跳到导航
跳到搜索
丨前言
- 本模板来源烟雨江湖bwiki
- 本零件可以为表格列增加筛选功能
- 注意:带有
rowspan
或colspan
的表格可能导致筛选结果出错。
丨使用方法
- 安装本零件,等待缓存刷新。
- 为需要进行数据筛选的表格添加样式类
filterable
,然后在需要筛选的列头上添加样式类filterable-head
。 - 页面在显示表格时会在列头末尾加上浅色的 图标。
- 点击图标即可打开筛选菜单。
丨相关说明
- 筛选器未生效时(没有输入任何筛选字段且筛选项目为全选状态)图标为灰色,生效时图标为黑色。
- 筛选字段与全体筛选项目之前为与关系(即只有同时符合这两种筛选条件的行才会保留)。筛选项目之间为或关系(即只要符合其中一个筛选项目的行就会保留)。
- 筛选的依据是单元格的内的文本内容(如果单元格中只有图片,那这个单元格很可能会被判定为空)。
- 筛选操作有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