• 一级菜单添加页面, 图标的一些处理。


    最初时, 图标需要输入  一个字符串。 但是难免会出错。
    所以,  使用一个 redio 单选框, 来做这件事。
    先看 form组件:

    from django import forms
    from django.utils.safestring import mark_safe
    from rbac import models
    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参数接收一个列表套嵌列表的结构。 其中 每个列表的第一个参数 是真实要保存到数据库的 值。
    第二个参数,是要进行展示的 图标的, 样子。
    这里需要使用  mark_safe() 将这个标签字符串,进行一下处理。 目的是告诉django  这个标签是可信任的, 不要变成特殊符号。
    否则 在页面看到的, 就是一堆 字符串,而不是 图标。
    为了好看, 给icon生成的, ul 添加了一个属性  attrs={'class': 'clearfix'}。 清除浮动。
    在页面当中,清除 ul li  和 i 标签的默认样式, 并且写一点样式。展示时 更好看:

    {% block css %}
    <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>
    {% endblock %}

     这是在, 主页面单独开放的一个  block 。 用于添加css代码。







  • 相关阅读:
    Django连接MySQL(二)
    Django框架,python2和python3共存的情况下,创建Django项目
    pycharm破解
    dbutils中实现数据的增删改查的方法,反射常用的方法,绝对路径的写法(杂记)
    Spring中的事物管理,基于spring的bean的配置
    Spring中的事物管理,用 @Transactional 注解声明式地管理事务
    Ajax中GET和POST的区别
    Spring对 JDBC 的支持,JdbcTemplate类的使用
    Spring AOP:面向切面编程,AspectJ,是基于spring 的xml文件的方法
    Spring AOP:面向切面编程,AspectJ,是基于注解的方法
  • 原文地址:https://www.cnblogs.com/chengege/p/10712164.html
Copyright © 2020-2023  润新知