如何滾動鎖定 Django HTML Web 頁

Question

我目前使用的頁面包含內聯列表 forms

但是，當用戶輸入提交每個表單（行）時，它們將被發送回頁面頂部。 這變得非常乏味，因為用戶需要快速輸入數據，而當他們每次添加條目時都需要滾動 2 分鍾時卻不能。

有誰知道如何實現滾動鎖以防止這種情況發生

視圖.py: Function:

class AvonleaView（查看）：

def get(self,request):
    created_nums= AvonleaClass.objects.all().values('unitNumber')

    Aprev = AvonleaClass.objects.all().order_by('-unitDateEntered')
    # created_nums= AvonleaClass.objects.all()
    print(created_nums )

    created_nums =[int(i['unitNumber']) for i in created_nums]
    print(created_nums )

    form = AvonleaForm()
    return render(request,"meter_readings/avonlea.html",{'form':form , 'created_nums':created_nums })

def post(self,request):
    created_nums= AvonleaClass.objects.all().values_list('unitNumber')
    print(created_nums)
    form = AvonleaForm(request.POST)
    if form.is_valid():
        form.save()
        return redirect('Avonlea')
        messages.success(request , 'creates successfully ')
    else:
        return render(request, 'meter_readings/avonlea.html', {'form': form ,  created_nums:created_nums })

HTML 頁面：

{% extends 'meter_readings/base.html' %}

{% block content %}
<!-- CSS only -->


<div class="container" font-size= 8px>
<center><h1>Avonlea Meter Readings</h1></center>
<br>
<head>
  <meta name="viewport" content="width=device-width">
  
</head>
{% for unit_number in form.unitNumber %}
<h6>{{ error }}</h6>


<form class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >
  {% csrf_token %}
  <div class="container">
    <div class="row mb-3">
<div class="col">
  <h5 style="font-size: 14px"> Unit number </h5>
  {{ unit_number.data.value}}
</div>

<input type="hidden" name="unitNumber" value="{{unit_number.data.value}}">

<div class="col" id="prev{{unit_number.data.value}}" >
  <h5 style="font-size: 14px"> Previous Reading </h5>
  {{ previousReading }}
</div>
<div class="col"   id="readings{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Current Reading </h5>
  {{ form.newReading }}
</div>
<div class="col" id="difference{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Units Used </h5>
  {{ form.difference }}
</div>
<div class="col" id="img{{unit_number.data.value}}">
  {{ form.image }}
</div>
<div class="col">
<button id="form.id" class="btn btn-success " type="submit"   {% if unit_number.data.value in created_nums %}  disabled {% endif %} > Save</button>
</div>


    </div>
  </div>



</form>

  {% endfor %}

<br>
<br>

Answer 1

如果我理解正確，您可以將#<some_id>添加到 forms 的 action 屬性中，當頁面加載時，瀏覽器會自動將id="some_id"的元素置於視圖中。

例子：

<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>

如果您在頁面重新加載時提交#form1 ，瀏覽器將滾動到#form2 ，即使它位於頁面底部。

或者如果你只有一種形式，你可以這樣做：

<form id="form1" action="#form1" method='POST'>...</form>

編輯：

<form id="form{{forloop.counter0}}" action="#form{{forloop.counter}}" class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >

如何滾動鎖定 Django HTML Web 頁

問題描述

1 個解決方案

解決方案1
1 已采納 2021-10-01 12:33:43

如何滾動鎖定 Django HTML Web 頁

問題描述

1 個解決方案

解決方案1 1 已采納 2021-10-01 12:33:43

解決方案1
1 已采納 2021-10-01 12:33:43