django用Bootstrap 模态框在同一页面实现增删改查

python 复制代码

from django.db import models

# Create your models here.
class Department(models.Model):
    title = models.CharField(verbose_name="部门名称", max_length=32)

    def __str__(self):
        return self.title


class UserInfo(models.Model):
    username = models.CharField(verbose_name="员工姓名",max_length=32)
    password = models.CharField(verbose_name="登陆密码",max_length=32,default='123456')
    gender_choice = (
        (1,"男"),
        (2,"女")
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choice)
    salary = models.DecimalField(verbose_name="收入", max_digits=10, decimal_places=2, default=0)
    phone = models.CharField(verbose_name="电话号码", max_length=11, default=12312312312)
    create_time = models.DateField(verbose_name="入职日期")
    # CASCADE：级联删除  SET_NULL:置空, null=True:数据表字段允许为空,blank=True:表单提交字段允许为空
    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.SET_NULL, null=True, blank=True)
    role_choice = (
        (1,"员工"),
        (2,"管理员")
    )
    role = models.SmallIntegerField(verbose_name="身份",choices=role_choice)
    avatar=models.CharField(verbose_name="头像",null=True,blank=True,max_length=128)

    def __str__(self):
        return self.username

views.py

python 复制代码

class DepartMnet(forms.ModelForm):
    class Meta:
        model = models.Department
        fields = "__all__"

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 修改生成的input标签的样式
        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control"}

class UserInfoform(forms.ModelForm):
    password = forms.CharField(disabled=True,label='密码框',initial='123456')
    class Meta:
        model = models.UserInfo
        #fields = "__all__"
        exclude=['avatar']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 修改生成的input标签的样式
        for name, field in self.fields.items():
            #field.widget.attrs = {"class": "form-control"}
            widget=field.widget
            if isinstance(widget,(Select,SelectMultiple)):
                widget.attrs['class']='form-control'
            else:
                widget.attrs['class'] = 'form-control'
    #扣子方法
    def clean_password(self):
        password = self.cleaned_data.get('password')
        password=md5(password)
        return password
    def clean_username(self):
        username = self.cleaned_data.get('username')
        exists=models.UserInfo.objects.exclude(id=self.instance.pk).filter(username=username).exists()
        if exists:
            raise ValidationError('该用户已存在')
        return username

def departmentlist(request):
    department=models.Department.objects.all()
    json_data = serializers.serialize('json', department)  # 将查询结果进行json序列化
    return HttpResponse(json_data, content_type="application/json")  # 返回json数据


def admin(request):
    data_dict={}
    search=request.GET.get('search')
    gender=request.GET.get('gender')
    depart=request.GET.get('depart')
    if search:
        data_dict['username__contains']=search
    if gender:
        data_dict['gender']=gender
    if depart:
        data_dict['depart']=depart

    department=models.Department.objects.all()

    form = DepartMnet()
    userform=UserInfoform()
    userlist = models.UserInfo.objects.filter(**data_dict)
    data =PageData(request,userlist)
    # userlist = models.UserInfo.objects.filter(username__contains='张三',gender=1)
    content = {
        "form":form,
        'department':department,
        "gender": models.UserInfo.gender_choice,
        'userlist':data.page_queryset,
        'userform':userform,
        'page_str':data.page_html()

    }
    return render(request, "admin/admin.html",content)



@csrf_exempt
def add_depart(request):
    form = DepartMnet(data=request.POST)
    if form.is_valid():
        form.save()
        return JsonResponse({"status":True})
    return JsonResponse({"status": False, "error":form.errors})

@save_url_name
@csrf_exempt
def add_userinfo(request):
    form = UserInfoform(data=request.POST)
    if form.is_valid():
        form.save()
        if hasattr(request,'url_mate'):
            models.LogDate.objects.create(**request.url_mate)
        return JsonResponse({"status":True})
    return JsonResponse({"status": False, "error":form.errors})

def userinfo_view(request):
    id = request.GET.get('id')
    userinfo = models.UserInfo.objects.filter(id=id).values("username","password","gender","salary","phone","create_time","depart","role").first()
    if userinfo :
        result = {
             "status": True,
             "data": userinfo
         }
        return JsonResponse(result)
    else:
        return JsonResponse({"status": False, "error":"没有这条记录"})


@csrf_exempt
def userinfo_update(request,id):
    #id=request.GET.get('id')
    userinfo=models.UserInfo.objects.filter(id=id).first()
    form=UserInfoform(data=request.POST,instance=userinfo)
    if form.is_valid():
        form.save()
        return JsonResponse({"status": True})
    return JsonResponse({"status": False, "error": form.errors})

@click_url_name
def userinfo_delete(request):
    try:
        models.UserInfo.objects.get(id=request.GET.get('id')).delete()
        return JsonResponse({"status": True})
    except:
        return JsonResponse({"status": False, "error":'操作失败，请重试'})

admin.html

python 复制代码

{% extends "layout_admin/layout_admin.html" %}
{% load static %}
{%  block css %}
    <link rel="stylesheet" href="{% static 'layui-v2.13.8/layui/css/layui.css' %}">
     <style>
        #departmentlist{
            position: absolute;
            top:100px;
            left:50%;
            width: 160px;
            display: none;
            z-index: 99;
        }
        .crm-card{
            margin-top: 5px;
        }

     </style>
{% endblock %}
{% block content %}
    <div id="crm-admin-content">


            <button class="btn btn-success" id="btn-add">创建部门</button>
            <button class="btn btn-success" id="btn-department">查看部门</button>
            <button class="btn btn-success" id="btn-adduser">新建员工</button>


        <!--搜索框-->
        <div class="crm-card">
            <form method="get">
                <div class="row"  style="display: flex">
                         <input type="text" name="search" class="form-control">
                         <select name="gender">
                             <option value="">请选择性别</option>
                             {% for item in gender %}
                             <option value="{{ item.0 }}">{{ item.1 }}</option>
                             {% endfor %}
                         </select>
                         <select name="depart">
                             <option value="">请选择部门</option>
                             {% for item in department %}
                             <option value="{{ item.id }}">{{ item.title }}</option>
                             {% endfor %}
                         </select>
                         <button type="submit">🔍</button>
                </div>
            </form>
        </div>
        <!--新增部门-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="crm-card">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加部门信息</h4>
                        </div>
                        <div class="modal-body">
                            <form action="" id="formDepart">
                                {% for item in form %}
                                    {{ item }}
                                    <span style="color: red"></span>
                                {% endfor %}
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-success" id="btnSave">保存</button>
                        </div>
                    </div>
                </div>
            </div>
           <!--部门列表-->
          <div class="crm-card" id="departmentlist">
              <table class="table table-striped">
                  <thead>
                     <tr>
                         <td>部门名称</td>
                     </tr>
                  </thead>
                  <tbody>
                     {% for item in department %}
                         <tr>
                            <td>{{ item }}</td>
                         </tr>
                     {% endfor %}
                  </tbody>
              </table>

          </div>

         <!--员工列表-->
         <div class="crm-card"  id="userlist">
              <table class="table table-striped">
                  <thead>
                     <tr>
                         <td>名称</td>
                         <td>性别</td>
                         <td>性别</td>
                         <td>收入</td>
                         <td>电话</td>
                         <td>入职时间</td>
                         <td>所属部门</td>
                         <td>用户身份</td>
                         <td>操作</td>
                     </tr>
                  </thead>
                  <tbody>
                     {% for item in userlist %}
                         <tr>
                             <td>{{ item.username }}</td>
                             <td>*** <button class="editpassword btn btn-info " uid="{{ item.id }}">✏️</button></td>
                             <td>{{ item.get_gender_display }}</td>
                             <td>{{ item.salary }}</td>
                             <td>{{ item.phone }}</td>
                             <td>{{ item.create_time }}</td>
                             <td>{{ item.depart }}</td>
                             <td>{{ item.get_role_display }}</td>
                             <td>
                                 <button class="userinfoedit btn btn-info " uid="{{ item.id }}">✏️</button>
                                 <button class="userinfodel btn btn-info" uid="{{ item.id }}">🗑️</button>
                             </td>
                         </tr>
                     {% endfor %}
                  </tbody>
              </table>
              <!--分页-->
              <nav aria-label="Page navigation">
                  <ul class="pagination" style="display: flex">

                      {{ page_str }}


                  </ul>
                </nav>
          </div>
         <!--添加员工-->
          <div class="modal fade" id="userinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="crm-card">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加员工信息</h4>
                        </div>
                        <div class="modal-body">
                            <form action="" id="formUser">
                                {% for item in userform %}
                                    <div class="col-sm-6">
                                    <label for="">{{ item.label }}</label>
                                        {{ item }}
                                    <span style="color: red"></span>
                                    </div>
                                {% endfor %}
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-success" id="btnSaveUser">保存</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <!--修改密码-->
    <div class="modal fade" id="pwd_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="crm-card">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                        </div>
                        <div class="modal-body">
                            <form action="" id="formpassword">
                                <input type="text" name="password" class="form-control">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-success" id="formpasswordedit">保存</button>
                        </div>
                    </div>
                </div>
            </div>
{% endblock %}

{% block js %}
    <script src="{% static 'layui-v2.13.8/layui/layui.js' %}"></script>
    <script>
         document.getElementById('l1').classList.add('active')
         layui.use(function(){
          var laydate = layui.laydate;
          // 渲染
          laydate.render({
            elem: '#id_create_time'
          });
        });
         var user_add_edit=undefined;
         var pwd_uid=undefined
        $(function () {
            btnAdd();
            saveDepartment();
            //添加修改员工信息
            bindBtnSaveEvent();
            //编辑员工信息  获取信息
            editgetUser();
            //删除员工
            userinfo_del();
            //修改密码
            pwd_edit();
        })



        function btnAdd() {
            $("#btn-add").click(function () {
                $("#myModal").modal("show")
            })
            $('#btn-department').click(function (){
                 $('#departmentlist').toggle()
            })
            $('#btn-adduser').click(function(){
                $("#userinfo").modal("show")
            })
            $(document).on('click',function(e){
                 $btn_department = $('#btn-department')
                 $departmentlist  =$('#departmentlist')
                //如果点击其他地方，窗口隐藏
                 if(!$btn_department.is(e.target) && !$departmentlist.is(e.target) && $departmentlist.has(e.target).length===0){
                    $departmentlist.hide(500)
                 }
            });
            $('#btn-adduser').click(function(){
                user_add_edit=undefined;
                document.getElementById('formUser').reset();
                //$('#formUser').find('input').val('');
                //$('#formUser').find('select').val('');
                $('#formUser').find('span').text('');
                $('#userinfo').modal('show')
            })
        }

        function saveDepartment() {
            $("#btnSave").click(function(){
                $.ajax({
                    url:"/admin/add/depart/",
                    type:"post",
                    data:$("#formDepart").serialize(),
                    dataType:"JSON",
                    success: function(res) {
                        if(res.status){
                            console.log("添加成功")
                            location.reload()
                        }else {
                            console.log("添加失败")
                            $.each(res.error,function (name,data){
                                $('#id_'+name).next().text(data[0])
                            })
                        }
                    }
                })
            })
        }
        function bindBtnSaveEvent(){
            $('#btnSaveUser').click(function(){
                if(user_add_edit){
                    editUser()
                }else{
                    addUser()
                }
            })
        }
        function  editgetUser(){
            $('.userinfoedit').click(function (){
                $('#formUser').find('span').html('');
                id=$(this).attr('uid')
                $.ajax({
                     url:'/admin/get/userinfo/',
                     type:'get',
                     data:{id:id},
                     success:function (res){
                         if(res.status) {
                             $.each(res.data, function (name, data) {
                                 $('#id_' + name).val(data)
                             })
                             $('#userinfo').modal('show')
                         }else{
                             alert(res.error)
                         }

                     }
                })
                 user_add_edit=id
            })

        }
        function addUser(){
                $.ajax({
                    url:"/admin/add/userinfo/",
                    type:"post",
                    data:$("#formUser").serialize(),
                    dataType:"JSON",
                    success: function (res) {
                        if(res.status){
                            console.log("添加成功")
                            location.reload()
                        }else {
                            console.log("添加失败")
                            $.each(res.error,function (name,data){
                                $('#id_'+name).next().text(data[0])
                                $("#id_"+name).addClass("error").attr("placeholder","字段不能为空")
                            })
                        }
                    }
                })
        }
        function  editUser(){
            var id=user_add_edit;
             $.ajax({
                    url:"/admin/update/userinfo/"+id+'/',
                    type:"post",
                    data:$("#formUser").serialize(),
                    dataType:"JSON",
                    success: function (res) {
                        if(res.status){
                            console.log("修改成功")
                            location.reload()
                        }else {
                            console.log("修改失败")
                            $.each(res.error,function (name,data){
                                $('#id_'+name).next().text(data[0])
                                $("#id_"+name).addClass("error").attr("placeholder","字段不能为空")
                            })
                        }
                    }
                })
        }
        function  userinfo_del(){
            $('.userinfodel').click(function (){
                    const cf=window.confirm("确认要删除吗？")
                    if (cf===true){
                        id=$(this).attr('uid')
                        $.ajax({
                            url:'/admin/del/userinfo?id='+id,
                            type:'get',
                            success:function (res){
                                if(res.status){
                                    console.log("删除成功")
                                    location.reload()
                                }else {
                                    alert(res.error)
                                }
                            }
                        })

            }
            })

        }
        function pwd_edit(){
            $('.editpassword').click(function (){
                pwd_uid=$(this).attr('uid')
                $('#pwd_edit').modal('show')
            })
            $('#formpasswordedit').click(function () {
                if (!pwd_uid)  return;
                $.ajax({
                    url:"/admin/userinfo/update_password/"+pwd_uid,
                    type:"post",
                    data:$("#formpassword").serialize(),
                    dataType:"JSON",
                    success: function(res) {
                        if(res.status){
                            alert('修改成功')
                            pwd_uid=undefined
                            $('#pwd_edit').hide(500)
                        }else {
                            console.log("添加失败")

                        }
                    }
                })
            })
        }

    </script>
{% endblock %}

再配置路由

django用Bootstrap 模态框 在同一页面实现增删改查

django用Bootstrap 模态框在同一页面实现增删改查