Python での Django バックグラウンド カスタム フォーム コントロールの詳細な例

Y2J
リリース: 2017-04-28 09:37:28
オリジナル
1904 人が閲覧しました

この記事では主に Python の Django バックグラウンド カスタム フォーム コントロールを紹介します。実際、Django は複数選択ボックスやラジオ ボタンなど、利用可能なフォーム コントロールをいくつか提供しています。興味がある場合は、詳細をご覧ください。

django では、admin.py ModelAdmin を追加できるため、バックグラウンドで簡単に追加、削除、変更、チェックを行うことができます。ただし、Model に対応して生成されるフォームはフレンドリーではありません。フロントエンド開発のようなさまざまな種類のコントロールを作成したいため、バックエンドのフォームをカスタマイズする必要があります。 admin.py 中添加 ModelAdmin,这样就能很方便地在后台进行增删改查的操作。然而,对应 Model 生成的表单,并不友好,我们希望能像前端开发一样做出各种类型的控件,这就得对其后台的表单进行自定义。

其实 django 已经为我们提供了一些可用的表单控件,比如:多选框、单选按钮等,下面就以单选按钮为例:

# forms.py
from django import forms
from .models import MyModel
class MyForm(forms.ModelForm):
  xxx = forms.ChoiceField(choices=[...], widget=forms.RadioSelect())

  class Meta:
    model = MyModel
    fields = ['id', 'xxx']

# admin.py
from django.contrib import admin
from .models import MyModel
from .forms import MyForm

class MyAdmin(admin.ModelAdmin):
  form = MyForm
  # ...省略若干代码

admin.site.register(MyModel, MyAdmin)
ログイン後にコピー

先自定义一个 MyForm,在里面为字段添加控件,widget 用来指定控件的类型,choices 指定可选列表,再在 MyAdmin 中的 form 指定为自定义表单即可。

在 django 中已经提供了很多 widget(控件),然而这些还远远满足不了我们的需求,这就需要我们去自定义,下面就以一个 ACE 插件 (ACE 是一个独立的 JavaScript 编写的基于 Web 的代码编辑器)为例,说说怎么自定义 widget:

#coding: utf-8
from django import forms
from django.utils.html import format_html
from django.forms.utils import flatatt
from django.utils.encoding import force_text
from django.utils.safestring import mark_safe


ACE_RENDER = '''
<script src="/static/js/jquery-1.11.2.min.js"></script>
<script src="/static/js/ace/ace.js"></script>
<script>
  $(function () {
    var textarea = $(&#39;textarea&#39;);
    var editp = $(&#39;<p>&#39;, {
      position: &#39;absolute&#39;,
      width: textarea.width(),
      height: textarea.height(),
      &#39;class&#39;: textarea.attr(&#39;class&#39;)
    }).insertBefore(textarea);

    textarea.css(&#39;display&#39;, &#39;none&#39;);

    var editor = ace.edit(editp[0]);
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode("ace/mode/%s");
    editor.setTheme("ace/theme/%s");

    textarea.closest(&#39;form&#39;).submit(function () {
      textarea.val(editor.getSession().getValue());
    });
  });
</script>
&#39;&#39;&#39;

class AceWidget(forms.Textarea):
  def __init__(self, mode="", theme="", attrs=None):
    &#39;&#39;&#39;
    为了能在调用的时候自定义代码类型和样式
    :param mode:
    :param theme:
    :param attrs:
    :return:
    &#39;&#39;&#39;
    super(AceWidget, self).__init__(attrs)
    self.mode = mode
    self.theme = theme

  def render(self, name, value, attrs=None):
    &#39;&#39;&#39;
    关键方法
    :param name:
    :param value:
    :param attrs:
    :return:
    &#39;&#39;&#39;
    if value is None:
      value = &#39;&#39;
    final_attrs = self.build_attrs(attrs, name=name)
    output = [format_html(&#39;<textarea{}>\r\n{}</textarea>&#39;, flatatt(final_attrs), force_text(value))]
    current_ace_render = ACE_RENDER %(self.mode, self.theme)
    output.append(current_ace_render)
    return mark_safe(&#39;\n&#39;.join(output))
ログイン後にコピー

主要就是自定义的 widget 要继承自 django 的 widget,然后重写 render 方法,在这个方法中,对新的控件进行包装。

forms.py 中将自定义的控件 AceWidget 引入:

#coding: utf-8
from django import forms
from .models import Code
from widgets import AceWidget


class CodeForm(forms.ModelForm):
  code = forms.CharField(label=&#39;源码&#39;, widget=AceWidget(attrs={&#39;cols&#39;: &#39;100&#39;, &#39;rows&#39;: &#39;20&#39;}, mode="python", theme="monokai"))

  class Meta:
    model = Code
    fields = [&#39;title&#39;, &#39;code&#39;]
ログイン後にコピー

需要注意的是:在这里使用的 mode="python", theme="monokai" 对应的文件 mode-python.js theme-monokai.js 一定要在 /static/js/ace 目录下。

效果图

附录:

models.py:

#coding:utf-8
from django.db import models


class Code(models.Model):
  title = models.CharField(&#39;标题&#39;, max_length=50, unique=True)
  code = models.TextField(&#39;源码&#39;)

  class Meta:
    db_table = &#39;code&#39;
    verbose_name = verbose_name_plural = &#39;代码&#39;

  def __unicode__(self):
    return self.title
ログイン後にコピー

admin.py:

実際、Django は、複数選択ボックス、ラジオ ボタンなど、利用可能なフォーム コントロールをいくつか提供しています。ラジオ ボタンを例に挙げてみましょう: 🎜
from django.contrib import admin
from .models import Code
from .forms import CodeForm


class CodeAdmin(admin.ModelAdmin):
  form = CodeForm
  list_display = [&#39;id&#39;, &#39;title&#39;]

admin.site.register(Code, CodeAdmin)
ログイン後にコピー
🎜まず、MyForm をカスタマイズします。 、フィールドのコントロールを追加します。widget はコントロールのタイプを指定するために使用されます。choices はオプションのリストを指定し、それを MyAdmin フォームをカスタマイズするだけです。 🎜🎜Django は多くのウィジェット (コントロール) を提供していますが、これらは私たちのニーズを満たすにはほど遠いため、カスタマイズする必要があります。これは ACE プラグインです (ACE は、独立した JavaScript ベースの Web ベースのウィジェット コード エディターです)。 ) 例として、ウィジェットをカスタマイズする方法について説明します: 🎜rrreee🎜 主なことは、カスタマイズされたウィジェットが Django ウィジェットから継承し、新しいコントロールがパッケージ化されている render メソッドを書き換える必要があるということです。 🎜🎜forms.py にカスタム コントロール AceWidget を導入します: 🎜rrreee🎜ここでは mode="python" が使用されていることに注意してください。 monokai" 対応するファイル mode-python.js theme-monokai.js/static/js/ace に存在する必要があります。ディレクトリ。 🎜🎜レンダリング<br>🎜🎜<img src="https://img.php.cn/upload/article/000/001/505/14833aabbd3fd2043e0c6da470e806dd-0.png" alt="" style="max-width:90%" style="max-width:90%">🎜🎜付録:<br>🎜🎜<code>models.py:🎜rrreee🎜admin.py:🎜rrreee

以上がPython での Django バックグラウンド カスタム フォーム コントロールの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート