>

양식에 여러 필드를 표시하는 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

    WTWT 생성 컨텐츠와 동일한 형식을 모방하는 행을 테이블에 추가하여이 문제를 해결할 수있었습니다. 다음은 새로운 extra 를 추가하는 기능입니다  행.

    function addExtraRow() {
        let table = document.getElementById("extra-table");
        let length = table.rows.length + 1;
        let row = table.insertRow(-1);
        let keyCell = row.insertCell(0);
        let valCell = row.insertCell(1);
        let cell3 = row.insertCell(2);
        keyCell.innerHTML = "<span class=\"bmd-form-group is-filled\"><input class=\"form-control\" id=\"extras-" + length + "-key\" name=\"extras-" + length + "-key\" required=\"\" type=\"text\" value=\"\"></span>";
        valCell.innerHTML = "<span class=\"bmd-form-group is-filled\"><input class=\"form-control\" id=\"extras-" + length + "-value\" name=\"extras-" + length + "-value\" required=\"\" type=\"text\" value=\"\"></span>";
        cell3.innerHTML = "<button type=\"button\" class=\"btn btn-danger\" onclick=\"removeExtraRow(this)\"> Remove <i class=\"fas fa-minus\"></i> </button>";
    }
    
    

    페이지 소스를보고 셀의 InnerHTML 속성에 삽입 할 내용을 추출했습니다.

관련 자료

  • 이전 reactjs - react-datepicker가 올바른 날짜를 선택하지 않는 이유는 무엇입니까?
  • 다음 selenium webdriver - @Before hook의 scenariogetName ()이 왜 마지막 시나리오 이름 만 반환합니까?