You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

129 lines
4.0 KiB

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: 10295
Date: 2018/5/23
Time: 0:31
To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="utf-8" %>
<html>
<head>
<style>
.gold {
background: gold;
color: black;
margin-right: 5px;
}
</style>
<script id="form_tmpl" type="text/x-jquery-tmpl">
<div class="jumbotron text-center">
<div class="h1">{{= title}}</div>
<div class="col-auto">
{{each data}}
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle gold" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
{{= $value.name}}
</button>
<div class="dropdown-menu">
{{each $value.children}}
<a class="dropdown-item" data-type="{{= $value.tid}}">{{= $value.name}}</a>
{{/each}}
</div>
</div>
{{/each}}
</div>
</br>
<div class="input-group justify-content-center">
<div class="h3">筛选条件:</div>
<div id="typeButton" class="input-group-prepend">
</div>
</div>
</br>
<div class="form-row justify-content-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">关键词</div>
</div>
<input type="text" class="form-control" name="title" <c:if test="${!empty command}"> value="${command.title}"</c:if>>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-secondary">查询</button>
</div>
</div>
</div>
</script>
<script id="form_btn_tmpl" type="text/x-jquery-tmpl">
<button type="button" class="btn btn-outline-info" >{{= title}}<i class="fas fa-times" data-type="{{= type}}"></i></button>
</script>
<script id="form_input_tmpl" type="text/x-jquery-tmpl">
<input type="hidden" name="typeIds" id="type{{= value}}" value="{{= value}}"/>
</script>
<script>
$(function () {
regionJson =${regionJson};
$("#form_tmpl").tmpl({'title': '弹幕查询', 'data': regionJson}).appendTo('#queryDiv');
$(".dropdown-item").click(function () {
$("#form_btn_tmpl").tmpl({'title': $(this).text(),'type':$(this).data("type")}).appendTo("#typeButton");
$(this).hide();
$("#form_input_tmpl").tmpl({
'value': $(this).data("type"),
'index': $("input[id^=type]").length
}).prependTo("#queryDiv");
});
<c:if test="${!empty command&&!empty command.typeIds}">
<c:forEach items="${command.typeIds}" var="typeId">
$('.dropdown-item[data-type=${typeId}]').click();
</c:forEach>
</c:if>
$('.input-group-prepend').on('click', 'i', function () {
$(this).parent().remove();
$("#type" + $(this).data("type")).remove();
$(".dropdown-item[data-type="+$(this).data("type")+"]").show();
});
$(".btn-secondary").click(function () {
$("#pageForm").attr("action","/data/table?currentPage="+($(this).val()==''?0:$(this).val())+"&pageSize=${datas.pageSize}").submit();
});
});
</script>
</head>
<body>
<div id="queryDiv">
</div>
</body>
</html>