ui li 菜单点击添加下级_轻量级办公平台开发实录(12)：日程数据的添加和展示...

最新推荐文章于 2023-06-09 11:48:52 发布

weixin_39825045

最新推荐文章于 2023-06-09 11:48:52 发布

阅读量227

点赞数

文章标签： ui li 菜单点击添加下级可以用js代码添加li的内容吗

说明：文章中代码比较多，完整结构和代码可以查看最新版本：https://github.com/RobbieHan/sandboxOA

1、补充：Django URL name介绍

上节在sandboxOA/sandboxOA/urls.py文件中添加了工作日程访问的url，定义了name:

urlpatterns = [

    ......
    url(r'^myreport/$', views.MyReportView.as_view(), name='myreport'),

]

修改sandboxOA/templates/base-left.html文件，添加【我的日报】菜单链接：

......
  <ul class="treeview-menu">
    <li><a href="/myreport/"><i class="fa fa-caret-right"></i>我的日报</a></li>
    <li><a href="#"><i class="fa fa-caret-right"></i>下属日报</a></li>
  </ul>

上面我们在模板导航中添加了【我的日报】的url访问链接，同时我们也可以通过url中定义的name反向查询url地址： {% url 'name' %}，这样使用的好处是，当修改url地址后，只要url的name不变，就不用修改模板中的网址。

......
  <ul class="treeview-menu">
    <li><a href="{% url 'myreport'%} "><i class="fa fa-caret-right"></i>我的日报</a></li>
    <li><a href="#"><i class="fa fa-caret-right"></i>下属日报</a></li>
  </ul>

完成以上配置，运行系统，登陆后就可以通过，左侧的导航栏访问【我的日报】页面了

2、为导航菜单添加选中样式

我们想在点击页面导航菜单【我的日报】时，主菜单展开，同时【我的日报】菜单显示为选中状态：

修改sandboxOA/templates/base-left.html文件, 分别给父菜单【工作日报】和二级菜单【我的日报】的<li>标签添加id字段：

 <li class="treeview" id="DailyReport">
      <a href="#"><i class="fa fa-calendar"></i> <span>工作日报</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left pull-right"></i>
        </span>
      </a>
      <ul class="treeview-menu">
        <li id="MyReport"><a href="{% url 'myreport' %}"><i class="fa fa-caret-right"></i>我的日报</a></li>
        <li><a href="#"><i class="fa fa-caret-right"></i>下属日报</a></li>
      </ul>
 </li>

修改sandboxOA/templates/dailyreport/myreport.html文件，在{% block javascripts %} {% endblock %}模板标签中添加javascripts，通过id给导航菜单添加样式：

<script type="text/javascript">
    $(function () {
        $('#DailyReport').addClass('active');
        $('#MyReport').addClass('active');

    });
</script>

这样我们在点击页面导航【我的日报】时，【工作日报】主菜单会展开，同时【我的日报】菜单会显示为选中高亮状态

3、添加日程记录的模板配置：
实现效果：

在日历表上点击【添加】按钮，弹出日程添加窗口
输入日程内容后，点击【保存】按钮，添加日程到数据库，同时刷新页面，在日程表上显示最新日程数据创建日程添加模板：在sandboxOA/templates/dailyreport/目录下新建report_create.html文件，内容如下：

{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}

{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal" id="addForm" method="post">
            {% csrf_token %}
            <input type="hidden" name='user' value="{{ request.user.id }}"/>
            <p class="box-body">
            <fieldset>
                <div class="form-group has-feedback">
                    <label class="col-sm-2 control-label">日报类型</label>
                    <div class="col-sm-3">
                        <select class="form-control select2" style="width:100%;" name="category">
                            {% for category in category_all %}
                                <option value="{{ category.key }}">{{ category.value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <label class="col-sm-2 control-label">添加关注</label>
                    <div class="col-sm-3">
                        <select class="form-control select2" multiple="multiple" name="attention" data-placeholder="添加关注"
                                style="width: 100%;">
                            {% for attention in user_all %}
                            <option value="{{ attention.id }}"></option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label class="col-sm-2 control-label">开始时间</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control pull-right form_datetime" name="start_time" readonly >
                    </div>
                    <label class="col-sm-2 control-label">结束时间</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control pull-right form_datetime" name="end_time" readonly />
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label class="col-sm-2 control-label">报告内容</label>
                    <div class="col-sm-8">
                        <textarea class="form-control" name="content" rows="5"></textarea>
                    </div>
                </div>
                <p>
                    <small class="text-danger margin-l-5">* 上级和关注人可以查看本条报告内容</small>
                </p>
            </fieldset>

    <div class="box-footer ">

        <div class="row span7 text-center ">
            <button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
            <button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
        </div>
    </div>

    </form>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap-datetimepicker.js' %}"></script>
    <script type="text/javascript">

        $("#btnSave").click(function () {
            var data = $("#addForm").serialize();
            $.ajax({
                type: $("#addForm").attr('method'),
                url: "{% url 'myreport-create' %}",
                data: data,
                cache: false,
                success: function (msg) {
                    if (msg.result) {
                        layer.alert('数据保存成功！', {icon: 1}, function (index) {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert('数据保存失败,请将信息填写完整！', {icon: 5});
                        //$('errorMessage').html(msg.message)
                    }
                    return;
                }
            });
        });


        /*点取消刷新新页面*/
        $("#btnCancel").click(function () {
            window.location.reload();

        });

        /*input 时间输入选择*/
        $(".form_datetime").datetimepicker({
            language: 'zh',
            //minView: 'month',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            //format: 'yyyy-mm-dd hh:ss'
        }).on('changeDate', function (ev) {
            $(this).datetimepicker('hide');
        });

        // select2
        $(function () {
            //Initialize Select2 Elements
            $(".select2").select2();
        });
    </script>

{% endblock %}

4、添加日程记录：forms、view和url配置

添加sandboxOA/apps/dailyreport/forms.py文件，内容如下：

from django import forms
from .models import DailyReport


class DailyReportForm(forms.ModelForm):
    class Meta:
        model = DailyReport
        fields = '__all__'

说明：这里使用了ModelForm来对提交的数据进行验证，关于form验证的更多用法，可以查看官方文档。你也可以尝试下对日程数据开始和结束时间进行验证，保证输入的结束时间大于开始时间。
修改sandboxOA/dailyreport/views.py文件新增如下内容：

import json

from django.shortcuts import render
from django.views.generic.base import View
from django.http import HttpResponse
from django.contrib.auth import get_user_model

from system.mixin import LoginRequiredMixin
from .models import DailyReport
from .forms import DailyReportForm

User = get_user_model()


class MyReportView(LoginRequiredMixin, View):

    def get(self, request):
        return render(request, 'dailyreport/myreport.html')


class ReportCreateView(LoginRequiredMixin, View):

    def get(self, request):
        ret = dict()
        category_all = [{'key': i[0], 'value': i[1]} for i in DailyReport.cat_choices]
        user_all = User.objects.exclude(username__in=['admin', request.user.username])
        ret['category_all'] = category_all
        ret['user_all'] = user_all
        return render(request, 'dailyreport/report_create.html', ret)

    def post(self, request):
        res = dict(result=False)
        daily_report_form = DailyReportForm(request.POST)
        if daily_report_form.is_valid():
            daily_report_form.save()
            res['result'] = True
        return HttpResponse(json.dumps(res), content_type='application/json')

修改sandboxOA/sandboxOA/urls.py新增如下内容：

urlpatterns = [
    .......
    url(r'^myreport/create$', views.ReportCreateView.as_view(), name='myreport-create'),

]

说明：

category_all：日程分为三种类型：工作报告、项目记录、日程安排，在定义模型的时候使用了choices属性，在添加数据时，保持和后台定义的一致性，我们通过后台返回这三种类型，前端添加纪录的时候直接选择就可以了。如果你想要修改日程类型，只需要修改models.py中 “cat_choices”内容就可以了。
user_all：排除了admin系统默认管理员用户和本人登陆用户，用户添加日程的时候选择关注人。

5、为FullCalendar自定义按钮添加点击事件

添加事件的后逻辑和前端模板都写好了，现在我们需要在FullCalendar日历表上通过点击自定义按钮打开添加窗口，完成日程数据的添加操作。
按照下面操作修改sandboxOA/templates/dailyreport/myreport.html文件：

在{% block css %} {% endblock %} 标签中添加新的样式文件：

<link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
<link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">

在{% block javascripts %} {% endblock %} 标签中添加新的js文件：

<script src="{% static 'js/plugins/layer/layer.js' %}"></script>
<script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>

在{% block javascripts %} {% endblock %} 标签中的FullCalendar初始化配置前添加新的函数，实现添加日程的弹窗效果：

<script type="text/javascript">
    function doCreate() {
        layer.open({
            type: 2,
            title: '新建日报',
            shadeClose: false,
            maxmin: true,
            area: ['800px', '460px'],
            content: "{% url 'myreport-create' %}",
            end: function () {
                window.location.reload();
            }
        });
    }

    $(function () {
        //初始化FullCalendar
        $('#calendar').fullCalendar({
        ...略...

修改FullCalendar初始化配置中的自定义按钮事件，调用doCreate函数：

customButtons: {
    reportAddButton: {
        text: '添加',
        click: doCreate,
    },

},

重新运行下系统，点击【我的日报】日历中的【添加】按钮，添加新的日程数据（可以登陆django-admin后台，多添加几个用户，用来做日程数据的关联用户）：

6、日程数据的展示
到现在为止，日历表上展示的还是测试数据，我们需要在日历表上展示数据库中的日程数据，操作如下：

修改sandboxOA/apps/dailyreport/views.py中的 MyReportView：

class MyReportView(LoginRequiredMixin, View):

    def get(self, request):
        ret = dict()
        my_report_all = DailyReport.objects.filter(user=int(request.user.id))
        ret['my_report_all'] = my_report_all
        return render(request, 'dailyreport/myreport.html', ret)

修改sandboxOA/templates/dailyreport/myreport.html中FullCalendar初始化配置中的events内容：

events: [
    {% for my_report in my_report_all %}
        {
            id: '{{ my_report.id }}',
            title: '{{ my_report.content }}',
            start: '{{ my_report.start_time | date:"Y-m-d H:i"}}',
            end: '{{ my_report.end_time | date:"Y-m-d H:i"}}',
            {% if my_report.category == '0'  %}
                backgroundColor: '#0073b7',
            {% elif my_report.category == '1' %}
                backgroundColor: '#00a65a',
            {% else %}
                backgroundColor: '#dd4b39',
            {% endif %}

        },
    {% endfor %}

],

备注：FullCalendar中events可以直接接收json作为事件内容，使用上面写法只是为根据日程类型来自定义显示样式，完成以上配置，刷新页面，就可以看到我们自己添加的日程数据。
下一节内容：通过点击日历表中日期添加日程、查看日程详情、修改日程数据

知乎专栏：Django 学习小组
知乎专栏：SandBox
更多实战文档可关注知识星球：https://t.zsxq.com/a6IqBMr(微信中打开链接)
轻量级办公管理系统项目开源地址：RobbieHan/gistandard

weixin_39825045

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ui li 菜单点击添加下级_轻量级办公平台开发实录(12)：日程数据的添加和展示...

说明：文章中代码比较多，完整结构和代码可以查看最新版本：https://github.com/RobbieHan/sandboxOA1、补充：Django URL name介绍上节在sandboxOA/sandboxOA/urls.py文件中添加了工作日程访问的url，定义了name:urlpatterns = [ ...... url(r'^myreport/$', views...
复制链接

扫一扫