python+django+layui開發頁面表格數據的增刪改查

下載安裝django，見之前文章

前台頁面展示：

 

 

一、項目目錄結構

 

 

 二、主頁面settings需要修改地方

1、子頁面需要添加到主app

 

 

 2、數據庫設置

 

 

 3、settings底部靜態資源配置

 

 

 

三、以device子頁面為例

1、device數據庫模版

 

 代碼：

from django.db import models

class device(models.Model):

    device_id =models.CharField(max_length=50)
    brand =models.CharField(max_length=50)
    model =models.CharField(max_length=50)
    version =models.CharField(max_length=50)
    screen =models.CharField(max_length=50)
    size =models.CharField(max_length=50)
    oa_p =models.CharField(max_length=50)

2、url路由配置

testgroup主頁面url：

from django.urls import path, include
from . import views
urlpatterns = [
    path('testgroup/',views.index),
    path('testgroup/welcome',views.welcome),
    path('testgroup/device',include('device.urls')),#連接為testgroup/device時，url跳轉到子頁面device的url

]

device子頁面的url：

from django.urls import path,re_path
from device import views
from dailyreport import tests
urlpatterns = [
    path('',views.device_list), #url的device后無參數時，調用頁面
    path('/getdata',views.get_data), #查詢數據
    path('/adddata',views.add_data), #新增數據
    path('/deldata',views.del_data), #刪除數據
    path('/editdata',views.edit_data), #編輯數據
]

3、views接口

from django.http import JsonResponse
from django.shortcuts import render

from device.models import device

#展示設備管理頁面
def device_list(request):
    return render(request, 'device_list.html')

#獲取設備列表數據
def get_data(request):
    if request.method == 'GET':
        brand = request.GET.get('brand', "")
        oa_p = request.GET.get('oa_p', "")
        device_id = request.GET.get('device_id',"")
        data = []
        if brand != '' and oa_p != '' and device_id == '': #根據品牌和oa所屬人查詢
            result = device.objects.filter(brand=brand,oa_p=oa_p)
        elif brand != '' and oa_p == '' and device_id == '': #根據品牌查詢
            result = device.objects.filter(brand=brand)
        elif brand == '' and oa_p != '' and device_id == '': #根據oa所屬人查詢
            result = device.objects.filter(oa_p=oa_p)
        elif device_id != '' and brand == '' and oa_p == '': #根據設備id查詢
            result = device.objects.filter(device_id=device_id)
        elif device_id != '' and brand != '' and oa_p == '':
            result = device.objects.filter(device_id=device_id,brand=brand)
        elif device_id != '' and oa_p != '' and brand == '':
            result = device.objects.filter(device_id=device_id,oa_p=oa_p)
        elif brand != '' and oa_p != '' and device_id != '':
            result = device.objects.filter(device_id=device_id,brand=brand,oa_p=oa_p) #根據三項條件交集查詢
        else:
            result = device.objects.filter() #無查詢條件，返回所有數據

        for i in range(len(result)):
            event = {}
            event['id'] = result[i].id
            event['device_id'] = result[i].device_id
            event['brand'] = result[i].brand
            event['model'] = result[i].model
            event['version'] = result[i].version
            event['screen'] = result[i].screen
            event['size'] = result[i].size
            event['oa_p'] = result[i].oa_p
            data.append(event)
        count = len(data)
        if count != 0:
            return JsonResponse({'code':0,'message':'查詢成功','count':count,'data':data})
        else:
            return JsonResponse({'code':0,'message':'暫無數據'})

#新增設備
def add_data(request):
    if request.method == 'POST':
        device_id = request.POST.get('device_id', "")
        brand = request.POST.get('brand', "")
        model = request.POST.get('model', "")
        version = request.POST.get('version', "")
        screen = request.POST.get('screen', "")
        size = request.POST.get('size', "")
        oa_p = request.POST.get('oa_p', "")
        if device_id == '' or brand == '' or model == '' or version == '' or oa_p == '':
            return JsonResponse({'code': 10021, 'message': '參數錯誤'}, json_dumps_params={'ensure_ascii': False})

        device.objects.create(device_id=device_id, brand=brand, model=model, version=version,screen=screen,size=size,oa_p=oa_p)
        return JsonResponse({'code': 0, 'message': '添加成功！'})

#編輯設備
def edit_data(request):
    if request.method == 'POST':
        id = request.POST.get('id',"")
        device_id = request.POST.get('device_id', "")
        brand = request.POST.get('brand', "")
        model = request.POST.get('model', "")
        version = request.POST.get('version', "")
        screen = request.POST.get('screen', "")
        size = request.POST.get('size', "")
        oa_p = request.POST.get('oa_p', "")
        obj = device.objects.filter(id=id)[0]
        try:
            obj.device_id = device_id
            obj.brand = brand
            obj.model = model
            obj.version = version
            obj.screen = screen
            obj.size = size
            obj.oa_p = oa_p
            obj.save()
            return JsonResponse({'code':0,'message':'修改成功!'})
        except objectDoesNotExist:
            return JsonResponse({'status': 10023, 'message': '數據不存在'})

#刪除設備
def del_data(request):
    if request.method == 'POST':
        try:
            device_id = request.POST.get('device_id',"")
            device_obj = device.objects.filter(device_id=device_id)
            device_obj.delete()
            return JsonResponse({'code': 0, 'message': '刪除成功','device_id':device_id})

        except device.DoesNotExist:
            return JsonResponse({'code':101,'message':'不存在'})


4、html頁面模版（css/html/js）

<!DOCTYPE html>
<html lang="en">

<head>
     <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
     <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <meta charset="UTF-8">
    <title>測試機設備管理</title>

    <style type="text/css">
        .header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height: 32px}
        .header{border-bottom: 2px #009688 solid;}
        p{
            color: black;
            font-family: "Arial Black";
            font-size: 20px;
            font-weight: bold;
            text-align: center}
        h4{
            text-align: center;
        }
        table,th,td{
            border-collapse: collapse;

           }
         button{
             background-color: #337ab7;
             font-size: 14px;
             color: #fff;
             font-weight: 400;
             line-height: 1.42857143;
             text-align: center;
             font-family: "Songti TC";
            margin: auto;}

        .modal .container{
            height: 512px;
            width: 404px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            box-sizing: border-box;
            border-radius: 6px;
            padding: 1em;

        }
       input{
           border-style: solid;
           border-width: 1px;
           border-color: darkgray;
           margin: 10px 10px 8px;
           padding: 6px;
           float: initial;
       }

        #cancel{
            margin-left: 10px;
            margin-right: 40px;
            width: 30%;
            background-color: #337ab7;
            font-weight: bolder;
            border-color: white;
            color: white;


        }
        #submit{
            width: 30%;
            background-color: #337ab7;
            font-weight: bolder;
            border-color: white;
            color: white;
        }
</style>



</head>

<body style="padding: 10px;">
    <div class="header">
        <span>測試機設備管理</span>
         <div id="add_button" style="float: right">
             <button class="layui-btn layui-btn-sm" onclick="add()">新  增</button>
         </div>
    </div>
    <div>
        <!--按條件查詢數據-->
        <div>
            <form action="#">
                <input type="text" id="device" placeholder="設備id" class="layui-input-inline" value="">
                <input type="text" id="rebrand" placeholder="品牌" class="layui-input-inline" value="">
                <input type="text" id="rerOA" placeholder="OA所屬人" class="layui-input-inline" value="">
                <i class="layui-icon layui-icon-search" style="display:inline-block; top: 15px; margin-right: 10px;width:20px;height:20px;" data-type="reload"></i>
            </form>

        </div>

    </div>

      <!--新增設備彈層-->
    <div id="add_data" style="display: none">
        <form class="layui-form" action="" method="POST" id="add">
            {% csrf_token %}
            <div class="layui-form-item">
                <label class="layui-form-label">設備id</label>
                <div class="layui-input-inline">
                    <input type="text" id="device_id" name="device_id"  placeholder="請輸入設備id"  class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-inline">
                    <input type="text" id="brand" name="brand"  placeholder="請輸入設備品牌"  class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">機型</label>
                <div class="layui-input-inline">
                    <input type="text" id="model" name="model"  placeholder="請輸入設備機型"  class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">版本</label>
                <div class="layui-input-inline">
                    <input type="text" id="version" name="version"  placeholder="請輸入設備版本"  class="layui-input" value="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">分辨率</label>
                <div class="layui-input-inline">
                    <input type="text" id="screen" name="screen"  placeholder="請輸入設備分辨率"  class="layui-input" value="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">尺寸</label>
                <div class="layui-input-inline">
                    <input type="text" id="size" name="size"  placeholder="請輸入設備尺寸"  class="layui-input" value="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">OA所屬人</label>
                <div class="layui-input-inline">
                    <input type="text" id="oa_p" name="oa_p"  placeholder="請輸入設備所屬oa人"  class="layui-input" value="">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="cancel" class="layui-btn-sm" onclick="window.close()">取消</button>
                    <button id="submit" type="submit" class="layui-btn-sm" lay-submit lay-filter="adddata">添加</button>
                </div>
            </div>

        </form>
    </div>

    <P>

    </P>


    <!--編輯設備彈層-->
     <div id="edit_data" style="display: none">
        <form class="layui-form" action="" method="POST" id="edit">
            {% csrf_token %}
            <div class="layui-form-item">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline">
                    <input id="id1" type="text" class="layui-input" value="" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">設備id</label>
                <div class="layui-input-inline">
                    <input type="text" id="device_id1" name="device_id"  placeholder="請輸入設備id"  class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-inline">
                    <input type="text" id="brand1" name="brand"  placeholder="請輸入設備品牌"  class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">機型</label>
                <div class="layui-input-inline">
                    <input type="text" id="model1" name="model"  placeholder="請輸入設備機型"  class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">版本</label>
                <div class="layui-input-inline">
                    <input type="text" id="version1" name="version"  placeholder="請輸入設備版本"  class="layui-input" value="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">分辨率</label>
                <div class="layui-input-inline">
                    <input type="text" id="screen1" name="screen"  placeholder="請輸入設備分辨率"  class="layui-input" value="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">尺寸</label>
                <div class="layui-input-inline">
                    <input type="text" id="size1" name="size"  placeholder="請輸入設備尺寸"  class="layui-input" value="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">OA所屬人</label>
                <div class="layui-input-inline">
                    <input type="text" id="oa_p1" name="oa_p"  placeholder="請輸入設備所屬oa人"  class="layui-input" value="">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="cancel" class="layui-btn-sm" onclick="window.close()">取消</button>
                    <button id="submit" type="submit" class="layui-btn-sm" lay-submit lay-filter="updatedata">更新</button>
                </div>
            </div>

        </form>
    </div>

    <!--展示設備列表-->
    <table class="layui-table" id="device_list" lay-filter="table-data" ></table>


    <!--設備列表操作列-->
    <script type="text/html" id="operation">
        <button style="margin-left: 5px" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">編輯</button>
        <button style="margin-left: 5px" class="layui-btn layui-btn-sm layui-btn-danger" id="del" lay-event="del">刪除</button>
    </script>

    <script type="text/javascript">
        layui.use(['layer','table'],function () {
            var table = layui.table;
            var form = layui.form;
            var element = layui.element;
            var layer = layui.layer;
            var $ = layui.jquery;

            //獲取表格數據
            table.render({
                elem: '#device_list', //賦值表格
                url: '/testgroup/device/getdata', //請求地址路由
                id:'alltable',
                height:'full-125',
                cellMinWidth:20,
                cols:[[ //表頭
                    {field:'id',title:'ID',Width:10,align:"center"},
                    {field:'device_id',minWidth:10,title:'設備id',align: "center"},
                    {field:'brand',title:'品牌',align:"center"},
                    {field:'model',title:'機型',align:"center"},
                    {field:'version',minWidth:10,title:'版本',align:"center"},
                    {field:'screen',minWidth:10,title:'分辨率',align:"center"},
                    {field:'size',minWidth:10,title:'尺寸',align:"center"},
                    {field:'oa_p',minWidth:10,title:'OA所有人',align:"center"},
                    {fixed: 'right', title:'操作', toolbar: '#operation', width:150,align:"center"}
                ]],
                page:false,

            });

           //按條件重新載入table
            var active = {
                reload:function () {
                    var brand = $('#rebrand').val();
                    var oa_p = $('#rerOA').val();
                    var device_id = $('#device').val();
                    //執行重載
                    table.reload('alltable',{
                        where:{
                            brand:brand,
                            oa_p:oa_p,
                            device_id:device_id,
                        }
                    });

                }
            };

             //點擊搜素 執行上面重載table
            $('.layui-icon-search').on('click',function () {
                var type = $(this).data('type');
                 active[type] ? active[type].call(this) : '';
            });

            //單條新增數據
             form.on('submit(adddata)',function () {
                var formData = new FormData();
                formData.append('device_id',$('#device_id').val());
                formData.append('brand',$('#brand').val());
                formData.append('model',$('#model').val());
                formData.append('version',$('#version').val());
                formData.append('screen',$('#screen').val());
                formData.append('size',$('#size').val());
                formData.append('oa_p',$('#oa_p').val());

                $.ajax({
                    type:'POST', //請求方式
                    url:'/testgroup/device/adddata', //請求接口地址
                    contentType:false,
                    processData : false,
                    data:formData, //傳送數據s
                    success:function (result) { //針對請求結果進行處理
                        if(result.code === 0){
                            alert("提交成功");
                            layer.msg("添加成功！",{time:50000});
                                window.location.href = '/testgroup/device'
                        }else {
                            layer.msg("添加失敗！");
                        }
                    }
                });
                return false;
            });

            //表格操作列
            table.on('tool(table-data)',function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                var tr = obj.tr;
                var formData = new FormData();
                formData.append('device_id',data.device_id);
                //刪除數據
                if (obj.event === 'del'){
                    layer.confirm('確認刪除該條數據？',function (index) {
                        console.log(data.device_id);
                        $.ajax({
                            type:'POST',
                            url:'/testgroup/device/deldata',
                            contentType:false,
                            processData : false,
                            data:formData,
                            success:function (result) {
                                if (result.code === 0){
                                    layer.msg("刪除成功",{icon: 1});
                                        window.location.href = '/testgroup/device'
                                } else {
                                    layer.msg("刪除失敗")
                                }
                            }
                        });

                    });
                    //編輯數據
                }else if (obj.event === 'edit'){
                     layer.open({ //打開編輯頁彈層
                        type:1,
                        shade:0.5,
                        shadeClose:true,
                        title:'編輯設備',
                        area: ['500px','600px'],
                        content: $('#edit_data'),
                         success:function () {
                            console.log(data.id);
                            //編輯頁彈層顯示原始數據
                             $('#id1').attr("value",data.id);
                            $('#device_id1').attr("value",data.device_id);
                            $('#brand1').attr("value",data.brand);
                            $('#model1').attr("value",data.model);
                            $('#version1').attr("value",data.version);
                            $('#screen1').attr("value",data.screen);
                            $('#size1').attr("value",data.size);
                            $('#oa_p1').attr("value",data.oa_p);

                            //提交修改后的數據
                            form.on('submit(updatedata)',function () {
                                var formData1 = new FormData();
                                formData1.append('id',data.id);
                                formData1.append('device_id',$('#device_id1').val());
                                formData1.append('brand',$('#brand1').val());
                                formData1.append('model',$('#model1').val());
                                formData1.append('version',$('#version1').val());
                                formData1.append('screen',$('#screen1').val());
                                formData1.append('size',$('#size1').val());
                                formData1.append('oa_p',$('#oa_p1').val());
                                console.log(formData1.device_id);
                                $.ajax({
                                        type:'POST', //請求方式
                                        url:'/testgroup/device/editdata', //請求接口地址
                                        contentType:false,
                                        processData : false,
                                        data:formData1, //傳送數據
                                        success:function (result) { //針對請求結果進行處理
                                            if(result.code === 0){
                                                alert("修改成功");
                                                layer.msg("修改成功！",{time:50000});
                                                    window.location.href = '/testgroup/device'
                                            }else {
                                                layer.msg("修改失敗！");
                                                }
                                            }
                                    });
                            });
                         }
                    });
                }
            });
        });


       //添加設備彈層
        $('#add_button').click(function () {
            layer.open({
                    type:1,
                    shade:0.5,
                    shadeClose:true,
                    title:'新增設備',
                    area: ['500px','600px'],
                    content: $('#add_data')
                });
        });

       </script>

</body>
</html>

django項目創建數據庫創建見Django學習網址：

https://www.runoob.com/django/django-first-app.html