列表界面样式修改,搜索框优化

This commit is contained in:
chiguangxu
2018-03-08 11:10:16 +08:00
parent e1c6e8fd92
commit 7493c11679
6 changed files with 262 additions and 70 deletions

View File

@@ -57,6 +57,14 @@ public abstract class BaseEntity<T> implements Serializable {
* 设置为true后强制执行插入语句ID不会自动生成需从手动传入。
*/
protected boolean isNewRecord = false;
/**
* 筛选搜索框展开状态
*/
protected boolean isFilterAction = false;
public BaseEntity() {
@@ -162,6 +170,16 @@ public abstract class BaseEntity<T> implements Serializable {
public String toString() {
return ReflectionToStringBuilder.toString(this);
}
public void setIsFilterAction(boolean isFilterAction) {
this.isFilterAction = isFilterAction;
}
@JsonIgnore
public boolean getIsFilterAction() {
return isFilterAction;
}

View File

@@ -10,67 +10,167 @@
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default" onclick="location='${ctx}/cfg/request/list'"><spring:message code="refresh"></spring:message></button>
<button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/cfg/request/form'"><spring:message code="add"></spring:message></button>
onClick="javascript:window.location='${ctx}/cfg/request/form'">
<i class="fa fa-plus"></i>
<spring:message code="add"></spring:message><spring:message code="requestInfo"></spring:message></button>
</div>
<h3 class="page-title">
<spring:message code="requestInfo"></spring:message>
<small><spring:message code="date_list"/></small>
</h3>
<h5 class="page-header"></h5>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i><spring:message code="date_list"/>
</div>
</div>
<div class="portlet">
<div class="portlet-body">
<div class="row" >
<form:form id="searchForm" modelAttribute="requestInfo" action="${ctx}/cfg/request/list" method="post" class="form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<div class="col-md-12">
<spring:message code="state"/> : <form:select path="isAudit" class="select2">
<form:option value=""><spring:message code="select"></spring:message></form:option>
<form:option value="0"><spring:message code="created"></spring:message></form:option>
<form:option value="1"><spring:message code="approved"></spring:message></form:option>
</form:select>
<form:form id="searchForm" modelAttribute="requestInfo" action="${ctx}/cfg/request/list" method="post" class="form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<select id="seltype">
<option value=""><spring:message code="select"></spring:message></option>
<option value="requestTitle"><spring:message code="title"></spring:message></option>
<option value="requestNumber"><spring:message code="request_number"></spring:message></option>
<option value="requestContent"><spring:message code="content"></spring:message></option>
</select> <input id="intype">
<form:select path="timeType">
<form:option value=""><spring:message code="select"></spring:message></form:option>
<form:option value="requestTime"><spring:message code="request_time"></spring:message></form:option>
<form:option value="createTime"><spring:message code="operate_time"></spring:message></form:option>
</form:select>
<!-- 筛选按钮展开状态-->
<input id="isFilterAction" name="isFilterAction" type="hidden" value="${requestInfo.isFilterAction }"/>
<spring:message code="begin_date"></spring:message> : <input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="<fmt:formatDate value="${requestInfo.beginDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
<spring:message code="end_date"></spring:message> : <input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="<fmt:formatDate value="${requestInfo.endDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
<button type="button" class="btn btn-default btn-sm" onclick="return page()">
<i class="fa fa-edit"></i><spring:message code="search"></spring:message>
</button>
</div>
</form:form>
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left">
<form:select path="isAudit" class="selectpicker select2 input-small" >
<form:option value="">所有状态</form:option>
<form:option value="0"><spring:message code="created"></spring:message></form:option>
<form:option value="1"><spring:message code="approved"></spring:message></form:option>
</form:select>
</div>
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<select id="seltype" class="selectpicker select2 input-small" >
<option value="requestTitle"><spring:message code="title"></spring:message></option>
<option value="requestNumber"><spring:message code="request_number"></spring:message></option>
<option value="requestContent"><spring:message code="content"></spring:message></option>
</select>
</div>
<input id="intype" class="form-control input-medium" placeholder="请输入标题" type="text">
<div class="input-group-btn">
<button class="btn btn-default btn-search" type="button" onclick="page()"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<div class="pull-left">
<button type="button" class="btn btn-default" id="filter-btn"> 筛选 <i class="fa fa-angle-double-down"></i></button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default">
<i class="fa fa-edit"></i> 编辑</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash"></i> 删除</button>
<!-- <button type="button" class="btn btn-default">
<i class="fa fa-download"></i> 导出</button> -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-wrench"></i> 审核
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" onclick="passOpt()"><i class="fa fa-check"></i> 通过</a></li>
<li><a href="javascript:void(0);" onclick="noPassOpt()"><i class="fa fa-remove"></i> 未通过</a></li>
<li><a href="javascript:void(0);" onclick="cancelPassOpt()"><i class="fa fa-undo"></i> 配置取消</a></li>
</ul>
</div>
<a class="btn btn-icon-only btn-default setfields tooltips"
data-container="body" data-placement="top" data-original-title="自定义列字段" href="javascript:;">
<i class="icon-wrench"></i>
</a>
</div>
</div>
<!-- /搜索内容与操作按钮栏-->
<!-- 筛选搜索内容栏默认隐藏-->
<div class="col-md-12 filter-action-select-panle hide" >
<div class="row">
<div class="col-md-6">
<div class="pull-left">
<label>来函时间:</label>
</div>
<div class="pull-left">
<input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.beginDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
<div class="pull-left">
<label>到</label>
</div>
<div class="pull-left">
<input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.endDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
</div>
<div class="col-md-6">
<div class="pull-left">
<label>操作时间:</label>
</div>
<div class="pull-left">
<input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.beginDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
<div class="pull-left">
<label>到</label>
</div>
<div class="pull-left">
<input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.endDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
</div>
</div>
<h5 class="page-header"></h5>
<div class="row">
<div class="pull-left">
<button type="button" class="btn blue" onclick="page()"> <i class="fa fa-search"></i> 搜索 </button>
<button type="button" class="btn btn-default" onclick="reset()"> <i class="fa fa-refresh"></i> 重置 </button>
</div>
</div>
</div>
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<!-- <div class="table-responsive"> -->
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th><input type="checkbox" class="ckboxs"></th>
<th><spring:message code="seq"></spring:message></th>
<th><spring:message code="request_number"></spring:message></th>
<th><spring:message code="request_organization"></spring:message></th>
@@ -87,6 +187,7 @@
<tbody>
<c:forEach items="${page.list}" var="requestInfo">
<tr>
<td><input type="checkbox" class="ckbox"></td>
<td>${requestInfo.id }</td>
<td>${requestInfo.requestNumber }</td>
<td>${requestInfo.requestOrg }</td>
@@ -114,7 +215,7 @@
<td>${requestInfo.requestContent }</td>
<td>${requestInfo.taskName }</td>
<td>
<div class="btn-group btn-xs">
<%-- <div class="btn-group btn-xs">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#"><spring:message code="operation"></spring:message><span class="caret"></span></a>
<ul class="dropdown-menu btn-xs">
<!-- 审核未通过可修改 -->
@@ -122,14 +223,20 @@
<c:when test="${requestInfo.isAudit eq '1'}">
<li><a href="${ctx}/cfg/request/requestCancelExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="cancel"></spring:message></a></li>
</c:when>
<c:when test="${requestInfo.isAudit ne '2'}">
<li><a href="${ctx}/cfg/request/requestExamineNo?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="unapproved"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/requestExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="approved"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/form?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="edit"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/delete?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="delete"></spring:message></a></li>
</c:when>
<c:otherwise>
<li><a href="${ctx}/cfg/request/requestExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="examine"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/requestExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="approved"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/form?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="edit"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/delete?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="delete"></spring:message></a></li>
</c:otherwise>
</c:choose>
</ul>
</div>
</div> --%>
</td>
</tr>
</c:forEach>
@@ -145,9 +252,26 @@
<script>
$(document).ready(function() {
//筛选功能初始化
filterActionInit();
$("#isAudit").change(function(){
page();
});
$("#seltype").change(function(){
$("#intype").attr("placeholder","请输入"+$(this).find("option:selected").text());
});
});
function reset(){
$("#searchForm").reset();
}
//查询
function page(n,s){
$("#intype").attr("name",$("#seltype").val());
@@ -160,19 +284,6 @@
}
</script>
<style>
.input-medium {
width: 200px !important;
}
.Wdate {
border: #c2cad8 1px solid;
height: 26px;
}
.dropdown-menu {
min-width: 50px;
}
</style>
</body>
</html>

View File

@@ -21531,4 +21531,26 @@ Color library demo
vertical-align: middle; }
.mt-cookie-consent-bar.mt-cookie-consent-bar-light {
background: rgba(238, 238, 238, 0.9);
color: #333; }
color: #333; }
.form-search .pull-left {
float: left !important;
margin-right: 5px;
}
.filter-action-select-panle {
border: 1px solid #c2cad8;
background-color: #f6f3f3;
margin-top: 5px;
padding: 10px;
}
.filter-action-select-panle label{
line-height: 34px;
}

View File

@@ -1,2 +1,2 @@
.Wdate{border:#999 1px solid;height:20px;background:#fff url(datePicker.gif) no-repeat right;}
.Wdate{border:#c2cad8 1px solid;min-height:20px;background:#fff url(datePicker.gif) no-repeat right;}
.WdateFmtErr{font-weight:bold;color:red;}

View File

@@ -1334,9 +1334,9 @@ a.bg-danger:focus {
background-color: #f6b3b8; }
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee; }
/* padding-bottom: 9px;
margin: 40px 0 20px; */
border-bottom: 1px solid #C2CAD8; }
ul,
ol {
@@ -2037,7 +2037,9 @@ th {
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px; }
margin-bottom: 20px;
margin-top: 10px;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
@@ -2058,7 +2060,16 @@ th {
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
background-color: #F5F6FA;
/* background-color: #F5F6FA;
*/
background-color: #3598dc;
color: #F5F6FA;
height: 38px;
line-height: 38px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.table > tbody + tbody {
border-top: 2px solid #e7ecf1; }
@@ -2071,7 +2082,7 @@ th {
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
padding: 5px; }
padding-left:10px; }
.table-bordered {
border: 1px solid #e7ecf1; }

View File

@@ -6,15 +6,14 @@
* @version 2014-4-29
*/
$(document).ready(function() {
try{
// 链接去掉虚框
$("a").bind("focus",function() {
if(this.blur) {this.blur()};
});
//所有下拉框使用select2 - 排除class为noSelect2的<select>元素
$("select:not(.noSelect2)").select2();
//$("select:not(.noSelect2)").select2();
}catch(e){
// blank
@@ -22,10 +21,6 @@ $(document).ready(function() {
});
function getContextPath() {
var pathName = window.location.pathname;
var index = pathName.substring(1).indexOf("/");
@@ -298,3 +293,38 @@ function abbr(name, maxLength){
/*筛选按钮初始化*/
function filterActionInit() {
var isFilterAction = $("#isFilterAction").val();
if(isFilterAction=="true") {
fiterPanleShow();
}else {
fiterPanleHide();
}
$("#filter-btn").click(function(){
if($("#isFilterAction").val()=="true") {
$("#isFilterAction").val("false");
fiterPanleHide();
}else {
$("#isFilterAction").val("true");
fiterPanleShow();
}
});
}
function fiterPanleShow() {
$("#filter-action").find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
$(".btn-search").addClass("hide");
$(".filter-action-select-panle").removeClass("hide");
}
function fiterPanleHide() {
$("#filter-action").find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
$(".btn-search").removeClass("hide");
$(".filter-action-select-panle").addClass("hide");
}