1.Start APP, Create a new app named coffee
python manage.py startapp coffee
2.Installed APP, Edit settings.py
,insert coffee
to INSTALLED_APPS
INSTALLED_APPS = [
...
'sadmin.commons',
'sadmin.accounts',
'sadmin.project',
'coffee',
]
3.Add Model, Add Production
model to coffee/models.py file
from django.db import models
from sadmin.commons.backends.modles import UserBaseModel
class Production(UserBaseModel):
name = models.CharField(max_length=32, unique=True, verbose_name='名称')
code = models.CharField(max_length=16, unique=True, verbose_name='代码')
def __str__(self):
return self.name
class Meta:
permissions = (
("production_select", "产品查看权限"),
("production_change", "产品修改权限"),
)
4.Add View, Add ProductionList
and ProductionDetail
class to coffee/views.py file
from sadmin.commons.options import ListCreateView, RetrieveUpdateDestroyView
class ProductionList(ListCreateView):
model = Tag
template = 'coffee/production.index.html'
permission = {'get': 'coffee.production_select', 'post': 'coffee.production_change'}
class ProductionDetail(RetrieveUpdateDestroyView):
model = Tag
permission = {'get': 'coffee.production_select', 'put': 'coffee.production_change', 'delete': 'coffee.production_change'}
5.Add Template, edit coffee/templates/coffee/production.index.html file
{% extends "base.html" %}
{% block css %}
<link rel="stylesheet" href="/static/plugins/DataTables/datatables.min.css">
{% endblock %}
{% block breadcrumb %}
{% if perms.coffee.production_change %}
<button class="btn btn-success" type="button" onclick="createForm()"><i class="fa fa-plus"></i> 新建</button>
{% endif %}
{% endblock %}
{% block content %}
<div class="card mb-4">
<div class="card-body">
<table class="table table-striped" id="id_table" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
{% if perms.coffee.production_change %}
<th>操作</th>
{% endif %}
</tr>
</thead>
</table>
</div>
</div>
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalForm_title"></h5>
<button class="btn-close" type="button" data-coreui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="tab-content">
<form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
<input type="text" autocomplete="off" id="form_id" value="0" hidden>
<div class="row mb-3">
<label class="col-2 col-form-label text-end">* 名称</label>
<div class="col-9">
<input type="text" autocomplete="off" class="form-control" id="form_name" name="name" required
placeholder="请输入名称,命名应见名知意">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-coreui-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="/static/plugins/DataTables/datatables.min.js"></script>
<script>
$('#page_header').text('Production管理');
$('#page_header_descript').text('');
// 加载表格
var table = $('#id_table').DataTable({
"ajax": {
"url": window.location.pathname,
"data": function (d) {
// 去掉columns开头的参数
for(var key in d){
if (key.indexOf("columns")==0||key.indexOf("order")==0) {
delete d[key];
}
}
}
},
"columns": [
{"data": "id"},
{"data": "name"},
{% if perms.coffee.production_change %}
{
"data": "id",
"render": function (data, type, row) {
return '<button class="btn btn-warning btn-sm" onclick="updateForm('+row.id+')"><i class="fa fa-pencil-square-o"></i> 编辑</button> ' +
'<button class="btn btn-danger btn-sm" onclick="deleteForm("'+ window.location.pathname +'", '+row.id+')"><i class="fa fa-trash"></i> 删除</button>'
}
}
{% endif %}
]
});
// 点击创建时的表单信息
function createForm() {
$('#modalForm_title').text('添加Production');
$('#modalForm_Content').trigger("reset");
$('#modalForm').modal('show');
}
// 点击编辑时的表单信息
function updateForm(id) {
$('#modalForm_title').text('修改Production');
$('#modalForm_Content').trigger("reset");
var data = {
"format": "json",
}
$.get(window.location.pathname + id + "/", data, function(data) {
if (data.state) {
$.each(data.data, function (k, v) {
$('#form_' + k).val(v);
});
$('#modalForm').modal('show');
} else {
toastr.error(data.message);
}
});
}
// 使用ajax submit提交表单数据
$('#modalForm_Content').submit(function (event) {
event.preventDefault();
if (confirm("确认提交这些数据吗?")) {
var formid = $('#form_id').val();
var params = $('#modalForm_Content').serializeJson();
if (formid == "0") {
$.post(window.location.pathname, JSON.stringify(params), function(data, status){
if (data.state) {
table.draw(false);
toastr.success(data.message);
$('#modalForm').modal('hide');
} else {
toastr.error(data.message)
}
});
} else {
params.id = formid;
$.put(window.location.pathname + formid + "/", JSON.stringify(params), function(data, status){
if (data.state) {
table.draw(false);
toastr.success(data.message);
$('#modalForm').modal('hide');
} else {
toastr.error(data.message)
}
});
}
}
});
</script>
{% endblock %}
6.Add URL, Add production/
and production/<int:pk>/
URL to coffee/views.py file
from . import views
from django.urls import path
urlpatterns = [
path('production/', views.ProductionInstanceList.as_view(), name='production-list-url'),
path('production/<int:pk>/', views.ProductionInstanceDetail.as_view(), name='production-detail-url'),
]
Insert coffee path to webapp/urls.py file
from django.urls import path, include, re_path
urlpatterns = [
...
path('coffee/', include('coffee.urls')),
]
7.Makemigrations & Migrate
python manage.py makemigrations
python manage.py migrate
8.Runserver