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

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' + ' <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>'; ' </tr>';
$("#budgetPlanDetailTable").append(template); $("#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(); bindMonth();
//新增的收入与支出默认为0并更新每一列的数据 //新增的收入与支出默认为0并更新每一列的数据

View File

@ -102,11 +102,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#tab6 table#budgetPlanDetailTable tbody{
#tab6 table#budgetPlanDetailTable tbody {
padding-top: 15px; padding-top: 15px;
} }
#tab6 table#budgetPlanDetailTable tr{ #tab6 table#budgetPlanDetailTable tr {
position: relative; position: relative;
padding-top: 55px; padding-top: 55px;
} }
@ -116,6 +117,19 @@
background: #fff; background: #fff;
top: 0; 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> </style>
@ -809,7 +823,8 @@
</td> </td>
</tr> </tr>
<tr class="am-text-nowrap"> <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> </th>
<td class="table-title" colspan="1"> <td class="table-title" colspan="1">
<select data-am-selected="{btnSize: 'sm',btnWidth: '80%',searchBox: 1}" <select data-am-selected="{btnSize: 'sm',btnWidth: '80%',searchBox: 1}"
@ -827,7 +842,8 @@
</#if> </#if>
</select> </select>
</td> </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> </th>
<td class="table-title" colspan="3"> <td class="table-title" colspan="3">
<select data-am-selected="{btnSize: 'sm',btnWidth: '80%',searchBox: 1}" <select data-am-selected="{btnSize: 'sm',btnWidth: '80%',searchBox: 1}"
@ -869,7 +885,8 @@
<#-- </td>--> <#-- </td>-->
<#-- </tr>--> <#-- </tr>-->
<tr class="am-text-nowrap"> <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"> <td class="table-title" colspan="5">
<textarea rows="3" cols="20" id="calculationCollectionBudget" <textarea rows="3" cols="20" id="calculationCollectionBudget"
name="calculationCollectionBudget" maxlength="1000" name="calculationCollectionBudget" maxlength="1000"
@ -1461,7 +1478,7 @@
</div> </div>
<div class="am-tab-panel am-fade am-in" id="tab6"> <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="planStartDate" name="planStartDate" value='${planStartDate!""}'/>
<input type="hidden" id="planEndDate" name="planEndDate" value='${planEndDate!""}'/> <input type="hidden" id="planEndDate" name="planEndDate" value='${planEndDate!""}'/>
<td width="700px"> <td width="700px">
@ -1629,7 +1646,8 @@
</tr> </tr>
</thead> </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;"> <tr id="firstBlock" class="am-hide" style="display: inline-block;">
<td style="display: block;"><input type="text" <td style="display: block;"><input type="text"
class="am-modal-prompt-input input-total-month-budget-plan" class="am-modal-prompt-input input-total-month-budget-plan"
@ -2274,12 +2292,15 @@
</div> </div>
<!--选项卡tabsend--> <!--选项卡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 type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">
返回上一级 返回上一级
</button> </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="saveDraft">保存草稿</button>
<button type="button" class="am-btn am-btn-primary am-btn-xs" id="saveApprove">提交审核</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> </div>
</form> </form>
</div> </div>
@ -2610,15 +2631,16 @@
let top = $('#tab6').scrollTop() let top = $('#tab6').scrollTop()
let left = $('#tab6').scrollLeft() 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) { if (top > 0) {
$('#tab6 table#budgetPlanDetailTable tr td:nth-child(1)').css({ $('#tab6 table#budgetPlanDetailTable tr td:nth-child(1)').css({
'height':'55px' 'height': '55px'
}) })
} else { } else {
$('#tab6 table#budgetPlanDetailTable tr td:nth-child(1)').css({ $('#tab6 table#budgetPlanDetailTable tr td:nth-child(1)').css({
'height':'auto' 'height': 'auto'
}) })
} }
}) })