注释资金计划表滚动条问题

dev_1.0.0
‘wangjiuyun 2024-11-07 16:53:08 +08:00
parent 281cf72c20
commit 42150fe0a8
2 changed files with 43 additions and 12 deletions

View File

@ -405,6 +405,15 @@ function appendTrBudgetPlan() {
' <td style="display: block;"><button type="button" class="am-btn am-btn-danger am-btn-xs am-round am-modal-line-delete-budget-plan"><span class="am-icon-minus"></span></button></td>\n' +
' </tr>';
$("#budgetPlanDetailTable").append(template);
// let width=0
// $('#budgetPlanDetailTable tr').each(function (){
// width+=$(this).width()
// })
// $("#planTbodyScrollContent").width(width+'px')
// $('#planTbodyScroll').on('scroll',function(){
// let left=$('#planTbodyScroll').scrollLeft()
// $('#budgetPlanDetailTable').scrollLeft(left)
// })
//根据前一条数据拿到月份
bindMonth();
//新增的收入与支出默认为0并更新每一列的数据

View File

@ -102,11 +102,12 @@
display: flex;
flex-direction: column;
}
#tab6 table#budgetPlanDetailTable tbody{
#tab6 table#budgetPlanDetailTable tbody {
padding-top: 15px;
}
#tab6 table#budgetPlanDetailTable tr{
#tab6 table#budgetPlanDetailTable tr {
position: relative;
padding-top: 55px;
}
@ -116,6 +117,19 @@
background: #fff;
top: 0;
}
#planTable{
position: relative;
}
#planTbodyScroll{
position: absolute;
z-index: 100;
right: 0;
top: 0;
display: inline-block;
width: calc(100% - 410px);
overflow-x:scroll;
height: 20px;
}
</style>
@ -809,7 +823,8 @@
</td>
</tr>
<tr class="am-text-nowrap">
<th class="table-title" colspan="1"><span style="color: red;">*</span><span style="font-size: 15px">是否二次合作:</span>
<th class="table-title" colspan="1"><span style="color: red;">*</span><span
style="font-size: 15px">是否二次合作:</span>
</th>
<td class="table-title" colspan="1">
<select data-am-selected="{btnSize: 'sm',btnWidth: '80%',searchBox: 1}"
@ -827,7 +842,8 @@
</#if>
</select>
</td>
<th class="table-title" colspan="1"><span style="color: red;">*</span><span style="font-size: 15px">是否汇智中标:</span>
<th class="table-title" colspan="1"><span style="color: red;">*</span><span
style="font-size: 15px">是否汇智中标:</span>
</th>
<td class="table-title" colspan="3">
<select data-am-selected="{btnSize: 'sm',btnWidth: '80%',searchBox: 1}"
@ -869,7 +885,8 @@
<#-- </td>-->
<#-- </tr>-->
<tr class="am-text-nowrap">
<th class="table-title" colspan="1"><span style="color: red;">*</span><span style="font-size: 15px">计收计划:</span></th>
<th class="table-title" colspan="1"><span style="color: red;">*</span><span
style="font-size: 15px">计收计划:</span></th>
<td class="table-title" colspan="5">
<textarea rows="3" cols="20" id="calculationCollectionBudget"
name="calculationCollectionBudget" maxlength="1000"
@ -1461,7 +1478,7 @@
</div>
<div class="am-tab-panel am-fade am-in" id="tab6">
<div class="am-modal-bd">
<div class="am-modal-bd" id="planTable">
<input type="hidden" id="planStartDate" name="planStartDate" value='${planStartDate!""}'/>
<input type="hidden" id="planEndDate" name="planEndDate" value='${planEndDate!""}'/>
<td width="700px">
@ -1629,7 +1646,8 @@
</tr>
</thead>
<tbody style="display: inline-block;overflow-x: scroll;width: calc(100% - 410px);white-space: nowrap;">
<tbody style="display: inline-block;overflow-x: scroll;width: calc(100% - 410px);white-space: nowrap;"
id="planTbody">
<tr id="firstBlock" class="am-hide" style="display: inline-block;">
<td style="display: block;"><input type="text"
class="am-modal-prompt-input input-total-month-budget-plan"
@ -2274,12 +2292,15 @@
</div>
<!--选项卡tabsend-->
<div class="am-margin">
<div class="am-margin" style="position: relative">
<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">
返回上一级
</button>
<button type="button" class="am-btn am-btn-primary am-btn-xs" id="saveDraft">保存草稿</button>
<button type="button" class="am-btn am-btn-primary am-btn-xs" id="saveApprove">提交审核</button>
<#-- <div id="planTbodyScroll">-->
<#-- <div id="planTbodyScrollContent"></div>-->
<#-- </div>-->
</div>
</form>
</div>
@ -2610,15 +2631,16 @@
let top = $('#tab6').scrollTop()
let left = $('#tab6').scrollLeft()
$('#tab6 table tr td:nth-child(1)').css({'top':top>0?top-70:top,'left':left
$('#tab6 table tr td:nth-child(1)').css({
'top': top > 0 ? top - 70 : top, 'left': left
})
if (top > 0) {
$('#tab6 table#budgetPlanDetailTable tr td:nth-child(1)').css({
'height':'55px'
'height': '55px'
})
} else {
$('#tab6 table#budgetPlanDetailTable tr td:nth-child(1)').css({
'height':'auto'
'height': 'auto'
})
}
})