홈>
양식에 여러 필드를 표시하는 Jinja2 템플릿을 렌더링하는 플라스크 웹 앱이 있습니다. 이 양식은 데이터베이스에서 테이블 간 일대 다 관계로 두 개의 테이블을 나타냅니다.
레코드 클래스
class Record(db.Base):
__tablename__ = 'metadata_record_version'
id = Column(Integer, primary_key=True)
number = Column(Float, nullable=False)
추가 속성 클래스
class Extra(db.Base):
__tablename__ = 'extra'
id = Column(Integer, primary_key=True)
record_id = Column(Integer, ForeignKey('metadata_record_version.id'), nullable=False)
key = Column(String(256), nullable=False)
value = Column(String, nullable=False)
metadata_record_version = relationship("MetadataRecordVersion")
이 형식을 사용하면 추가 행을 포함하는 테이블에 더 많은 행을 동적으로 추가 할 수 있습니다. 사용자는 관련 자바 스크립트 함수를 호출하는 양식에서 + 및-단추를 클릭하여이를 달성합니다. 내 코드 의이 부분은 잘 작동하며 현재 다음과 같습니다.
Template.html
<form>
<!-- Other Form attributes here -->
<table id="extra-table">
<tr>
<th class="col-md-4">Property</th>
<th class="col-md-4">Value</th>
<th class="col-md-4"></th>
</tr>
{% for extra in form.extras %}
<tr>
<td>{{ extra.key(class_="form-control") }}</td>
<td>{{ extra.value(class_="form-control") }}</td>
<td>
<button type="button" class="btn btn-danger"
onclick="removeExtraRow(this)">
Remove <i class="fas fa-minus"></i>
</button>
</td>
</tr>
{% endfor %}
<button type="button" class="btn btn-info" onclick="addExtraRow()">
Add Row <i class="fas fa-plus"></i>
</button>
</table>
</form>
<script>
Template.html의 태그
// Function to add a row to the Extra Properties Table
function addExtraRow() {
let table = document.getElementById("extra-table");
let row = table.insertRow(-1);
row.contentEditable = "true";
row.insertCell(0);
row.insertCell(1);
let cell3 = row.insertCell(2);
cell3.innerHTML = "
<button type=\"button\" class=\"btn btn-danger\" onclick=\"removeExtraRow(this)\"> Remove <i class=\"fas fa-minus\"></i> </button>";
}
// Function to remove a row from the extra properties table
function removeExtraRow(x) {
let i = x.parentNode.parentNode["rowIndex"];
let table = document.getElementById("extra-table");
table.deleteRow(i);
}
내가 직면 한 문제는 양식 데이터를 올바르게 다시 수신하여 WTForms에 전달하는 것입니다.
동적 길이 테이블을 WTForms에서 어떻게 모델링합니까? 현재 행이 테이블에 추가되면 행을 다시보기에 올바르게 게시하지 않습니다.
현재 form.py
class ExtraForm(Form):
key = StringField('Property')
value = StringField('Value')
class Edit(FlaskForm):
version_number = FloatField('Version Number')
extras = FieldList(FormField(ExtraForm)
편집 :
FieldList(FormField(ExtraForm))
를 사용하여 일대 다 관계와 관련하여 진행 상황이 추가되었습니다.
.
- 답변 # 1
관련 자료
- JQuery를 사용하여 동적 HTML 테이블에서 선택한 행 값을 얻는 방법은 무엇입니까?
- c# - 날짜로 동적 테이블을 만들려면 어떻게해야합니까?
- SQL Server에서 여러 테이블이있는 동적 피벗 쿼리
- PHP 배열에서 4 열로 동적 테이블을 인쇄하고 빈 를 추가하여 테이블 행을 완성하는 방법
- javascript - 반응 js에서 동적 테이블에 페이지 매김을 적용하는 방법
- ios - 동적 테이블 뷰에 하단 셀 추가
- Powershell에서 동적 업데이트를 통해 두 개의 어레이 출력을 테이블로 전환
- postgresql - 동적 열 이름으로 피벗 테이블 만들기
- sql server - 날짜에 대한 동적 필터 및 테이블의 마지막 행에 총계 추가
- html - CSS 그리드를 사용하여 동적 데이터 테이블이있는 행에서 열을 전환 하시겠습니까?
- sql - 바이올린을 사용하지 않고 동적 피벗 테이블 만들기
- sql - 월별 동적 피벗 테이블
- 동적 HTML 테이블 데이터 (jQuery를 사용하여 생성됨)를 클릭 가능하게 만드는 방법은 무엇입니까?
- 로봇 프레임 워크에서 테이블과 엑셀의 목록 길이가 다릅니다
- delphi - 로컬 동적 배열의 길이를 0으로 설정하면 메모리 사용량이 감소합니까?
- html - FOR EACH를 사용하는 하나의 열로 동적 드롭 다운이있는 PHP ECHO 테이블
- mysql - 동적 피벗 테이블 필터링 및 성능
- javascript - 동적 테이블 셀에서 값 가져 오기 및 해당 값을 JS 함수에 전달
- sql - MYSQL IF 문 내에서 테이블 이름 길이 가져 오기
- sql - 모든 테이블 oracle에서 모든 테이블 DML 활동을 찾는 동적 쿼리
관련 질문
- python : 일대다 관계 flask-sqlalchemy를 식별하는 적절한 방법입니까?
- python : Flask babel 인라인 변수
- python : `pd.to_sql`이 던질 수 있는 모든 오류 캡처
- python : pool_size가 1로 설정된 경우 왜 2개의 SQLAlchemy 연결이 있습니까?
- python : Cloud Run Flask 애플리케이션의 비디오 업로드는 해당 파일 또는 디렉토리를 제공하지 않습니다.
- python : 반환 후/반환과 함께 code를 실행하기 위해 스레드를 사용하는 플라스크
- python : 플라스크 앱을 실행할 때 상위 폴더에서 모듈 가져오기가 작동하지 않음
- python : 플라스크를 사용하여 heroku bert pytorch 모델에 배포: 오류: _pickle.UnpicklingError: 잘못된 로드 키, 'v'
- python : 'function' 개체에는 JSON에 'load' 속성이 없습니다.
- postgresql : sqlalchemy 조건 결과 `거짓`
WTWT 생성 컨텐츠와 동일한 형식을 모방하는 행을 테이블에 추가하여이 문제를 해결할 수있었습니다. 다음은 새로운
extra
를 추가하는 기능입니다 행.페이지 소스를보고 셀의 InnerHTML 속성에 삽입 할 내용을 추출했습니다.