巧将 Django Admin 应用至前端部分 (ZZ)
<span class="Apple-style-span" style="font-size: 12px; line-height: 20px; background-color: rgb(246, 246, 246); " id=""><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">Django的Admin是一个设计的比较成熟的专门解决后台管理的组件，也是很多人选择Django的一个重要原因。</font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">我在想，如果把这个优秀的东西用在前台的设计上，一定能省很多时间。于是稍微动了点手脚，几乎没写几行代码，就完成了一个：带日期选择和错误提示的上传页面。</font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">首先，在froms.py里，导入admin的from：</font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">from django.contrib.admin import widgets</font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">然后，再覆盖原有的日期表单，假设这样：</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">date = forms.DateTimeField(widget=widgets.AdminDateWidget(), label=u'时间')</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">最后，在前端页面，附上这些资源：</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体"><link rel="stylesheet" type="text/css" href="/media/css/base.css" /> </font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体"><link rel="stylesheet" type="text/css" href="/media/css/forms.css" /></font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体"><script type="text/javascript" src="/admin/jsi18n/"></script> </font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体"><script type="text/javascript" src="/media/js/core.js"></script></font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">最后，在表单渲染的位置上，这样调用即可：</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">{{ form.media }}</font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; " id="aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown"><font class="Apple-style-span" face="黑体">{{ form.as_p }} </font></p><p style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">最后，该页面就会呈现一个漂亮的日历选择器，还有漂亮的错误提示。如下图：</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><a target="_blank" href="http://cnmsdn.com/attached/201004/20100405070453_30174.jpg" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(0, 0, 160); text-decoration: underline; "><font class="Apple-style-span" face="黑体"><img src="http://cnmsdn.com/attached/201004/20100405070453_30174.jpg" alt="Django Date Pickper" id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "></font></a></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">我没写一行JS，没写一行CSS…嘿嘿</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" face="黑体">原文:</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><a href="http://cnmsdn.com/html/201004/1270535813ID3307.html" target="_blank" target="_blank"><font class="Apple-style-span" face="黑体">http://cnmsdn.com/html/201004/1270535813ID3307.html</font></a></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><a href="http://blog.chinaunix.net/attachment/201106/29/20306166_13093589933pDK.png" target="_blank" target="_blank"><font class="Apple-style-span" face="黑体"><img src="http://blog.chinaunix.net/attachment/201106/29/20306166_13093589933pDK.png" .load="imgResize(this, 650);" border="0" ;=""></font></a></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><font class="Apple-style-span" color="#f00000" face="黑体">PS:这里有一个问题,如果用户没有登陆admin的管理界面的话,时间控件就不会正常显示,具体原因我也不清楚为什么.如果大家遇到无法显示控件的时候最好看一些是否登录过admin后台.</font></p><p id="" style="font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><br></p></span>
页:
[1]