Question

我之前在互联网上看过这样的表格 - 基本上我想让用户动态地将字段添加到WTForms中的SelectField下拉表单中。例如，下拉菜单中的第一个字段可能是允许用户向表单添加自定义字段的链接。我将如何在WTForms中实现类似的功能？谢谢！

Answer 1

嗨迈克尔我知道这已经晚了3个月但我最近在AngularJS和bootstrap模态的帮助下做了类似的事情，所以我想我会为了完整起见而提出这个问题：

这是一个非常简化的版本我没有包含错误检查或验证您当然希望为您的生产环境做的任何种类。

在我的模板中，以下是选择字段的外观。而不是第一个选项是允许一个人创建的东西，我只是在选择字段旁边添加了一个链接，允许一个人添加一个新类别。链接本身在模态中打开一个表单。

以下是选择字段：

<div class="form-group">
        {{ form.maincategory.label(class="col-sm-2 control-label") }}
        <div class="col-sm-5">
        {{ form.maincategory(**{'ng-model':'maincategory',
                                'ng-options':'c.id as c.displayname for c in allmaincategories',
                                'class':'form-control'}) }} 
        #over here is the link that opens the form in a modal window
        </div><a data-toggle="modal" href="#newcategory">Add a new category</a>
    </div>

当用户点击链接添加新类别时，将加载以下模式窗口：

<!-- Add new category Modal -->
<div class="modal fade" id="newcategory" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create new main category</h4>
      </div>
      <div class="modal-body">
        <form method="post" ng-submit="createCategory()">
            <div class="form-group">
                {{ categoryform.displayname.label(class="col-sm-8 control-label") }}
                <div>
                    {{ categoryform.displayname(**{'ng-model':'maincat.displayname','class':'form-control'}) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Save changes" />
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

在模态窗口中呈现上述形式的WTFORM表单类如下：

class DirectoryMainCategoryForm(Form):
    displayname = TextField('Category name as it appears', validators=[DataRequired(message=(u'This category name is how it appears in the menu'))])

#the following is the form main form where the select appears
class MainEntry(Form):
    maincategory = QuerySelectField('Main category', validators = DataRequired(message=(u'Please select a category for this place'))], get_label='category',
    allow_blank=False, query_factory=Maincategory.query.all,blank_text =('-- Select a main category --'))


#And of course the javascript magic that glues it all together:
function DirectoryController($scope, $http){
    #Adds a new category to the select menu
    $scope.createCategory = function() {
        var categorydata = angular.toJson($scope.maincat);
        $http.post('/create/new/category', categorydata).success(function(data) {
            $scope.allmaincategories = data.category;
        });
    }
}

WTForms向SelectField添加其他类别

1 个答案: