如何解决Flask Admin 需要 HTML5 颜色选择器字段
我正在使用 Flask-Admin 创建我的数据库表的视图。我们的一个表有一个“颜色”列,它是“可编辑”,意思是如果你点击它,你可以直接编辑文本,它会更新数据库阿贾克斯。这是一个文本字段,我期待像“#3CA4FF”这样的十六进制颜色。
我希望这个“可编辑”颜色列有一个 HTML5 颜色选择器小部件来帮助选择颜色(即 <input type="color">
)。
这是我的 Python 代码:
以下可以很好地将我的自定义 ColorField 添加到“编辑”表单,但我真正想要的是使用 column_editable_list
选项对其进行编辑。
from flask_admin.contrib.sqla import ModelView
from wtforms.widgets.html5 import ColorInput
from wtforms.widgets import TextInput
from wtforms import StringField
from wtforms.fields import TextAreaField
from app import db
class UnitType(db.Model):
"""Create a sqlAlchemy model for the our manufactured units"""
__tablename__ = "unit_types"
id = db.Column(INTEGER,primary_key=True)
unit = db.Column(TEXT,unique=True,nullable=False)
color = db.Column(TEXT,nullable=True)
class ColorField(TextAreaField):
"""Create special ColorField for the color picker"""
# Set the widget for this custom field
widget = Colorinput()
class UnitModelView(ModelView):
"""The Flask-Admin view for the UnitModel model class"""
# List of columns to display in the view
column_list = (
"unit","color",)
# List of columns that are immediately "editable"
# without clicking "edit" first (super-nice feature)
column_editable_list = (
"unit",# If I uncomment the following,I get an error...
# "color",)
# Specify my own custom color picker form field type
form_overrides = {
'color': ColorField
}
# form_args = {
# 'color': {
# 'type': "color",# },# }
# form_widget_args = {
# 'color': {
# 'type': "color",# }
当我将“颜色”字段添加到 column_editable_list
时,出现以下错误:
Exception: Unsupported field type: <class 'app.admin.admin.ColorField'>
我不知道接下来要尝试什么...
解决方法
经过多次反复试验,我至少想出了如何添加自定义 select2 下拉菜单,该菜单显示在十六进制颜色值左侧选择的实际颜色。
首先创建一个自定义小部件,以免出现以下错误:
Exception: Unsupported field type: <class 'flask_admin.model.fields.AjaxSelectField'>
这是自定义小部件:
from flask_admin.contrib.sqla.ajax import QueryAjaxModelLoader
from flask_admin.model.widgets import XEditableWidget
from wtforms.widgets import html_params
from flask_admin.helpers import get_url
from flask_admin.babel import gettext
from flask_admin._backwards import Markup
from jinja2 import escape
class CustomWidget(XEditableWidget):
"""WTForms widget that provides in-line editing for the list view"""
def get_kwargs(self,field,kwargs):
"""Return extra kwargs based on the field type"""
if field.type == "ColorField":
# A select2 list of pre-defined colors,formatted to display the actual color
kwargs["data-role"] = "x-editable-color"
kwargs["data-type"] = "select2"
else:
super().get_kwargs(field,kwargs)
return kwargs
然后覆盖模型视图中的 get_list_form()
方法,以使用您的 CustomWidget。
from flask_admin.contrib.sqla import ModelView
class MyModelView(ModelView):
"""
Customized model view for Flask-Admin page (for database tables)
https://flask-admin.readthedocs.io/en/latest/introduction/#
"""
# Custom templates to include custom JavaScript and override the {% block tail %}
list_template = 'admin/list_custom.html'
can_create = True
can_edit = True
def get_list_form(self):
"""Override this function and supply my own CustomWidget with AJAX
for lazy-loading dropdown options"""
if self.form_args:
# get only validators,other form_args can break FieldList wrapper
validators = dict(
(key,{'validators': value["validators"]})
for key,value in iteritems(self.form_args)
if value.get("validators")
)
else:
validators = None
# Here's where I supply my custom widget!
return self.scaffold_list_form(validators=validators,widget=CustomWidget())
这是我的 list_custom.html
模板,用于使用我自己的自定义小部件的 {% block tail %}
脚本覆盖 flask_admin_form.js
。
{% extends 'admin/model/list.html' %}
{% block tail %}
{% if filter_groups %}
<div id="filter-groups-data" style="display:none;">{{ filter_groups|tojson|safe }}</div>
<div id="active-filters-data" style="display:none;">{{ active_filters|tojson|safe }}</div>
{% endif %}
<script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js',v='1.3.22') }}"></script>
{% if editable_columns %}
<script src="{{ admin_static.url(filename='vendor/x-editable/js/bootstrap3-editable.min.js',v='1.5.1.1') }}"></script>
{% endif %}
<!-- Custom JavaScript -->
<script src="{{ url_for('static',filename='js/flask_admin_form.js') }}"></script>
<script src="{{ admin_static.url(filename='admin/js/filters.js',v='1.0.0') }}"></script>
{{ actionlib.script(_gettext('Please select at least one record.'),actions,actions_confirmation) }}
{% endblock %}
最后,在 flask_admin_form.js
(我替换默认的 filename='admin/js/form.js'
)中,我为 x-editable-color
(我的自定义角色)添加以下案例。为简洁起见,我没有在此处包含整个 JavaScript 文件。您可以在源代码中找到它 here。
注意我添加到 select2
选项中的 $el.editable(
:
...
switch (name) {
case "select2-ajax":
processAjaxWidget($el,name);
return true;
case "x-editable":
$el.editable({
params: overrideXeditableParams,combodate: {
// prevent minutes from showing in 5 minute increments
minuteStep: 1,maxYear: 2030,},});
return true;
case "x-editable-color":
// Nice pastel colors
var colorsource = [
{value: "#f7f7f7",text: "#f7f7f7"},{value: "#292b2c",text: "#292b2c"},{value: "#87CEEB",text: "#87CEEB"},{value: "#32CD32",text: "#32CD32"},{value: "#BA55D3",text: "#BA55D3"},{value: "#F08080",text: "#F08080"},{value: "#4682B4",text: "#4682B4"},{value: "#9ACD32",text: "#9ACD32"},{value: "#40E0D0",text: "#40E0D0"},{value: "#FF69B4",text: "#FF69B4"},{value: "#F0E68C",text: "#F0E68C"},{value: "#D2B48C",text: "#D2B48C"},{value: "#8FBC8B",text: "#8FBC8B"},{value: "#6495ED",text: "#6495ED"},{value: "#DDA0DD",text: "#DDA0DD"},{value: "#5F9EA0",text: "#5F9EA0"},{value: "#FFDAB9",text: "#FFDAB9"},{value: "#FFA07A",text: "#FFA07A"},{value: "#fce38a",text: "#fce38a"},{value: "#eaffd0",text: "#eaffd0"},{value: "#95e1d3",text: "#95e1d3"},]
var optsSelect2 = {
placeholder: $el.attr("data-value"),minimumInputLength: $el.attr("data-minimum-input-length"),allowClear: $el.attr("data-allow-blank") == "1",multiple: $el.attr("data-multiple") == "1",// Display the actual color next to the hex value of the color
formatResult: function (item) { return "<span style='padding-left: 20px; border-left: 20px solid " + item.text + "'>" + item.text + "</span>"; },formatSelection: function (item){ return item.text; },};
$el.editable({
// Source data for list of colors,as array of objects
source: colorsource,params: overrideXeditableParams,// select2-specific options
select2: optsSelect2,});
return true;
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。