Djangoの戦闘の1-著作権管理機能-05:追加の組織構造

 

 

主な組織は、権利管理モジュール、スタッフの階層である、それはように、企業の組織構造、部門、チーム、であってもよいです。

達成する1つの新たな組織構造関数

1.1組織構造のテンプレートページ

組織構造テンプレートページ、ページは、ユーザーがアクセスしたときに、検索操作を、追加、変更、削除するために組織構造、組織構造を管理することです。
1、関連するすべてのテンプレート組織構造を格納するために使用される新しいフォルダsandboxMP /テンプレート/システム/構造
2を、作成したディレクトリ構造へのindex.html sandboxMP /テンプレート/コピー、名前の変更structure.html
3を、開いているだけのコピーstructure.htmlファイル、コード文字の内容を追加します。

{% block content %} <!-- Main content --> <section class="content"> 组织架构页:文字部分是新增内容,这里是组织架构的基础页面,有关组织架构的操作查询都是在这里完成的。 </section> <!-- /.content --> {% endblock %}

1.2組織ビューの基礎

図1に示すように、新しい文書sandboxMP /アプリケーション/システム/ views_structure.py、組織構造に関連するすべての操作はでviews_structure.pyに定義されたビュー。
2.作成したばかりの基本ビューviews_structure.pyファイル内の組織構造を定義します。

from django.views.generic.base import TemplateView

from .mixin import LoginRequiredMixin
 class StructureView(LoginRequiredMixin, TemplateView): template_name = 'system/structure/structure.html' 

1.3組織構造のアクセスURL

sandboxMP /アプリケーション/システム/ urls.pyを修正し、次の要素を追加します。

from . import views_structure

app_name = 'system'

urlpatterns = [
    '''原有内容省略' path('basic/structure/', views_structure.StructureView.as_view(), name='basic-structure'), ] 

プロジェクトを実行し、ページの組織構造にアクセスすることができますhttp://127.0.0.1:8000/system/basic/structure/

2組織構造を達成するための機能を追加

ビュー2.1組織構造を追加します。

ページがデータベース内に受信され、格納されたデータを追加するために送信され、レンダリングされたページを追加:機能ビューを追加すると、実装されている
以下の追加、1 sandboxMP /アプリケーション/システム/ forms.py修飾します:

from .models import Structure

class StructureForm(forms.ModelForm): class Meta: model = Structure fields = ['type', 'name', 'parent'] 

2、以下を追加し、sandboxMP /アプリケーション/システム/ views_structure.pyを変更します。

import json

from django.views.generic.base import View
from django.shortcuts import render from django.shortcuts import HttpResponse from .models import Structure from .forms import StructureForm  class StructureCreateView(LoginRequiredMixin, View): def get(self, request): ret = dict(structure_all=Structure.objects.all()) return render(request, 'system/structure/structure_create.html', ret) def post(self, request): res = dict(result=False) structure = Structure() structure_form = StructureForm(request.POST, instance=structure) if structure_form.is_valid(): structure_form.save() res['result'] = True return HttpResponse(json.dumps(res), content_type='application/json') 

2.2 URLの機能の設定を追加するための組織構造:

sandboxMP /アプリケーション/システム/ urls.pyを修正し、中にurlpatternsに新しいコンテンツを追加します。

urlpatterns = [
    '''原有内容省略'''
    path('basic/structure/create/', views_structure.StructureCreateView.as_view(), name='basic-structure-create'),
]

2.3の追加ページテンプレートの組織構造

ページの組織を追加し、ポップ・ページで、sandboxMP /テンプレート/ base_layer.html、結果ページを継承しました。

1、sandboxMP /テンプレート/システムにおける新たな組織構造/構造の内容は、テンプレートの追加:structure_create.html
2を、structure_create.html元のコンテンツを削除し、以下の内容を追加します。

{% extends 'base-layer.html' %} {% load staticfiles %} {% block css %} <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}"> {% endblock %} {% block main %} <div class="box box-danger"> <form class="form-horizontal" id="addForm" method="post"> {% csrf_token %} <div class="box-body"> <fieldset> <legend> <h4>组织架构信息</h4> </legend> <div class="form-group has-feedback"> <label class="col-sm-2 control-label">名称</label> <div class="col-sm-3"> <input class="form-control" name="name" type="text" /> </div> <label class="col-sm-2 control-label">类别</label> <div class="col-sm-3"> <select class="form-control" name="type"> <option value="unit">单位</option> <option value="department">部门</option> </select> </div> </div> <div class="form-group has-feedback"> <label class="col-sm-2 control-label">所属</label> <div class="col-sm-3"> <select class="form-control" name="parent"> <option></option> {% for stru in structure_all %} <option value={{ stru.id }}> {{ stru.name }} </option> {% endfor %} </select> </div> </div> </fieldset> </div> <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 type="text/javascript"> $("#btnSave").click(function () { var data = $("#addForm").serialize(); $.ajax({ type: $("#addForm").attr('method'), url: "{% url 'system:basic-structure-create' %}", data: data, cache: false, success: function (msg) { if (msg.result) { layer.alert('数据保存成功!', {icon: 1}, function (index) { parent.layer.closeAll(); //关闭所有弹窗 }); } else { layer.alert('数据保存失败', {icon: 5}); //$('errorMessage').html(msg.message) } return; } }); }); /*点取消刷新新页面*/ $("#btnCancel").click(function () { window.location.reload(); }); </script> {% endblock %}

上記の構成が完了し、プロジェクトを実行し、追加するページの組織構造にアクセスすることができます。http://127.0.0.1:8000/system/basic/structure/create/

2.4 [追加]ボタンを作成します

次に我々は、組織の管理ページにボタンを追加するボタン、データを追加するプロセスを呼び出すためにページを追加する必要があります。
1は、sandboxMP /テンプレート/システム/ structure.htmlを変更し、一時的なラベルのテキスト部分を削除し、もともと新しいコンテンツを追加し、書きました:

<!-- 以下内容添加到<section class="content">标签下 -->
<div id="devlist"> <div class="box box-primary" id="liebiao"> <div class="box-header"> <div class="btn-group pull-left"> <button type="button" id="btnCreate" class="btn btn-default"> <i class="glyphicon glyphicon-plus"></i>新增 </button> </div> <div class="btn-group pull-left">&nbsp</div> <div class="btn-group pull-left"> <button type="button" id="btnDelete" class="btn btn-default"> <i class="glyphicon glyphicon-trash"></i>删除 </button> </div> </div> <div class="box-body"> <table id="dtbList" class="display" cellspacing="0" width="100%"> <thead> <tr valign="middle"> <th><input type="checkbox" id="checkAll"></th> <th>ID</th> <th>名称</th> <th>类别</th> <th>所属</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <br> <br> </div> </div> </div> 

アクセス:http://127.0.0.1:8000/system/basic/structure/あなたはより多くの二つのボタンとヘッダのうち、組織の管理ページで見ることができます。 

ボタンの2.5結合事象

結果を実現:、組織構造を追加し、データ入力情報を保存し、結果を保存するために返すために、[追加]ボタン、ポップアップウィンドウをクリックします。ここでポップjQueryプラグイン:レイヤー(https://layer.layui.com/
1、変性sandboxMP /テンプレート/システム/ structure.html、{%負荷staticfiles%}ラベルの後ろに、次の内容を追加します。:

<!-- 引用layer样式文件 -->
{% block css %} <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}"> {% endblock %}

2、修改sandboxMP/templates/system/structure.html,在{% block javascripts %}{% endblock %}标签中添加下面内容:

<script src="{% static 'js/plugins/layer/layer.js' %}"></script> <script type="text/javascript"> $("#btnCreate").click(function () { layer.open({ type: 2, title: '新增', shadeClose: false, maxmin: true, area: ['800px', '400px'], content: "{% url 'system:basic-structure-create' %}", end: function () { } }); }); </script> 

通过上面操作,我们引用了layer的css文件和js文件,并通过按钮id (btnCreate)为按钮绑定了弹窗事件,调用添加页面,访问:http://127.0.0.1:8000/system/basic/structure/ , 点击【新增】按钮,效果如下:

输入组织架构数据,点击保存,数据将被保存到数据库中。

2.6 安装Navicat

本节开始需要多数据库操作了,为了方便查看数据库中的数据可以安装一个Navicat客户端,安装文件下载地址

链接:https://pan.baidu.com/s/1fvUBE9d8C-0lv9ClZmM0_Q 提取码:g35w 

1、安装完成后,打开 Navicat软件,依次选择【文件】→ 【新建连接】→ 【SQLite】,在弹出窗口输入连接名称,类型选择【现有的数据库文件】, 数据库文

件路径选择项目中的db.sqlite3,点击【确定】

2、在Navicat客户端窗口左侧双击刚刚添加的数据库【sandboxMP】,双击【main】后在右侧窗口就可以看到项目的数据表,打开system_structure表,就可以看到我们添加的数据:

 

おすすめ

転載: www.cnblogs.com/jameslove/p/10988311.html