Python中Django 后臺自定義表單控件
在 django 中我們可以在 admin.py 中添加 ModelAdmin,這樣就能很方便地在后臺進行增刪改查的操作。然而,對應(yīng) Model 生成的表單,并不友好,我們希望能像前端開發(fā)一樣做出各種類型的控件,這就得對其后臺的表單進行自定義。
其實 django 已經(jīng)為我們提供了一些可用的表單控件,比如:多選框、單選按鈕等,下面就以單選按鈕為例:
# 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 中已經(jīng)提供了很多 widget(控件),然而這些還遠(yuǎn)遠(yuǎn)滿足不了我們的需求,這就需要我們?nèi)プ远x,下面就以一個 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 = $('textarea');
var editDiv = $('<div>', {
position: 'absolute',
width: textarea.width(),
height: textarea.height(),
'class': textarea.attr('class')
}).insertBefore(textarea);
textarea.css('display', 'none');
var editor = ace.edit(editDiv[0]);
editor.getSession().setValue(textarea.val());
editor.getSession().setMode("ace/mode/%s");
editor.setTheme("ace/theme/%s");
textarea.closest('form').submit(function () {
textarea.val(editor.getSession().getValue());
});
});
</script>
'''
class AceWidget(forms.Textarea):
def __init__(self, mode="", theme="", attrs=None):
'''
為了能在調(diào)用的時候自定義代碼類型和樣式
:param mode:
:param theme:
:param attrs:
:return:
'''
super(AceWidget, self).__init__(attrs)
self.mode = mode
self.theme = theme
def render(self, name, value, attrs=None):
'''
關(guān)鍵方法
:param name:
:param value:
:param attrs:
:return:
'''
if value is None:
value = ''
final_attrs = self.build_attrs(attrs, name=name)
output = [format_html('<textarea{}>\r\n{}</textarea>', flatatt(final_attrs), force_text(value))]
current_ace_render = ACE_RENDER %(self.mode, self.theme)
output.append(current_ace_render)
return mark_safe('\n'.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='源碼', widget=AceWidget(attrs={'cols': '100', 'rows': '20'}, mode="python", theme="monokai"))
class Meta:
model = Code
fields = ['title', 'code']
需要注意的是:在這里使用的 mode="python", theme="monokai" 對應(yīng)的文件 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('標(biāo)題', max_length=50, unique=True)
code = models.TextField('源碼')
class Meta:
db_table = 'code'
verbose_name = verbose_name_plural = '代碼'
def __unicode__(self):
return self.title
admin.py:
from django.contrib import admin from .models import Code from .forms import CodeForm class CodeAdmin(admin.ModelAdmin): form = CodeForm list_display = ['id', 'title'] admin.site.register(Code, CodeAdmin)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
舉例講解Python的lambda語句聲明匿名函數(shù)的用法
利用Python批量壓縮png方法實例(支持過濾個別文件與文件夾)
python Hypothesis生成和執(zhí)行大量的測試用例
Tensorflow實現(xiàn)卷積神經(jīng)網(wǎng)絡(luò)用于人臉關(guān)鍵點識別

