Django Layui table数据表格de实现

1、Django创建项目及配置

1、创建项目及App

(env) D:\My Project>django-admin startprojeck sku   # 创建项目
(env) D:\My Project>django-admin startapp shopping  # 创建app

2、注册App

1、找到项目目录下的settings.py文件
2、并添加 ‘shopping’ 如下图

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'shopping',  # 注册我们的App
]

3、数据模型

3-1、创建模板类

App目录下models.py

from django.db import models
class Sku(models.Model):
    sku_name = models.CharField(max_length=256)
    sku_short_name = models.CharField(max_length=256)
    sku_desc = models.TextField()
    sku_size = models.CharField(max_length=256)
    sku_color = models.CharField(max_length=256)
    sku_qty = models.CharField(max_length=256)

3-2、数据迁移

(env) D:\My Project\sku>python manage.py makemigrations
(env) D:\My Project\sku>python manage.py migrate

4、创建路由

4-1、项目路由

项目目录下urls.py

from django.contrib import admin
from django.urls import path, include
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('shopping/', include("shopping.urls")),
]

4-2、App路由

App目录下urls.py

from django.urls import path
from . import views
urlpatterns = [
    path('shopping/', views.shopping),
    path('sku_table/', views.sku_table),
    path('sku_index/', views.sku_index),
]

5、视图

App目录下views.py

from django.shortcuts import render, redirect
from django.db import transaction
from rest_framework import serializers
from django.core.paginator import Paginator
from django.http import JsonResponse, HttpResponseForbidden
from .models import Sku

def pager(sku_objs, current_page=1, number_of_page=5):
    paginator = Paginator(sku_objs, number_of_page)
    page_objs = paginator.page(current_page)
    current_page_num = page_objs.number  # 获取当前页码
    page_range = [i for i in range(max(current_page_num - 2, 1), min(current_page_num + 2, paginator.num_pages) + 1)]
    context = {'objs': page_objs.object_list,
               'page_objs': page_objs,
               'page_range': page_range,
               'count': paginator.count
               }
    # page_objs：<Page 1 of 2>；<class 'django.core.paginator.Page'> -->分页的总详情（一共多少页，一页多少sku）
    # page_objs.object_list： <QuerySet [<Test: Test object (1)>, <Test: Test object (2)>, <Test: Test object (3)>,
    # <Test: Test object (4)>, <Test: Test object (5)>]> -->当前页的详情（这样页中的sku）
    # paginator.count： 7 --> sku总数
    return context
    
class SkuSerializer(serializers.ModelSerializer):
    sku_name = serializers.models.CharField()
    sku_short_name = serializers.models.CharField()
    sku_desc = serializers.models.CharField()
    sku_size = serializers.models.CharField()
    sku_color = serializers.models.CharField()
    sku_qty = serializers.models.CharField()

    class Meta:
        model = Sku  # 模型名称
        fields = '__all__'  # 序列化这个模型的所有字段

def sku_index(request):
    if request.method == 'GET':
        return render(request, 'sku.html')

    else:
        db_save_id = transaction.savepoint()
        sku_name = request.POST.get('sku_name')
        sku_short_name = request.POST.get('sku_short_name')
        sku_desc = request.POST.get('sku_desc')
        sku_size = request.POST.get('sku_size')
        sku_color = request.POST.get('sku_color')
        sku_qty = request.POST.get('sku_qty')
        if not sku_name:
            return HttpResponseForbidden("SKU names cannot be NULL")
        content = {
            'sku_name': sku_name,
            'sku_short_name': sku_short_name,
            'sku_desc': sku_desc,
            'sku_size': sku_size,
            'sku_color': sku_color,
            'sku_qty': sku_qty,
        }
        try:
            Sku.objects.update_or_create(**content)
            transaction.savepoint_commit(db_save_id)
        except Exception:
            transaction.savepoint_rollback(db_save_id)
            return HttpResponseForbidden("System error")
        return redirect('/shopping/shopping/')

def sku_table(request):
    current_page = request.GET.get('page', 1)
    sku_objs = Sku.objects.all().order_by('id')
    content = pager(sku_objs, current_page=current_page, number_of_page=5)
    sku_detail_list = []
    for v in content['objs']:
        sku_detail_list.append(SkuSerializer(v).data)  # many=True
    data = {
        'code': 0,
        'msg': 'Success',
        'count': content['count'],
        'data': sku_detail_list
    }
    # data： {'code': 0, 'msg': 'Success', 'count': 7, 'data': [{},..., {}]}
    return JsonResponse(data)

def shopping(request):
    return render(request, 'shopping.html')

6、模板

base.html 基类模板

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %} {% endblock title %}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <script src="{% static 'layui/layui.js' %}"></script>
    {% block links %} {% endblock links %}
</head>
<body>
{% block cboby %}
{% endblock cboby %}
</body>
{% block scripts %}
{% endblock scripts %}
</html>

sku.html

{% extends 'base.html' %}
{% load static %}
{% block title %}SKU详情{% endblock title %}
{% block cboby %}
<form class="layui-form" action="/shopping/sku_index/" method='post'>
    {% csrf_token %}
	<div class="layui-form-item">
		<label class="layui-form-label">产品名称:</label>
		<div class="layui-input-block">
			<input type="text" name="sku_name" required  lay-verify="required" placeholder="产品" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">产品编号:</label>
		<div class="layui-input-block">
			<input type="text" name="sku_short_name" required  lay-verify="required" placeholder="产品编号" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">产品介绍:</label>
		<div class="layui-input-block">
			<input type="text" name="sku_desc" required  lay-verify="required" placeholder="产品介绍" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">产品规格:</label>
		<div class="layui-input-block">
			<input type="text" name="sku_size" required  lay-verify="required" placeholder="产品规格" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">产品色彩:</label>
		<div class="layui-input-block">
			<input type="text" name="sku_color" required  lay-verify="required" placeholder="产品色彩" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">产品数量:</label>
		<div class="layui-input-block">
			<input type="text" name="sku_qty" required  lay-verify="required" placeholder="产品数量" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
	    <div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
  </div>
</form>
{% endblock cboby %}
{% block scripts %}
	<script>
		layui.use('form', function(){
			var form = layui.form;
			form.on('submit(formDemo)', function(data){
				{#layer.msg(JSON.stringify(data.field));#}
				return true;
			});
		});
	</script>
{% endblock scripts %}

shipping.html (这里使用include)

{% extends 'base.html' %}
{% load static %}
{% block title %}Shipping{% endblock title %}
{% block cboby %}
    <a href="/shopping/sku_index/" class="layui-btn">添加产品</a>
	{% include 'sku_table.html' %}
{% endblock cboby %}

sku_table.html

{% load static %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
<script src="{% static 'layui/layui.js' %}"></script>
<div class="page_result">
	<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url: '/shopping/sku_table/'
            ,page: true
            ,cols: [[
                {field: 'sku_name', width: 160, title: '产品名称'}
                ,{field: 'sku_short_name', width: 160, title: '产品编号', sort: true}
                ,{field: 'sku_size', width: 160, title: '产品规格'}
                ,{field: 'sku_color', title: '产品色彩', width: 160}
                ,{field: 'sku_qty', title: '产品数量', width: 160, sort: true}
                ,{field: 'sku_desc', width: 300, title: '产品介绍', minWidth: 300}
            ]]
        });
    });
</script>