巧将Django Admin应用至前端部分

Django的Admin是一个设计的比较成熟的专门解决后台管理的组件,也是很多人选择Django的一个重要原因。

我在想,如果把这个优秀的东西用在前台的设计上,一定能省很多时间。于是稍微动了点手脚,几乎没写几行代码,就完成了一个:带日期选择和错误提示的上传页面。

首先,在froms.py里,导入admin的from:

from django.contrib.admin import widgets

然后,再覆盖原有的日期表单,假设这样:

date = forms.DateTimeField(widget=widgets.AdminDateWidget(), label=u'时间')

最后,在前端页面,附上这些资源:

<link rel="stylesheet" type="text/css" href="/media/css/base.css" />

<link rel="stylesheet" type="text/css" href="/media/css/forms.css" />

<script type="text/javascript" src="/admin/jsi18n/"></script>

<script type="text/javascript" src="/media/js/core.js"></script>

最后,在表单渲染的位置上,这样调用即可:

{{ form.media }}

{{ form.as_p }}

最后,该页面就会呈现一个漂亮的日历选择器,还有漂亮的错误提示。如下图:

Django Date Pickper

我没写一行JS,没写一行CSS…嘿嘿

Enjoy!

UPDATE-2010-04-06

为使得普通用户也能访问这个页面,需要hack一下admin的jsi18n,即弄一个非admin登录的view:

在urls.py里加一个这样的函数:

def i18n_javascript(request):

return admin.site.i18n_javascript(request)

然后保证js18n这个在原admin之前,即可:

(r'^admin/jsi18n', i18n_javascript),

(r'^admin/', include(admin.site.urls)),

<推广> 本站架设于 Linode

20 Comments

Ruby on Rails用户飘过…呵呵

嗯,最近在研究这个东东,呵呵

Dororo

ubuntu Tweak 在kubuntu 不能安装软件,kubuntu 没有软件中心,如果tweak不能安装软件,是很不爽阿

TualatriX 回复 @Dororo

注意,你用的是Ubuntu Tweak,而不是Kubuntu Tweak!

Mike

真的很不错。 这才是django,嘿嘿

Kid

有点小问题 <script type="text/javascript" src="/admin/jsi18n/"></script> 我这边需要先登录admin之后,才能使用时间插件,否则会报gettext错误

TualatriX 回复 @Kid

嗯,确实有点小问题,我已经补充了下文章,现在应该没问题了。

Kid 回复 @TualatriX

恩,不愧是高手啊~ 如果不想通过form来用的话,可以直接拆卸下来: 文中的 {{form.as_p}}是<input id="id_date" type="text" class="vDateField" name="date" size="10" /> {{form.media}} 是<script type="text/javascript" src="/media/js/calendar.js"></script> <script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script> 然后再加上文中的css和js,这样就更加灵活了~

Kid 回复 @TualatriX

恩,不愧是高手啊~ 如果不想通过form来用的话,可以直接拆卸下来: 文中的 {{form.as_p}}是{% autoescape off %} <input id="id_date" type="text" class="vDateField" name="date" size="10" />{% endautoescape %} {{form.media}} 是<script type="text/javascript" src="/media/js/calendar.js"></script> <script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script> 然后再加上文中的css和js,这样就更加灵活了~

Kid 回复 @Kid

测试失败~ :)

wooparadog

禅叔有mac了,你有mac了..大家都有mac了...

?!!! 楼上没有过滤HTML <b>测试</b>

HicroKee 回复 @HicroKee

真的没有过滤呀?! TX快来修一下~

TualatriX 回复 @HicroKee

囧! 我差点忘记这件事情了,我要补这个bug,谢谢提醒~

TualatriX 回复 @TualatriX

应该修正了,测试一下。 <b>测试</b>

TualatriX 回复 @TualatriX

囧! 还没有,再试一个。 &lt;b&gt;测试&lt;/b&gt;

TualatriX 回复 @TualatriX

囧! 还没有,再试一个。 &lt;b&gt;测试&lt;/b&gt;

嗯,测试成功,HTML的东西直接没有发布

Lawrence

请问一下,/admin/jsi18,base,core.js 这些文件是什么呢? 可以共享一下吗?谢谢:)

Leave a Comment