动态查询

此模板为一键安装导入，不建议手动修改。

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

简单说明

说明：动态查询被smw声明的数据，不受页面模板数量上限限制

安装方法

自动安装：拥有站点管理员权限的同学可以在本页面使用一键安装功能

手动安装：复制以下依赖页面中的内容到相同页面名称的页面中

使用说明

第一步

创建一个筛选列表

第二步

改造筛选列表，此处举例一种书写方式

{|class="wikitable" style="width:100%"
|- data-ask-key="分类:" style="display:none" <!--这一行必须有，data-ask-key="分类:"：在分类：页面下进行查询-->
!width="90"| 分类
|
{{条件项|材料|材料|1}} <!--与表头部分组合，此处填写材料，即可组合为ask的查询条件[[分类:材料]]-->
|- data-ask-key="类型::" 
!width="90"| 类型
|
{{条件项|角色经验素材|角色经验素材}}
{{条件项|角色培养素材|角色培养素材}}
{{条件项|天赋培养素材|天赋培养素材}}
{{条件项|武器突破素材|武器突破素材}}
{{条件项|食材|食材}}
{{条件项|素材|素材}}
{{条件项|蒙德区域特产|蒙德区域特产}}
{{条件项|璃月区域特产|璃月区域特产}}
|- data-ask-key="来源::"
!width="90"| 来源
|
{{条件项|'''普通怪物掉落'''|普通怪物掉落}}
{{条件项|'''BOSS掉落'''|BOSS掉落}}
{{条件项|'''周常BOSS掉落'''|周常BOSS掉落}}
{{条件项|'''秘境获得'''|秘境获得}}
{{条件项|'''合成获得'''|合成获得}}
{{条件项|烹饪加工获得|烹饪加工获得}}
{{条件项|野外采集|野外采集}}
{{条件项|杂货店购买|杂货店购买}}
{{条件项|'''纪念品商店兑换'''|纪念品商店兑换}}
|- data-ask-key="来源::"
!width="90"| 秘境名称
| 
{{条件项|'''忘却之峡'''|忘却之峡}}
{{条件项|'''太山府'''|太山府}}
{{条件项|'''震雷连山密宫'''|震雷连山密宫}}
{{条件项|'''塞西莉亚苗圃'''|塞西莉亚苗圃}}
|- data-ask-key="稀有度::"
!width="90"| 稀有度
| 
{{条件项|type=radio|group=稀有度|1|[[file:1星.png|link=]]}}
{{条件项|type=radio|group=稀有度|2|[[file:2星.png|link=]]}}
{{条件项|type=radio|group=稀有度|3|[[file:3星.png|link=]]}}
{{条件项|type=radio|group=稀有度|4|[[file:4星.png|link=]]}}
{{条件项|type=radio|group=稀有度|5|[[file:5星.png|link=]]}}
|-
|}

<span id="queryDataBtn" class="btn btn-default" href="#" role="button" style="width:calc(100% - 105px);margin-top:4px">查询</span>
<span id="clearParamBtn" class="btn btn-default" href="#" role="button" style="width:100px;margin-top:4px;color:#db6161">重置条件</span>

{{#vardefine:gridHeader|
{ {{!}}id="CardSelectTr" class="CardSelect wikitable sortable" style="width:100%;text-align:center"
{{!}}-id="CardSelectTabHeader"
! style="width:10%" {{!}}
! style="width:12%" {{!}} 名称
! style="width:8%" {{!}} 稀有度
! style="width:10%" {{!}} 类型
! class="visible-md visible-sm visible-lg" style="width:25%" {{!}} 来源
! class="visible-md visible-sm visible-lg" style="width:30%" {{!}} 用处
{{!}}-
}}

{{#widget:数据查询
|btnid=queryDataBtn
|header={{#var:gridHeader}}
|defaultSearch=true <!--为空则默认不进行搜索-->
|print=名称,稀有度,类型,来源,介绍,用处
|param=sort:稀有度,template:素材测试/行,headers:hide,format:template,link=none
|limit=10
}}

作者

迦洛翎

+关注

标签

标签：方法

标签：widget

已使用该功能的页面

• 奇迹暖暖衣服查询
• M2神甲奇兵装备查询
• 原神沙盒3

依赖页面

• 模板:条件项
• widget:数据查询

<li class="btn btn-default queryParams " href="#" role="button" data-conditions="" ></li>

<style> li.btn.queryParams.selected { color: #333 !important; background-color: #e6e6e6; border-color: #adadad; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } </style> <div style="float:left;line-height: 44px;"> 查询到结果 <span id="queryCount">0</span> 个，每页显示 <span id="queryLimit">0</span> 个</div> <nav style="text-align:right;" aria-label="Page navigation"> <ul class="pagination"> <li class="gridFirstPageBtn" data-page="0"> « </li> <li class="gridPageBtn">1</li> <li class="gridPageBtn">2</li> <li class="gridPageBtn">3</li> <li class="gridPageBtn">4</li> <li class="gridPageBtn">5</li> <li class="gridLastPageBtn" data-page="-1"> » </li> </ul> </nav> <div id="queryDataGrid" style="margin-top:10px"></div> <nav style="text-align:right;" aria-label="Page navigation"> <ul class="pagination"> <li class="gridFirstPageBtn" data-page="0"> « </li> <li class="gridPageBtn">1</li> <li class="gridPageBtn">2</li> <li class="gridPageBtn">3</li> <li class="gridPageBtn">4</li> <li class="gridPageBtn">5</li> <li class="gridLastPageBtn" data-page="-1"> » </li> </ul> </nav> <script type="text/javascript"> var submitBtnId = ""; var tableHeader = ("").replace("{ |", "{|"); var tableFooter = "" || '\n|}'; var defaultSearch = ""; var conditions = ""; var printColumn = paramsFormmatter("", "|?"); var parameters = paramsFormmatter(("").replace(/:/g, "="), "|"); var limit = ; var count = 0; var $ready = function (){ bindClickEvents(); } function bindClickEvents(){ $("body").on("click", ".btn.queryParams", function(){ var isSelected = $(this).hasClass("selected"); if(!isSelected && $(this).data("type") === "radio") { $("[data-group='"+$(this).data("group")+"']").removeClass("selected"); } $(this)[isSelected?"removeClass":"addClass"]("selected"); }).on("click", "#" + submitBtnId, function(){ queryData() }).on("click", "#clearParamBtn", function(){ $(".selected").removeClass("selected") }).on("click", ".gridPageBtn, .gridFirstPageBtn, .gridLastPageBtn", function(){ if($(this).hasClass("hide") || $(this).hasClass("active")) return false; var page = $(this).attr("data-page") || $(this).text(); getPageData(limit, refreshPager(count, limit, page)); }) if(defaultSearch === "true" || defaultSearch === "1") queryData() } function queryData(){ conditions = getQueryParams(); $.getJSON( mw.util.wikiScript( 'api'), { format: 'json', action: 'parse', text: '{'+'{#ask:'+conditions +'|format=count}}', contentmodel: 'wikitext' }).done( function ( data ) { count = parseInt($(data.parse.text["*"]).text()); $("#queryCount").text(count); $("#queryLimit").text(limit); refreshPager(count, limit, 1); getPageData(limit, 1); }); } function getPageData(limit, page){ limit = Number(limit); page = Number(page); var parametersTemp = parameters + "|limit=" + limit + "|offset=" + (page-1) * limit; var queryText = tableHeader + '{'+'{#ask:' + conditions + printColumn + parametersTemp + '}}' + tableFooter; $.getJSON( mw.util.wikiScript( 'api'), { format: 'json', action: 'parse', text: queryText, contentmodel: 'wikitext' }).done( function ( data ) { $("#queryDataGrid").html(data.parse.text["*"]); $(".sortable").tablesorter(); }); } function refreshPager(count, limit, page){ var sumPage = Math.min(Math.ceil(Number(count)/Number(limit))); page = Number(page); page = page === 0 ? 1 : page; page = page < 0 ? sumPage : page; var pageStart = Math.max(1, page-2); var pageEnd = Math.min(Math.ceil(count/limit), pageStart + 4); pageStart = pageEnd <= 5 ? 1 : pageStart; var $a = $("<a>").attr({href:"javascript:void(0);"}); var btnArray = []; for(var i = pageStart; i <= pageEnd; i++){ btnArray.push($("<li>").attr({class:"gridPageBtn" + (page === i?" active":"")}).append($a.clone().text(i))); } $(".gridPageBtn").remove(); $(".pagination li:first-child").after(btnArray); $(".gridFirstPageBtn")[page === 1?"addClass":"removeClass"]("hide"); $(".gridLastPageBtn")[page === sumPage || pageEnd === 1?"addClass":"removeClass"]("hide"); document.body.scrollTop = $("#queryDataGrid").offset().top - 100; return page; } function getQueryParams(){ var conditions = {}, query = [], str = ""; $(".btn.queryParams.selected").each(function(){ var key = $(this).parents("tr").attr("data-ask-key"); if(key === "") { str += $(this).attr("data-conditions"); return true} if(conditions[key] === undefined) conditions[key] = []; conditions[key].push($(this).attr("data-conditions")); }) $.each(conditions, function(key, valArr){ query.push("["+"[" + key + valArr.join("||") + "]"+"]") }); return query.join("") + str; } function paramsFormmatter(param, connector){ return ("," + param).split(",").join(connector); } </script> <script>(function () { var t = function () { window.jQuery && window.mw ? $ready() : window.setTimeout(t, 100); }; t(); })();</script>

更新日志

• 1.1
• 1.2 补充选项可配置为单选限制