全站通知：

动态查询

刷 历
编

阅读

    

2023-02-07更新

    

最新编辑:六号技师麻某

阅读：

  

更新日期：2023-02-07

  

最新编辑：六号技师麻某

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real
迦洛翎
麻老五
丨简单说明
  • 动态查询被smw声明的数据，不受页面模板数量上限限制。
丨使用说明

第一步

在需要使用的wiki上创建widget:数据查询页面,并复制如下代码到该页面上. 

<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">
      <a href="#">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="gridPageBtn"><a href="javascript:void(0);">1</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">2</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">3</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">4</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">5</a></li>
    <li class="gridLastPageBtn" data-page="-1">
      <a href="#">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </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">
      <a href="#">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="gridPageBtn"><a href="javascript:void(0);">1</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">2</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">3</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">4</a></li>
    <li class="gridPageBtn"><a href="javascript:void(0);">5</a></li>
    <li class="gridLastPageBtn" data-page="-1">
      <a href="#">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
<script type="text/javascript">
var submitBtnId = "<!--{$btnid|escape:'javascript'}-->";
var tableHeader = ("<!--{$header|escape:'javascript'}-->").replace("{ |", "{|");
var tableFooter = "<!--{$footer|escape:'javascript'}-->" || '\n|}';
var defaultSearch = "<!--{$defaultSearch|escape:'javascript'}-->";
var conditions  = "";
var printColumn = paramsFormmatter("<!--{$print|escape:'javascript'}-->", "|?");
var parameters =  paramsFormmatter(("<!--{$param|escape:'javascript'}-->").replace(/:/g, "="), "|");
var limit = <!--{$limit|escape:'javascript'}-->;
var count = 0;
var $ready = function (){
	bindClickEvents();
}

function bindClickEvents(){
	$("body").on("click", ".btn.queryParams", function(){
		var isSelected = $(this).hasClass("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>

第二步

创建一个筛选列表

第三步

改造筛选列表的写法如下 

{|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"| 稀有度
| 
{{条件项|1|[[file:1星.png|link=]]}}
{{条件项|2|[[file:2星.png|link=]]}}
{{条件项|3|[[file:3星.png|link=]]}}
{{条件项|4|[[file:4星.png|link=]]}}
{{条件项|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
}}
丨作者
迦洛翎


丨标签

JAVASCRIPT SMW JQUERY HTML

丨操作页面


丨参考页面


丨更新日志
  • 1.0版本:
  • 1.1版本:
取自“https://wiki.biligame.com/wiki/index.php?title=动态查询&oldid=13145”