Django之路：模态对话框的删除、编辑（6）

1.班级的删除（通过模态对话框和ajax）
在classes.html中添加模态对话框及点击事件，下面编辑的也是这样

添加删除的模态对话框及模态对话框的css

<style>
       .delModal{
            z-index: 101;    {# 这个值越大，越在前面 #}
            position: fixed;
             left: 50%;
            top: 50%;
            height: 300px;  {#高度#}
            width: 400px;{#宽度#}
            background-color: white;{#背景颜色#}
            margin-left: -200px; {#左移动200#}
            margin-top: -150px;
        }
</style>

{# 删除对话框 #}
<div id="delModal" class="delModal hide">
    <h3>是否确认删除班级？</h3>
         <p>班级ID：
            <input id="delId" type="text" name="class_id"  disabled><br/>   {# 班级ID不可修改 disabled#}
            <a>班级名称：</a>
            <input id="delTitle" type="text" name="title" disabled>
         </p>
            <input onclick="delAjaxSend()" type="submit" value="删除">
            <input onclick="exitModal()" type="submit" value="取消">
</div>

点击事件显示模态对话框的函数

     {# 显示删除对话框 #}
    function delModal(thi) {     {# 显示删除对话框 #}
        document.getElementById('shadow').classList.remove('hide');{# 先找到遮罩层 对应的ID值id="shadow" ,然后把hide去掉#}
        document.getElementById('delModal').classList.remove('hide');
        var row = $(thi).parent().prevAll();
        console.log(row);
        var content = $(row[0]).text();
        var contentid = $(row[1]).text();
        $('#delTitle').val(content);
        $('#delId').val(contentid);
    }

var row = $(thi).parent().prevAll(); ///prevAll()表示上面所以的标签，获取当前标签的上级标签下全部的内容，获取出来是一个数组，可以通过r[0],r[1]赋值出来
var content = $(row[0]).text(); //这个是赋值
var contentid = $(row[1]).text();
$(’#delTitle’).val(content); /把获取到列表的数据，显示在div对应id= ‘’的编辑框中/
$(’#delId’).val(contentid);

点击提交按钮执行函数

    {# Ajax删除 #}
     function delAjaxSend() {
         var nid = $('#delId').val();
          $.ajax({
            url:'/Ajax_del_class/',   {# 提交的路径 #}
            type:'POST',        {# 提交的方式 #}
            data:{'nid':nid},
            success:function (arg) {
                arg = JSON.parse(arg);
                //console.log(arg);
                if (arg.status){
                    location.reload();//表示当前页面刷新
                }else {
                    alert(arg.message);
                }
            }
        }){# 怎么提交 #}
     }

发送到服务端，所以要先到urls.py增加路由

path('Ajax_del_class/',views.Ajax_del_class),

views.py增加函数

#删除
def Ajax_del_class(request):
    ret = {'status':True,'message':None}
    try:     #异常处理的函数
        nid = request.POST.get('nid')
        sqlheper.add_list('delete from class where id=%s', [nid, ])
    except Exception as e :     #异常处理的函数
        ret['status'] = False
        ret['message'] = "处理异常"

    import json
    return HttpResponse(json.dumps(ret))

1.班级的编辑（通过模态对话框和ajax）
编辑对话框

  .editModal{
            z-index: 101;    {# 这个值越大，越在前面 #}
            position: fixed;
             left: 50%;
            top: 50%;
            height: 300px;  {#高度#}
            width: 400px;{#宽度#}
            background-color: white;{#背景颜色#}
            margin-left: -200px; {#左移动200#}
            margin-top: -150px;
        }
        
{# 对话框编辑#}
<div id="editModal" class="editModal hide" >    {# 模态对话框的添加#}
            <h3>编辑班级</h3>
        <p>当前班级DI：
            <input id="eidtId" type="text" name="id"  disabled><br/>   {# 班级ID不可修改 disabled#}
         <a>班级名称：</a>
            <input id="eidtTitle" type="text" name="title">
        </p>
        <input type="button" value="提交" onclick="editAjaxSend();"><span id="errormsg"></span>
{#        </form>#}
        <input type="button" value="取消" onclick="exitModal();">
</div>

点击对话框编辑执行的按钮绑定的执行函数

    {# 显示编辑对话框 #}
     function editModal(ths) {
         document.getElementById('shadow').classList.remove('hide');{# 先找到遮罩层 对应的ID值id="shadow" ,然后把hide去掉#}
         document.getElementById('editModal').classList.remove('hide');
         /*
         * 1.获取当前点击标签，
         * 2.当前标签夫级标签，再找其上方标签
         * 3.获取班级当前行班级名称，赋值到编辑对话框中
         * */

         var row= $(ths).parent().prevAll();   /*prevAll()表示上面所以的标签*/
         var contentid = $(row[0]).text();
         var content = $(row[1]).text();

         $('#eidtId').val(content);      /*把获取到列表的数据，显示在div对应id= ‘’的编辑框中*/
         $('#eidtTitle').val(contentid);
     }

点击提交执行的函数

   {# Ajax编辑 #}
    function editAjaxSend() {
        var nid = $('#eidtId').val();
        var content =$('#eidtTitle').val();  /*获取到用户输入的值*/

          $.ajax({
            url:'/modal_edit_class/',   {# 提交的路径 #}
            type:'POST',        {# 提交的方式 #}
            data:{'nid':nid,'content':content},
            success:function (arg) {
                //arg字符串类型
                {#JSON.parse(字符串)  转化成  对象#}
                {#JSON.stringify(对象) 转化成 字符串#}
                arg = JSON.parse(arg);
                //console.log(arg);
                if (arg.status){
                    {# alert('添加成功');  弹出一个框框提示添加成功或失败 #}
                    {#location.href = "/classes/"; {# 返回跳转一个页面，很多地方都适合使用 #}
                    location.reload();//表示当前页面刷新
                }else {
                    alert(arg.message);
                     {#$('#errormsg').text(arg);#}
                }
            }
        }){# 怎么提交 #}
    }

urls.py增加

path('modal_edit_class/',views.modal_edit_class),

views.py

#编辑
def modal_edit_class(request):
    ret = {'status':True,'message':None}
    try:     #异常处理的函数
        nid = request.POST.get('nid')
        content = request.POST.get('content')

        if len(content)>0:
            sqlheper.add_list('update class set title=%s where id=%s', [content, nid, ])
            # return redirect('/classes/')  通过ajax返回什么都不会跳转，本质上，它只返回字符串，想要跳转，只能自己写JS跳转
            # return HttpResponse("ok")
        else:
            return HttpResponse('标题不能为空')
    except Exception as e :     #异常处理的函数
        ret['status'] = False
        ret['message'] = "处理异常"

   	import json
    return HttpResponse(json.dumps(ret))   #用json 把ret(字典)转换成字符串，返回到页面

############################

1.对话框
单表
添加
编辑
删除

		PS：a.js阻止默认事件的发送
			b.location.reload();重新加载当前页面（刷新）
			c.HttpResponse(json.dumps(xxx))把一个字典放进去，然后序列化
			d.JSON.parse()   反序列化

绑定事件
上面的都是通过 οnclick=“exitModal()” 来绑定事件
下面一节使用 进行绑定