Django實戰1-許可權管理功能實現-08:組織架構修改和刪除

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、打開瀏覽器訪問:127.0.0.1:8000/system/b, 點擊表格後面操作欄裡面的鉛筆狀的按鈕,彈出彈窗口,查看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管理頁面,可以通過頭部複選框選中多條數據,然後點上面的刪除按鈕,進行批量刪除。點擊單條數據後面的刪除按鈕可以刪除單條記錄。

最新最全文檔,請關注我的知識星球: t.zsxq.com/a6IqBMr (在微信中打開鏈接)

本節文檔對應源碼版本: github.com/RobbieHan/sa

非常歡迎感興趣的朋友,到我的Github或知乎上做客,閑暇之餘給個贊或Star,贈人玫瑰手留余香

文檔配套項目地址:github.com/RobbieHan/sa

知乎專欄SandBox:zhuanlan.zhihu.com/sand

輕量級辦公管理系統項目開源地址:github.com/RobbieHan/gi

推薦閱讀:

TAG:Django(框架) | Python | 許可權管理 |