Динамическая таблица длин в форме колбы - PullRequest
Новая
       23

Динамическая таблица длин в форме колбы

1 голос
/ 02 июля 2019

У меня есть веб-приложение для колб, которое отображает шаблон 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")

Форма позволяет пользователю динамически добавлять дополнительные строки в таблицу, содержащую дополнительные строки. Пользователь достигает этого, нажимая кнопки + и - в форме, которые вызывают соответствующие функции JavaScript. Эта часть моего кода работает хорошо и в настоящее время выглядит так:

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 Ответ

0 голосов
/ 02 июля 2019

Мне удалось решить эту проблему, добавив в таблицу строки, имитирующие тот же формат, что и содержимое, сгенерированное WTForm. Ниже приведена функция добавления новой строки 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 ячейки, было извлечено путем просмотра источника страницы.

...