这里就好说了。 使用的还是 forms 组件。 将图标的input框, 搞成了 redio 单选框。
直接看代码:
from django import forms from django.utils.safestring import mark_safe from django.core.exceptions import ValidationError, NON_FIELD_ERRORS from rbac import models # mark_safe 告诉django这个是安全的,渲染页面时, 不要转换成特殊符号。 ICON_LIST = [ ['fa-hand-scissors-o', '<i aria-hidden="true" class="fa fa-hand-scissors-o"></i>'], ['fa-hand-spock-o', '<i aria-hidden="true" class="fa fa-hand-spock-o"></i>'], ['fa-hand-stop-o', '<i aria-hidden="true" class="fa fa-hand-stop-o"></i>'], ['fa-handshake-o', '<i aria-hidden="true" class="fa fa-handshake-o"></i>'], ['fa-hard-of-hearing', '<i aria-hidden="true" class="fa fa-hard-of-hearing"></i>'], ['fa-hashtag', '<i aria-hidden="true" class="fa fa-hashtag"></i>'], ['fa-hdd-o', '<i aria-hidden="true" class="fa fa-hdd-o"></i>'], ['fa-headphones', '<i aria-hidden="true" class="fa fa-headphones"></i>'], ['fa-heart', '<i aria-hidden="true" class="fa fa-heart"></i>'], ['fa-heart-o', '<i aria-hidden="true" class="fa fa-heart-o"></i>'], ['fa-heartbeat', '<i aria-hidden="true" class="fa fa-heartbeat"></i>'], ['fa-history', '<i aria-hidden="true" class="fa fa-history"></i>'], ['fa-home', '<i aria-hidden="true" class="fa fa-home"></i>'], ['fa-hotel', '<i aria-hidden="true" class="fa fa-hotel"></i>'], ['fa-hourglass', '<i aria-hidden="true" class="fa fa-hourglass"></i>'], ['fa-hourglass-1', '<i aria-hidden="true" class="fa fa-hourglass-1"></i>'], ['fa-hourglass-2', '<i aria-hidden="true" class="fa fa-hourglass-2"></i>'], ['fa-hourglass-3', '<i aria-hidden="true" class="fa fa-hourglass-3"></i>'], ['fa-hourglass-end', '<i aria-hidden="true" class="fa fa-hourglass-end"></i>'], ['fa-hourglass-half', '<i aria-hidden="true" class="fa fa-hourglass-half"></i>'], ['fa-hourglass-o', '<i aria-hidden="true" class="fa fa-hourglass-o"></i>'], ['fa-hourglass-start', '<i aria-hidden="true" class="fa fa-hourglass-start"></i>'], ['fa-i-cursor', '<i aria-hidden="true" class="fa fa-i-cursor"></i>'], ['fa-id-badge', '<i aria-hidden="true" class="fa fa-id-badge"></i>'], ['fa-id-card', '<i aria-hidden="true" class="fa fa-id-card"></i>'], ['fa-id-card-o', '<i aria-hidden="true" class="fa fa-id-card-o"></i>'], ['fa-image', '<i aria-hidden="true" class="fa fa-image"></i>'], ['fa-mail-reply-all', '<i aria-hidden="true" class="fa fa-mail-reply-all"></i>'], ['fa-reply', '<i aria-hidden="true" class="fa fa-reply"></i>'], ['fa-reply-all', '<i aria-hidden="true" class="fa fa-reply-all"></i>'], ['fa-retweet', '<i aria-hidden="true" class="fa fa-retweet"></i>'], ['fa-wrench', '<i aria-hidden="true" class="fa fa-wrench"></i>']] for item in ICON_LIST: item[1] = mark_safe(item[1]) class MenuForm(forms.ModelForm): '''菜单form''' class Meta: model = models.Menu fields = ["title", "icon"] widgets = { "title": forms.TextInput(attrs={"class": "form-control"}), "icon": forms.RadioSelect( choices=ICON_LIST, attrs={'class': 'clearfix'} ) }
为icon字段,的展示。 搞成一个RadioSelect() choices 属性就是所有的要展示的图标。
['fa-wrench', make_safe('<i aria-hidden="true" class="fa fa-wrench"></i>'])]
每个列表都是一个图标, 第一个参数是,要保存到数据库中的icon字段的值。 第二个参数是进行展示时的样式。
一样要使用 make_safe() 告诉,django 这个字符串时可以信任的, 不然都是字符串展示出来了。
然后就是, 给这些标签加一点再, 更改一点样式:
<style type="text/css"> ul {list-style-type: none;padding: 0;} ul li {float: left;padding: 10px;padding-left: 0; 80px;} ul li i {font-size: 18px;margin-left: 5px;color: #6d6565;} </style>
注,不是所有的都要这样改, 只是添加页面中的 ul 下的标签。
写样式的时候, 不要起了冲突就好!