动态查询JS版

起源

随着BWIKI中数据量的不断增加，部分站内的ask最大查询结果已经超出1000个限制，无法一次性列出所有结果。同时为了方便用户自定义查询条件，点神创造了Widget版动态查询。依照点神的指引，在此魔改为JS版，并整合部分组件至模板:动态查询内，以便简化编写页面时的代码量。

引入

任选其一。

搬运tools中的MediaWiki:Dquery.js到您的BWIKI站点。(手动更新)
```
{{JS|Dquery.js}}
```
或
```
{{ResourceLoader|Dquery.js}}
```
已经安装实验室框架-Bikit插件的可以直接引入tools站点的js文件。（随tools站自动更新）
```
<div class="bikit-loader" data-site="tools" data-src="MediaWiki:Dquery.js" data-mime="text/javascript"></div>
```

由于JS文件可能需要配合模板:动态查询使用，如果出现问题，请同步更新或反馈。

模板

为了方便简化代码编写，整合各类组件到模板:动态查询中。如您不需要使用模板或要高级自定义，可自行编写相对应的代码。

搬运

手动搬运模板:动态查询到您的wiki中。

原理

按照点神原版的逻辑，获取各个组件的值，拼接成ask解析条件，再去api中获取内容。所以您必须清楚了解ask函数的使用方法。参照：SMW

组件

组件总览

对应ask函数代码	作用	参数1	参数2	参数3	参数4	参数5	类别	计数	备注
[[分类:xxx]] [[属性::xxx]]	单选按钮	单选	分类或属性名	可选项目组（中文、顿号分割）	预设选定的项目组（中文、顿号分割）	隐藏	隐藏	是
[[分类:xxx]] [[属性::xxx]]	多选按钮	多选	分类或属性名	可选项目组（中文、顿号分割）	预设选定的项目组（中文、顿号分割）	隐藏	隐藏	是
[[分类:xxx]] [[属性::xxx]]	单选按钮组	单选组	分类或属性名	可选项目组（中文、顿号分割）	预设选定的项目组（中文、顿号分割）	隐藏	隐藏	是
[[分类:xxx]] [[属性::xxx]]	多选按钮组	多选组	分类或属性名	可选项目组（中文、顿号分割）	预设选定的项目组（中文、顿号分割）	隐藏	隐藏	是
[[分类:xxx]] [[属性::xxx]]	输入框	输入	分类或属性名	预设输入的内容
[[分类:xxx]] [[属性::xxx]]	下拉菜单	下拉	分类或属性名	可选项目组（中文、顿号分割）	预设选定的项目组（中文、顿号分割）
\|limit=xxx	单次查询数量	限额	预设的数量	可选的数量组（中文、顿号分割）		隐藏或禁用
\|sort=xxx	排序的属性	排序	预设的排序属性名称	可选的排序项目组（中文、顿号分割）（英文,逗号多重排序条件）		隐藏或禁用
\|order=xxx	排序的升降	升降	预设的顺序	可选的顺序（中文升序、降序）		隐藏或禁用
\|?xxx	查询的属性	项目	需要查询的属性（中文、顿号分割）						默认隐藏
\|template=xxx	输出模板	模板	模板名称						默认隐藏
	默认是否查询	默认	查询						可选
	分页按钮	分页							结果数量多时必选
	统计信息	统计							基本必选
	清空按钮	清空	展示的文字						可选
	查询按钮	查询	展示的文字						必选
	结果展示	结果							必选

可根据自己需求自由组合排版组件，了解运行逻辑后不是所有组件项目都必须照抄，有些可以不用写，也可以自己手搓其他组件和样式。

单选按钮

代码：

{{动态查询|单选|分类|分类1、分类2、分类3|分类2|类别=隐藏}}

示例：

分类1

分类2

分类3

参数（红色为固定字符内容）：

顺序参数1 单选
顺序参数2 分类或属性名
顺序参数3 可选项目组（中文顿号、分割）
顺序参数4 隐藏（默认查询分类或参数又不想给用户选择时填"隐藏"，比如[[分类:英雄]]）
类别= 隐藏（用于隐藏左侧第一个灰色分类或者属性名）
计数= 是（右上角展示对应数量）
自撸代码时，data-type="Category"代表分类，data-type="Property"代表属性，data-conditions="xxx"代表对应值。

多选按钮

代码：

{{动态查询|多选|分类|分类1、分类2、分类3|分类2}}

示例：

属性

属性1

属性2

属性3

参数（红色为固定字符内容）：

顺序参数1 单选
顺序参数2 分类或属性名
顺序参数3 可选项目组（中文顿号、分割）
顺序参数4 隐藏（默认查询分类或参数又不想给用户选择时填"隐藏"，比如[[分类:英雄]]）
类别= 隐藏（用于隐藏左侧第一个灰色分类或者属性名）
计数= 是（右上角展示对应数量）
自撸代码时，data-type="Category"代表分类，data-type="Property"代表属性，data-conditions="xxx"代表对应值。

单选按钮组

代码：

{{动态查询|单选组|解析函数|If、Ifeq、Iferror、Ifexist、Ifexpr|Ifexist|计数=是}}

示例：

解析函数

If⁽⁰⁾

Ifeq⁽⁰⁾

Iferror⁽⁰⁾

Ifexist⁽⁰⁾

Ifexpr⁽⁰⁾

参数（红色为固定字符内容）：

顺序参数1 单选
顺序参数2 分类或属性名
顺序参数3 可选项目组（中文顿号、分割）
顺序参数4 隐藏（默认查询分类或参数又不想给用户选择时填"隐藏"，比如[[分类:英雄]]）
类别= 隐藏（用于隐藏左侧第一个灰色分类或者属性名）
计数= 是（右上角展示对应数量）
项目数量过多时，按钮组换行会导致首尾两个按钮左右圆角，不美观，可以选用单个按钮非组排列或者写CSS重新改一下首尾样式。
自撸代码时，data-type="Category"代表分类，data-type="Property"代表属性，data-conditions="xxx"代表对应值。

多选按钮组

代码：

{{动态查询|多选组|神|点点、马老师、Lu2333|点点、马老师、Lu2333}}

示例：

神

点点

马老师

Lu2333

参数（红色为固定字符内容）：

顺序参数1 单选
顺序参数2 分类或属性名
顺序参数3 可选项目组（中文顿号、分割）
顺序参数4 隐藏（默认查询分类或参数又不想给用户选择时填"隐藏"，比如[[分类:英雄]]）
类别= 隐藏（用于隐藏左侧第一个灰色分类或者属性名）
计数= 是（右上角展示对应数量）
项目数量过多时，按钮组换行会导致首尾两个按钮左右圆角，不美观，可以选用单个按钮非组排列或者写CSS重新改一下首尾样式。
自撸代码时，data-type="Category"代表分类，data-type="Property"代表属性，data-conditions="xxx"代表对应值。

输入框

代码：

{{动态查询|输入|英雄名|芙蕾雅}}

示例：

英雄名

芙蕾雅

参数（红色为固定字符内容）：

顺序参数1 输入
顺序参数2 分类或属性名
顺序参数3 预设输入的内容
自撸代码时，data-type="Category"代表分类，data-type="Property"代表属性，~~data-conditions="xxx"~~ 输入框内容代表对应值。

限额

代码：

{{动态查询|限额|100|100、50、10}}

示例：

每页

条

参数（红色为固定字符内容）：

顺序参数1 限额
顺序参数2 预设的每次查询数量
顺序参数3 可选查询数量组（中文顿号、分割）
顺序参数4 隐藏或禁用（管理员设定每次查询数量但不想给用户看见时用“隐藏”，给看不给选时用“禁用”，不写该组件默认200）
自撸代码时，查询data-type="limit"属性下.DQselectd元素的text()。

排序

代码：

{{动态查询|排序|创建日期|名称、创建日期、攻击}}

示例：

排序

参数（红色为固定字符内容）：

顺序参数1 排序
顺序参数2 预设的排序名
顺序参数3 可选排序名组（中文顿号、分割，多重排序选项用英文逗号,分割）
顺序参数4 隐藏或禁用（管理员设定排序名但不想给用户看见时用“隐藏”，给看不给选时用“禁用”，不写该组件随机排）
自撸代码时，查询data-type="sort"属性下.DQselectd元素的text()。

升降

代码：

{{动态查询|升降|升序|升序、降序、升序,随机}}

示例：

升降

参数（红色为固定字符内容）：

顺序参数1 升降
顺序参数2 预设的顺序
顺序参数3 可选排序名组（升序、降序、随机，不写该组件默认为升序asc），多属性排序（对应3.3.11项目）时用英文逗号,分割
自撸代码时，查询data-type="order"属性下.DQselectd元素的text()。

模板

代码：

{{动态查询|模板|英雄图鉴/行}}

示例：

参数（红色为固定字符内容）：

顺序参数1 模板
顺序参数2 模板名称（查询结果用该模板展示，对应ask函数中的|template=英雄图鉴/行，默认隐藏，必选）
自撸代码时，#queryTemplate元素的text()。

项目

代码：

{{动态查询|项目|攻击、防御、智力、魔防}}

示例：

参数（红色为固定字符内容）：

顺序参数1 项目
顺序参数2 查询属性项目（用中文顿号、分割，对应ask函数中的|?攻击|?防御|?智力|?魔防，模板中有对应参数时必须写）
自撸代码时，#queryProperty元素的text()。

默认

代码：

{{动态查询|默认|不查}}

示例：

参数（红色为固定字符内容）：

顺序参数1 默认
顺序参数2 true或1或查询（填写后用户打开页面自动查询预设内容，不填或填其他则需要用户手动点击查询）
自撸代码时，#defaultSearch元素的text()。

结果

代码：

{{动态查询|结果}}

示例：

参数（红色为固定字符内容）：

顺序参数1 结果（用于插入查询结果，必选，否则查询结果无法输出到页面）
自撸代码时，查询结果插入到#queryDataGrid元素中。

查询

代码：

{{动态查询|查询|给我查}}

示例：

⚠ JS文件加载错误，请刷新页面。

参数（红色为固定字符内容）：

顺序参数1 查询
顺序参数2 按钮上展示的文字。
自撸代码时，点击#queryData元素执行查询。

清空

代码：

{{动态查询|清空|都不要}}

示例：

都不要

参数（红色为固定字符内容）：

顺序参数1 清空
顺序参数2 按钮上展示的文字。
自撸代码时，点击#clearConditions元素执行清空。（清空所有未隐藏的查询条件，包含预设的条件）

注意

计数

模板中的计数仅展示统计当前分类或属性条件下的总数。比如{{动态查询|单选|稀有度|SSR、SR、R|计数=是}}，这时SSR的计数统计是所有[[稀有度::SSR]]的数量，会包含如英雄、武器、防具中所有将稀有度set成SSR的总数。如果想要正确显示仅统计分类为英雄、稀有度为SSR的数量，则可以不使用本模板，直接写相同作用的如下代码。

<div class="DQbtn Single" data-type="Property" data-property="稀有度">
<div class="btn btn-default" data-conditions="SSR" data-toggle="button">SSR{{#tag:sup|({{#ask:[[分类:英雄]][[稀有度::SSR]]|format=count}})}}</div>
<div class="btn btn-default" data-conditions="SR" data-toggle="button">SR{{#tag:sup|({{#ask:[[分类:英雄]][[稀有度::SR]]|format=count}})}}</div>
<div class="btn btn-default" data-conditions="R" data-toggle="button">R{{#tag:sup|({{#ask:[[分类:英雄]][[稀有度::R]]|format=count}})}}</div>
</div>

图标

同样，如果您需要自定义显示内容，比如不需要计数但是文字前加上图标显示，则可以直接写类似如下的代码（按需修改）。

<div class="DQbtn Single" data-type="Property" data-property="稀有度">
<div class="btn btn-default" data-conditions="SSR" data-toggle="button">[[文件:图标 SSR.png|20px|link=]]SSR</div>
<div class="btn btn-default" data-conditions="SR" data-toggle="button">[[文件:图标 SR.png|20px|link=]]SR</div>
<div class="btn btn-default" data-conditions="R" data-toggle="button">[[文件:图标 R.png|20px|link=]]R</div>
</div>

示例

江南百景图WIKI —— 建筑查询： https://wiki.biligame.com/jiangnan/?curid=7673

代号鸢WIKI —— 道具筛选：https://wiki.biligame.com/yuan/?curid=17892

动态查询JS版

WIKI功能

目录

起源

引入

模板

搬运

原理

组件

组件总览

单选按钮

多选按钮

单选按钮组

多选按钮组

输入框

限额

排序

升降

模板

项目

默认

结果

查询

清空

注意

计数

图标

示例