巧将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)),

20 Comments

  1. Ruby on Rails用户飘过…呵呵

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

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

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

  5. 有点小问题

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

    我这边需要先登录admin之后,才能使用时间插件,否则会报gettext错误

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

      • 恩,不愧是高手啊~

        如果不想通过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,这样就更加灵活了~

      • 恩,不愧是高手啊~

        如果不想通过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,这样就更加灵活了~

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

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

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

  9. 请问一下,/admin/jsi18,base,core.js 这些文件是什么呢?

    可以共享一下吗?谢谢:)

Leave a Comment