Flask Flask-Admin 自定义 Select2 Ajax 字段

在本文中，我们将介绍如何在 Flask-Admin 中使用自定义 Select2 Ajax 字段。Flask-Admin 是一个流行的 Flask 扩展，可以帮助我们快速构建功能强大的后台管理界面。而 Select2 是一个非常流行的下拉选择框插件，它支持搜索、远程数据加载和异步加载等功能。结合两者，我们可以实现一个强大的下拉选择框，能够实时搜索并加载远程数据。

阅读更多：Flask 教程

安装依赖

在开始之前，我们需要安装以下依赖：

Flask-Admin：pip install flask-admin
Flask-Select2：pip install flask-select2
Select2：可以通过 CDN 引入或者下载到本地。

创建 Flask-Admin 应用

首先，我们需要创建一个 Flask-Admin 应用。我们可以使用以下代码快速创建一个简单的应用：

from flask import Flask
from flask_admin import Admin
from flask_admin.contrib.sqla import ModelView
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///example.db'
db = SQLAlchemy(app)
admin = Admin(app, template_mode='bootstrap3')

# TODO: 添加数据库模型和视图

if __name__ == '__main__':
    app.run()

在这个例子中，我们创建了一个名为 app 的 Flask 应用，并将其与一个 SQLite 数据库绑定。然后，我们创建了一个名为 admin 的 Flask-Admin 实例，并将其与应用关联。最后，我们使用 app.run() 运行应用。

创建数据库模型

接下来，我们需要创建一个数据库模型，用于演示自定义 Select2 Ajax 字段的使用。我们可以使用以下代码定义一个简单的模型：

from sqlalchemy import Column, Integer, String

class Category(db.Model):
    __tablename__ = 'category'
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True)

在这个例子中，我们创建了一个名为 Category 的模型，其中包含一个 id（整型）和一个 name（字符串）字段。

创建自定义 Select2 Ajax 字段

接下来，我们将创建一个自定义 Select2 Ajax 字段。我们可以使用以下代码定义一个简单的字段类：

from wtforms import Field, SelectMultipleField
from wtforms.widgets import html_params

class Select2AjaxMultipleField(SelectMultipleField):
    widget = widgets.Select(multiple=True)

    def __init__(self, label=None, validators=None, ajax_url=None, **kwargs):
        super(Select2AjaxMultipleField, self).__init__(label, validators, **kwargs)
        self.ajax_url = ajax_url

    def iter_choices(self):
        # TODO: 实现选择项的加载

    # TODO: 实现其它方法

在这个例子中，我们创建了一个名为 Select2AjaxMultipleField 的字段类，继承自 SelectMultipleField。我们为该字段类添加了一个 ajax_url 参数，用于指定远程数据加载的 URL。此外，我们还重写了 iter_choices 方法，用于实现选择项的加载。

添加自定义字段到 Flask-Admin 视图

最后，我们需要将自定义字段添加到 Flask-Admin 视图中。我们可以使用以下代码定义一个简单的视图类：

from flask_admin.contrib.sqla import ModelView

class CustomCategoryView(ModelView):
    form_extra_fields = {
        'categories': Select2AjaxMultipleField('Categories', ajax_url='/load_data')
    }

admin.add_view(CustomCategoryView(Category, db.session))

在这个例子中，我们创建了一个名为 CustomCategoryView 的视图类，继承自 ModelView。我们在视图类中通过 form_extra_fields 属性将自定义字段添加到表单中，并指定了该字段的标签和远程数据加载的 URL。最后，我们使用 admin.add_view 方法将视图类关联到 Flask-Admin 实例中。

编写 Select2 Ajax 数据加载接口

最后，我们需要编写一个 Select2 Ajax 数据加载接口，用于从远程加载数据。我们可以使用以下代码定义一个简单的接口：

from flask import jsonify, request

@app.route('/load_data')
def load_data():
    search_term = request.args.get('term', '')
    categories = Category.query.filter(Category.name.ilike(f'%{search_term}%')).all()
    data = [{'id': category.id, 'text': category.name} for category in categories]
    return jsonify(data)

在这个例子中，我们创建了一个名为 load_data 的接口，使用 request.args.get 获取搜索关键字，并使用 like 条件查询数据库获取符合搜索条件的分类数据。然后，我们将查询结果处理成 Select2 所需的格式，返回给前端。