Làm việc với WTForms FieldList

Question

Tôi sử dụng WTForms với Flask thông qua phần mở rộng Flask.WTF. Câu hỏi này không phải là Flask cụ thể, mặc dù.

WTForms bao gồm FieldList field for lists of fields. Tôi muốn sử dụng điều này để tạo biểu mẫu nơi người dùng có thể thêm hoặc xóa các mục. Điều này sẽ yêu cầu một số loại khung công tác Ajax để tự động thêm các widget, nhưng tài liệu WTForms không đề cập đến nó.

Các khung công tác khác như Deform come with Ajax support. Có một khung tương tự có sẵn cho WTForms không?

Answer 1

tôi đã sử dụng một cái gì đó như thế này với FieldList tôi/FormField cho phép bổ sung thêm mục:

$(document).ready(function() { 
    $('#add_another_button').click(function() { 
     clone_field_list('fieldset:last'); 
    }); 
}); 

function clone_field_list(selector) { 
    var new_element = $(selector).clone(true); 
    var elem_id = new_element.find(':input')[0].id; 
    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1; 
    new_element.find(':input').each(function() { 
     var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked'); 
    }); 
    new_element.find('label').each(function() { 
     var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr('for', new_for); 
    }); 
    $(selector).after(new_element); 
} 

Di chuyển nút sẽ phức tạp hơn nhiều.

(Mã chủ yếu là vay mượn từ câu trả lời cho Dynamically adding a form to a Django formset with Ajax.)

Answer 2

Từ mô tả của bạn, tôi không thể thấy tại sao Ajax là đặc biệt cần thiết, mặc dù tất nhiên bạn cần logic JavaScript để thêm/xóa hàng. Tôi đã thực hiện chức năng này bằng cách sử dụng WTForms, nhưng không có sự hỗ trợ đặc biệt nào từ bản thân WTForms; bạn chỉ cần đảm bảo rằng khi bạn tạo các tiện ích phía máy khách, bạn thực hiện việc này bằng cách sử dụng các tên trường mà WTForms sẽ phân tích chính xác vào danh sách phía máy chủ. Bạn có thể sao chép một hàng hiện có bằng cách sử dụng JavaScript phía máy khách để thêm hàng, do đó việc hiển thị một hàng nhất quán giữa các hàng được tạo phía máy chủ và các hàng được tạo phía máy khách.