修改页面表头固定

master
suhang_max@163.com 2022-10-21 17:30:09 +08:00
parent 25c3eb975b
commit c4925d64eb
3 changed files with 99 additions and 38 deletions

View File

@ -35,7 +35,7 @@
/*border-right: 1px solid #ddd;*/ /*border-right: 1px solid #ddd;*/
/*border-left: 1px solid #ddd;*/ /*border-left: 1px solid #ddd;*/
} }
#printContainer table td { #printContainer table > tr > td {
vertical-align: center; vertical-align: center;
/*border-right: 1px solid #ddd;*/ /*border-right: 1px solid #ddd;*/
/*border-left: 1px solid #ddd;*/ /*border-left: 1px solid #ddd;*/

View File

@ -691,15 +691,19 @@
<button type="button" class="am-btn am-btn-default" onclick="location.href='${base}/project/incomeExport?id=${project.id!}'"> <button type="button" class="am-btn am-btn-default" onclick="location.href='${base}/project/incomeExport?id=${project.id!}'">
<span class="am-icon-archive"></span> 导出 <span class="am-icon-archive"></span> 导出
</button> </button>
<#-- <button type="button" class="am-btn am-btn-default" onclick="printPage('tab31')">-->
<#-- <span class="am-icon-archive"></span> 打印-->
<#-- </button>-->
</div> </div>
</div> </div>
</div> </div>
<!--startprint-->
<table class="am-table am-table-bordered am-table-radius table-main" <table class="am-table am-table-bordered am-table-radius table-main"
style="padding:0;" style="padding:0;"
id="incomeTable"> id="incomeTable">
<tbody> <tbody>
<tr> <tr>
<td width="60px">序号</td> <td>序号</td>
<td>类别</td> <td>类别</td>
<td>名称</td> <td>名称</td>
<td>单位</td> <td>单位</td>
@ -716,7 +720,7 @@
<#list incomeDetails as incomeDetail> <#list incomeDetails as incomeDetail>
<tr> <tr>
<td>${(incomeDetail_index+1)!}</td> <td>${(incomeDetail_index+1)!}</td>
<td width="66px"> <td>
<#--<select style="width: auto" readonly <#--<select style="width: auto" readonly
class="am-modal-prompt-input am-modal-prompt-input-income"> class="am-modal-prompt-input am-modal-prompt-input-income">
<option value="1" <#if incomeDetail.type == 1>selected</#if>>设备类 <option value="1" <#if incomeDetail.type == 1>selected</#if>>设备类
@ -734,30 +738,30 @@
服务类 服务类
</#if> </#if>
</td> </td>
<td width="220px"><input type="text" readonly <td><input type="text" readonly
class="am-modal-prompt-input am-modal-prompt-input-income" class="am-modal-prompt-input am-modal-prompt-input-income"
value="${incomeDetail.name!}"></td> value="${incomeDetail.name!}"></td>
<td width="80px"><input type="text" readonly <td><input type="text" readonly
class="am-modal-prompt-input am-modal-prompt-input-income" class="am-modal-prompt-input am-modal-prompt-input-income"
value="${incomeDetail.unit!}"></td> value="${incomeDetail.unit!}"></td>
<td width="100px"><input type="text" readonly <td><input type="text" readonly
class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-amount" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-amount"
value="${incomeDetail.amount!0}"></td> value="${incomeDetail.amount!0}"></td>
<td width="200px"><input type="text" readonly <td><input type="text" readonly
class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-price" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-price"
value="${Utils.format2(incomeDetail.price,'0.00')}"></td> value="${Utils.format2(incomeDetail.price,'0.00')}"></td>
<td width="100px"> <input type="text" readonly <td> <input type="text" readonly
class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-tax-rate" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-tax-rate"
value="${Utils.format(incomeDetail.taxRate,'0.00')}"></td> value="${Utils.format(incomeDetail.taxRate,'0.00')}"></td>
<td width="200px"><input type="text" <td><input type="text"
class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-include" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-include"
value="${Utils.format(incomeDetail.totalTaxInclude,'0.00')}" value="${Utils.format(incomeDetail.totalTaxInclude,'0.00')}"
readonly></td> readonly></td>
<td width="200px"><input type="text" <td><input type="text"
class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-exclude" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-exclude"
value="${Utils.format(incomeDetail.totalTaxExclude,'0.00')}" value="${Utils.format(incomeDetail.totalTaxExclude,'0.00')}"
readonly></td> readonly></td>
<td width="200px"><input type="text" <td><input type="text"
class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax"
value="${Utils.format(incomeDetail.totalTax,'0.00')}" value="${Utils.format(incomeDetail.totalTax,'0.00')}"
readonly></td> readonly></td>
@ -784,6 +788,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!--endprint-->
</div> </div>
<div class="am-tab-panel am-fade am-in am-scrollable-horizontal" id="tab36"> <div class="am-tab-panel am-fade am-in am-scrollable-horizontal" id="tab36">
<#--<span class="am-text-lg">收入明细表</span>--> <#--<span class="am-text-lg">收入明细表</span>-->
@ -1112,9 +1117,13 @@
<button type="button" class="am-btn am-btn-default" onclick="location.href='${base}/project/budgetPlanExport?id=${project.id!}'"> <button type="button" class="am-btn am-btn-default" onclick="location.href='${base}/project/budgetPlanExport?id=${project.id!}'">
<span class="am-icon-archive"></span> 导出 <span class="am-icon-archive"></span> 导出
</button> </button>
<#-- <button type="button" class="am-btn am-btn-default" onclick="printPage('tab34')">-->
<#-- <span class="am-icon-archive"></span> 打印-->
<#-- </button>-->
</div> </div>
</div> </div>
</div> </div>
<!--startprint-->
<table class="am-table table-main" style="display: block;border-collapse: collapse;width: 1700px;overflow-x: scroll;padding:0;" <table class="am-table table-main" style="display: block;border-collapse: collapse;width: 1700px;overflow-x: scroll;padding:0;"
id="budgetPlanDetailTable"> id="budgetPlanDetailTable">
<thead style="display: inline-block;overflow-x: scroll;width: 200px;"> <thead style="display: inline-block;overflow-x: scroll;width: 200px;">
@ -1254,6 +1263,7 @@
</tbody> </tbody>
</table> </table>
<!--endprint-->
</div> </div>
<#--<span class="am-text-primary"><a style="cursor: pointer" id="income-detail">收入明细表</a></span> <#--<span class="am-text-primary"><a style="cursor: pointer" id="income-detail">收入明细表</a></span>
<span class="am-text-primary"><a style="cursor: pointer" id="cost-detail">采购成本明细表</a></span> <span class="am-text-primary"><a style="cursor: pointer" id="cost-detail">采购成本明细表</a></span>

View File

@ -14,6 +14,57 @@
table-layout:fixed; table-layout:fixed;
word-break:break-all word-break:break-all
} }
/*固定表头的列表*/
.fixed-list {
flex: 1 1 auto;
overflow: hidden;
}
.fixed-list table {
display: block;
width: 100%;
max-height: 100%;
border-spacing: 0px;
border-collapse: collapse;
border: none;
overflow-y: hidden;
overflow-x: auto;
margin: 0;
}
.fixed-list.is-vertical-scroll table tbody {
max-height: calc(100% - 71px);
}
.fixed-list table>thead>tr>th {
height: 40px;
text-align: center;
vertical-align: middle;
}
.fixed-list table td {
height: 55px;
text-align: center;
}
.fixed-list table tbody {
display: block;
width: 100%;
max-height: calc(100% - 45px);
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.fixed-list table tr {
table-layout: fixed;
display: table;
}
.fixed-list table thead tr {
width: calc(100% - 18px);
border-top: 1px solid #ddd;
border-bottom: none;
}
.fixed-list table tbody tr {
width: 100%;
}
</style> </style>
<div class="admin-content"> <div class="admin-content">
<div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;"> <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;">
@ -322,17 +373,17 @@
</div> </div>
</div> </div>
<div class="am-g"> <div class="am-g fixed-list is-vertical-scroll">
<div class="am-u-sm-12"> <div class="am-u-sm-12">
<div class="am-scrollable-horizontal"> <div class="list-content">
<table class="am-table am-table-striped am-table-hover table-main"> <table class="am-table am-table-striped am-table-hover table-main">
<thead> <thead style="display:block;width: 4200px;">
<tr class="am-text-nowrap"> <tr class="am-text-nowrap">
<th class="table-check"> <th width="30px">
<input type="checkbox" id="allCheck"></th> <input type="checkbox" id="allCheck"></th>
<th class="table-title">序号</th> <th class="table-title" width="60px">序号</th>
<th class="table-title">项目编号<i class="am-icon-caret-down" <#if orderTypeStr == "projectNoDown">style="color: red"</#if> onclick="sub_function('projectNoDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "projectNoUp">style="color: red"</#if> onclick="sub_function('projectNoUp')"></i></th> <th class="table-title" width="120px">项目编号<i class="am-icon-caret-down" <#if orderTypeStr == "projectNoDown">style="color: red"</#if> onclick="sub_function('projectNoDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "projectNoUp">style="color: red"</#if> onclick="sub_function('projectNoUp')"></i></th>
<th class="table-title">项目名称<i class="am-icon-caret-down" <#if orderTypeStr == "projectNameDown">style="color: red"</#if> onclick="sub_function('projectNameDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "projectNameUp">style="color: red"</#if> onclick="sub_function('projectNameUp')"></i></th> <th class="table-title" width="240px">项目名称<i class="am-icon-caret-down" <#if orderTypeStr == "projectNameDown">style="color: red"</#if> onclick="sub_function('projectNameDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "projectNameUp">style="color: red"</#if> onclick="sub_function('projectNameUp')"></i></th>
<th class="table-title">项目类型<i class="am-icon-caret-down" <#if orderTypeStr == "projectTypeDown">style="color: red"</#if> onclick="sub_function('projectTypeDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "projectTypeUp">style="color: red"</#if> onclick="sub_function('projectTypeUp')"></i></th> <th class="table-title">项目类型<i class="am-icon-caret-down" <#if orderTypeStr == "projectTypeDown">style="color: red"</#if> onclick="sub_function('projectTypeDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "projectTypeUp">style="color: red"</#if> onclick="sub_function('projectTypeUp')"></i></th>
<th class="table-title">垫资模式<i class="am-icon-caret-down" <#if orderTypeStr == "underModeDown">style="color: red"</#if> onclick="sub_function('underModeDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "underModeUp">style="color: red"</#if> onclick="sub_function('underModeUp')"></i></th> <th class="table-title">垫资模式<i class="am-icon-caret-down" <#if orderTypeStr == "underModeDown">style="color: red"</#if> onclick="sub_function('underModeDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "underModeUp">style="color: red"</#if> onclick="sub_function('underModeUp')"></i></th>
<th class="table-title">垫资利息<i class="am-icon-caret-down" <#if orderTypeStr == "underIntDown">style="color: red"</#if> onclick="sub_function('underIntDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "underIntUp">style="color: red"</#if> onclick="sub_function('underIntUp')"></i></th> <th class="table-title">垫资利息<i class="am-icon-caret-down" <#if orderTypeStr == "underIntDown">style="color: red"</#if> onclick="sub_function('underIntDown')"></i><i class="am-icon-caret-up" <#if orderTypeStr == "underIntUp">style="color: red"</#if> onclick="sub_function('underIntUp')"></i></th>
@ -362,17 +413,17 @@
<th class="table-title">部门名称</th> <th class="table-title">部门名称</th>
<th class="table-title">项目周期</th> <th class="table-title">项目周期</th>
<th class="table-title">最后更新时间</th> <th class="table-title">最后更新时间</th>
<th class="table-title">操作</th> <th class="table-title" width="240px">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody style="display:block;width: 4200px;">
<#list pager.list as list> <#list pager.list as list>
<tr> <tr>
<td> <td width="30px">
<input type="checkbox" name="ids" value="${list.id!}" /></td> <input type="checkbox" name="ids" value="${list.id!}" /></td>
<td>${list.tempId!}</td> <td width="60px">${list.tempId!}</td>
<td class="huanhang">${list.projectNo!}</td> <td class="huanhang" width="120px">${list.projectNo!}</td>
<td class="huanhang"><a style="cursor: pointer;text-decoration:none" onclick="approve(${list.id})">${list.name!}</a></td> <td class="huanhang" width="240px"><a style="cursor: pointer;text-decoration:none" onclick="approve(${list.id})">${list.name!}</a></td>
<td>${list.typeDesc!}</td> <td>${list.typeDesc!}</td>
<td>${list.underwrittenModeStr!}</td> <td>${list.underwrittenModeStr!}</td>
<td>${Utils.format(list.advanceInterestAmount, "0.00")}</td> <td>${Utils.format(list.advanceInterestAmount, "0.00")}</td>
@ -402,7 +453,7 @@
<td>${list.deptName!}</td> <td>${list.deptName!}</td>
<td>${(list.startDate?string("yyyy-MM"))!} ~ ${(list.endDate?string("yyyy-MM"))!}</td> <td>${(list.startDate?string("yyyy-MM"))!} ~ ${(list.endDate?string("yyyy-MM"))!}</td>
<td>${(list.lastUpdateTime?string("yyyy-MM-dd HH:mm:ss"))!}</td> <td>${(list.lastUpdateTime?string("yyyy-MM-dd HH:mm:ss"))!}</td>
<td> <td width="240px">
<div class="am-btn-toolbar"> <div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs"> <div class="am-btn-group am-btn-group-xs">
<#if adminId==1> <#if adminId==1>
@ -539,18 +590,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="am-cf">
<!-- 分页 -->
<#if (pager.list)?exists && (pager.list?size>0) >
<div class="am-fr">
<#include "../common/project_pager.ftl">
</div>
<#else>
<div class="am-kai" align="center">
<h3>没有找到任何记录!</h3>
</div>
</#if>
</div>
</div> </div>
</div> </div>
@ -574,7 +614,18 @@
</div>--> </div>-->
<footer class="admin-content-footer"> <footer class="admin-content-footer">
<hr> <div class="am-cf">
<!-- 分页 -->
<#if (pager.list)?exists && (pager.list?size>0) >
<div class="am-fr">
<#include "../common/project_pager.ftl">
</div>
<#else>
<div class="am-kai" align="center">
<h3>没有找到任何记录!</h3>
</div>
</#if>
</div>
</footer> </footer>
</div> </div>