1 组织架构的修改
实现思路：
1、请求：前台通过修改按钮，请求修改页面，同时传递修改数据的id到后台，后台通过reques.GET方法获取id，返回数据，并将数据渲染到修改页面
2、执行：前台修改完数据后，提交保存，后台通过ID获取数据实例，通过form.is_valid()成功验证数据想信息后，调用form.save()方法将数据保存到数据库。
1.1 组织架构修改视图
修改和添加操作很类似，添加是在数据库中插入一条新的纪录，修改是修改数据库已有实例，因此组织架构修改视图，可以和添加使用同一个视图。
打开sandboxMP/apps/system/views_structure.py, 修改StructureCreateView视图：
from django.shortcuts import get_object_or_404
class StructureCreateView(LoginRequiredMixin, View):
def get(self, request):
ret = dict(structure_all=Structure.objects.all())
# 判断如果request.GET中包含id,则返回该条数据信息
if ‘id‘ in request.GET and request.GET[‘id‘]:
structure = get_object_or_404(Structure, pk=request.GET[‘id‘])
ret[‘structure‘] = structure
return render(request, ‘system/structure/structure_create.html‘, ret)
def post(self, request):
res = dict(result=False)
# 如果 request.POST中包含id则查找该实例，并传递给ModelForm关键字参数instance，通过调用save()方法，将修改信息保存到该实例。
if ‘id‘ in request.POST and request.POST[‘id‘]:
structure = get_object_or_404(Structure, pk=request.POST[‘id‘])
# 如果request.POST中ID值不存在，则使用空的模型作为instance关键参数，调用save()方法，保存新建的数据。
else:
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‘)
组织架构修改的URL不用变动，修改数据时，直接调用create的url即可。
1.2 模板的配置
打开sandboxMP/templates/system/structure.html，查看下datatables表格初始化的js内容(在{% block javascripts %}标签内容)，在表格的最后一列定义了一组按钮，内容如下：
{% block javascripts %}
...前面内容省略...
{
data: "id",
width: "12%",
bSortable: "false",
render: function (data, type, row, meta) {
var ret = "";
var ret = "<button title=‘详情-编辑‘ onclick=‘doUpdate("
+ data + ")‘><i class=‘glyphicon glyphicon-pencil‘></i></button>";
ret = ret + "<button title=‘关联用户‘ onclick=‘doAddUser("
+ data + ")‘><i class=‘glyphicon glyphicon-user‘></i></button>";
ret = ret + "<button title=‘删除‘ onclick=‘doDelete("
+ data + ")‘><i class=‘glyphicon glyphicon-trash‘></i></button>";
return ret;
}
}
...后面内容省略...
{% endblock %}1、在表格初始化的时候，定义了一组按钮，其中【title=‘详情-编辑‘】的按钮就是我们修改数据的按钮，在点击时调用了doUpdate()函数，并将并通过data变量，将id传递给该函数。
2、在structure.html模板中{% block javascripts %} 标签下添加doUpdate()函数：
<script type="text/javascript">
$("#btnCreate").click(function () {
‘‘‘原有内容省略‘‘‘
});
// 下面是新增的 doUpdate函数，添加在$("#btnCreate")代码段后面。
function doUpdate(id) {
layer.open({
type: 2,
title: ‘编辑‘,
shadeClose: false,
maxmin: true,
area: [‘800px‘, ‘400px‘],
content: ["{% url ‘system:basic-structure-create‘ %}" + ‘?id=‘ + id, ‘no‘],
end: function () {
oDataTable.ajax.reload();
}
});
}
// 新增内容结束
</script>
3、运行Debug模式，在下图位置打上断点:
4、打开浏览器访问：http://127.0.0.1:8000/system/basic/structure/， 点击表格后面操作栏里面的铅笔状的按钮，弹出弹窗口，查看pycharm的Debug数据：
可以看到，前端通过编辑按钮，调用doUpdate()函数，将组织架构id传到后台，后台通过id查询到该实例数据。
5、按F8完成Debug，这时系统页面已经成功调用添加的模板页，但是页面上并没有数据，我们想要修改数据，还需要将查询到的实例渲染到添加模板，打开sandboxMP/templates/system/structure/structure_create.html，渲染实例数据（原有代码不变，具体修改内容请查看注释）：
<!--注释1：增加input标签，type属性为hidden，value值是structure.id，用来向后台POST提交数据时，传递id参数-->
<input type="hidden" name="id" value="{{ structure.id }}" />
<div class="form-group has-feedback">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-3">
<!--注释2: 添加value值-->
<input class="form-control" name="name" type="text" value="{{ structure.name }}" />
</div>
<label class="col-sm-2 control-label">类别</label>
<div class="col-sm-3">
<select class="form-control" name="type">
<!--注释3: 添加option选项，渲染组织架构类型数，组织架构type字段是choices，所以这里想要显示具体内容需要使用get_type_display-->
<option value={{ structure.type }}> {{ structure.get_type_display|default:"--类别--" }} </option>
<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">
<!--注释4：新增option，parent是组织架构外键，保存到数据库里的是parent_id, 显示在页面上的是structure.parent.name-->
<option value={{ structure.parent_id|default_if_none:"" }}> {{ structure.parent.name|default:"" }}
<option></option>
{% for stru in structure_all %}
<option value={{ stru.id }}> {{ stru.name }} </option>
{% endfor %}
</select>
</div>
</div>
6、去掉原来的Debug断点，访问structure页面点击修改按钮，就可以看到弹窗中已经渲染了我们点击的数据实例信息，修改数据信息点击【保存】完成数据修改操作。
当然，你也可以通过后台去Debug一下查看数据修改提交的过程。
2 组织架构的删除
组织架构删除功能需支持批量删除和单条数据删除。
2.1 组织架构删除视图
打开sandboxMP/apps/system/views_structure.py，添加删除视图：
class StructureDeleteView(LoginRequiredMixin, View):
def post(self, request):
ret = dict(result=False)
if ‘id‘ in request.POST and request.POST[‘id‘]:
id_list = map(int, request.POST[‘id‘].split(‘,‘))
Structure.objects.filter(id__in=id_list).delete()
ret[‘result‘] = True
return HttpResponse(json.dumps(ret), content_type=‘application/json‘)
思路：
1、通过request.POST方法获取需要删除的实例数据id信息，组合id列表；
2、通过Django的QuerySet中filter()方法，查找id列表中的所有数据，然后调用delete()方法删除数据。
2.2 组织架构删除URL配置
修改sandboxMP/apps/system/urls.py， 添加新的url:
urlpatterns = [
‘‘‘原有内容省略‘‘‘
path(‘basic/structure/delete/‘, views_structure.StructureDeleteView.as_view(), name=‘basic-structure-delete‘),
]
2.3 模板配置
在sandboxMP/templates/system/structure/structure.html模板中{% block javascripts %} 标签下添加如下内容：
<script type="text/javascript">
$("#btnCreate").click(function () {
‘‘‘原有内容省略‘‘‘
});
// 新添加内容，添加在$("#btnCreate")代码段后面。
//checkbox全选
$("#checkAll").on("click", function () {
if ($(this).prop("checked") === true) {
$("input[name=‘checkList‘]").prop("checked", $(this).prop("checked"));
$(‘#example tbody tr‘).addClass(‘selected‘);
} else {
$("input[name=‘checkList‘]").prop("checked", false);
$(‘#example tbody tr‘).removeClass(‘selected‘);
}
});
//批量删除
$("#btnDelete").click(function () {
if ($("input[name=‘checkList‘]:checked").length == 0) {
layer.msg("请选择要删除的记录");
return;
}
var arrId = new Array();
$("input[name=‘checkList‘]:checked").each(function () {
//alert($(this).val());
arrId.push($(this).val());
});
sId = arrId.join(‘,‘);
layer.alert(‘确定删除吗？‘, {
title: ‘提示‘
, icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
, time: 0 //不自动关闭
, btn: [‘YES‘, ‘NO‘]
, yes: function (index) {
layer.close(index);
$.ajax({
type: "POST",
url: "{% url ‘system:basic-structure-delete‘ %}",
data: {"id": sId, csrfmiddlewaretoken: ‘{{ csrf_token }}‘},
cache: false,
success: function (msg) {
if (msg.result) {
layer.alert("操作成功", {icon: 1});
oDataTable.ajax.reload();
} else {
//alert(msg.message);
layer.alert("操作失败", {icon: 2});
}
return;
}
});
}
});
});
//删除单个数据
function doDelete(id) {
layer.alert(‘确定删除吗？‘, {
title: ‘提示‘
, icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
, time: 0 //不自动关闭
, btn: [‘YES‘, ‘NO‘]
, yes: function (index) {
layer.close(index);
$.ajax({
type: "POST",
url: "{% url ‘system:basic-structure-delete‘ %}",
data: {"id": id, csrfmiddlewaretoken: ‘{{ csrf_token }}‘}, //防止post数据时报 csrf_token 403
cache: false,
success: function (msg) {
if (msg.result) {
layer.alert(‘删除成功‘, {icon: 1});
oDataTable.ajax.reload();
} else {
//alert(msg.message);
layer.alert(‘删除失败‘, {icon: 2});
}
return;
}
});
}
});
}
//新增内容结束
</script>
完成以上配置，访问structure管理页面，可以通过头部复选框选中多条数据，然后点上面的删除按钮，进行批量删除。点击单条数据后面的删除按钮可以删除单条记录。
原文地址：https://www.cnblogs.com/jameslove/p/11043752.html