第五章前端UI框架Layui

2026/9/22 23:51:25 拓冰建站浏览量

第一章：前端开发基础：html
第二章：前端开发基础：CSS
第三章：前端开发基础：JavaScript
第四章：前端开发基础：jQuery
第五章：前端UI框架 Layui

文章目录

Layui介绍
框架
准备工作
- 下载layui
- django创建项目
- - **转发路由**
  - **视图**
  - **网页**
  - 启动
后台布局
栅格系统
创建母版
卡片
按钮
表单
- 路由
- 视图
- 网页
上传文件
- 路由
- 视图
- 网页
- 验证
数据表格
- 静态
- - 路由
  - 视图
  - 网页
  - 验证
- 动态渲染
- - 路由
  - 视图
  - 网页
  - 验证
- 分页
- - 路由
  - 视图
  - 网页
  - 验证
- 工具栏
- - 路由
  - 视图
  - 网页
  - 验证
- 删除记录
- - 路由
  - 视图
  - 网页
  - 验证
- 关键字搜索
- - 路由
  - 视图
  - 网页
  - 验证
- 选择查询
- - 路由
  - 视图
  - 网页
  - 验证
- 表格内容美化
- - 路由
  - 视图
  - 网页
  - 验证
弹出框
- 路由
- 视图
- 网页
- - base.html
  - index.html
- 验证

Layui介绍

Layui（流畅的UI）是一款轻量级的前端框架，专为快速开发Web界面而设计。它提供了一套简单、直观、易于使用的API，可以帮助开发者更高效地构建各种Web应用

以下是 Layui 的一些主要特点和组件：

轻量级： Layui的设计理念是轻量级，致力于提供简单而强大的工具，而不是过度复杂的解决方案。
模块化： Layui采用模块化开发的思想，将功能划分为各个独立的模块，使得开发者可以根据需要选择性地加载和使用模块。
简单易用： Layui提供了直观的API和丰富的文档，使得开发者能够快速上手，减少开发周期。
支持响应式设计： Layui具有响应式的设计，可以适应不同屏幕尺寸和设备，提供更好的用户体验。
丰富的组件： Layui包含了丰富的UI组件，如表单、表格、日期选择器、轮播图等，减少了开发过程中的重复工作。
自定义样式： 开发者可以根据项目需求定制主题和样式，以满足不同项目的视觉要求。
支持扩展： Layui支持通过插件和扩展来增加新的功能，使得开发者可以根据自己的需求进行定制。

同类产品：bootstrap、easyUI

官网

http://layui.apixx.net/index.html

框架

准备工作

下载layui

django创建项目

django-admin startproject layui
cd layui/
mkdir static
mkdir templates
python3 manage.py startapp mylayui

# layui/setting.py增加修改
# 修改
ALLOWED_HOSTS = ['*']
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR, 'templates')],  # 这一行'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]
# 增加
import os
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),
)

上边下载的layui解压后，传到static目录下

转发路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),
]

视图

# mylayui/views.py
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')

网页

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Layui</title>
</head><body><p>hello</p>
</body></html>

启动

python3 manage.py runserver 0.0.0.0:8080

后台布局

https://www.uimaker.com/layui/doc/index.html

把后台布局这一套代码复制到自己index，然后修改，看看效果

<!-- templates/index.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>运维管理平台</title><!-- css修改 --><link rel="stylesheet" href="/static/layui/css/layui.css">
</head><body><div class="layui-layout layui-layout-admin"><div class="layui-header layui-bg-cyan"><div class="layui-logo layui-hide-xs layui-bg-black" style="font-size: 26px;">运维管理平台</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><!-- <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li><li class="layui-nav-item"><a href="javascript:;">nav groups</a><dl class="layui-nav-child"><dd><a href="">menu 11</a></dd><dd><a href="">menu 22</a></dd><dd><a href="">menu 33</a></dd></dl></li> --></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"class="layui-nav-img">用户</a><dl class="layui-nav-child"><dd><a href="">个人信息</a></dd><dd><a href="">设置</a></dd><dd><a href="">退出</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll layui-bg-cyan"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;"><i class="layui-icon layui-icon-face-smile"></i>&nbsp;&nbsp;&nbsp;其他系统</a><dl class="layui-nav-child"><dd><a href="javascript:;">OA</a></dd><dd><a href="javascript:;">人事</a></dd><dd><a href="javascript:;">考核</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">自动化</a><dl class="layui-nav-child"><dd><a href="javascript:;">CI</a></dd><dd><a href="javascript:;">CD</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">k8s</a></li><li class="layui-nav-item"><a href="">邮箱系统</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域www.test.com</div></div><!-- js路径修改 --><script src="/static/layui/layui.js"></script><script>//JS layui.use(['element', 'layer', 'util'], function () {var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;//头部事件util.event('lay-header-event', {//左侧菜单事件menuLeft: function (othis) {layer.msg('展开左侧菜单的操作', { icon: 0 });}, menuRight: function () {layer.open({type: 1, content: '<div style="padding: 15px;">处理右侧面板的操作</div>', area: ['260px', '100%'], offset: 'rt' //右上角, anim: 5, shadeClose: true});}});});</script>
</body></html>

红框里边的都改动过

栅格系统

1.	采用 layui-row 来定义行，如：<div class="layui-row"></div>
2.	采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3.	列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.	可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5.	最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

<!-- templates/index.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>运维管理平台</title><!-- css修改 --><link rel="stylesheet" href="/static/layui/css/layui.css">
</head><body><div class="layui-layout layui-layout-admin"><div class="layui-header layui-bg-cyan"><div class="layui-logo layui-hide-xs layui-bg-black" style="font-size: 26px;">运维管理平台</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"class="layui-nav-img">用户</a><dl class="layui-nav-child"><dd><a href="">个人信息</a></dd><dd><a href="">设置</a></dd><dd><a href="">退出</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll layui-bg-cyan"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;"><iclass="layui-icon layui-icon-face-smile"></i>&nbsp;&nbsp;&nbsp;其他系统</a><dl class="layui-nav-child"><dd><a href="javascript:;">OA</a></dd><dd><a href="javascript:;">人事</a></dd><dd><a href="javascript:;">考核</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">自动化</a><dl class="layui-nav-child"><dd><a href="javascript:;">CI</a></dd><dd><a href="javascript:;">CD</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">k8s</a></li><li class="layui-nav-item"><a href="">邮箱系统</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div class="layui-container">常规布局（以中型屏幕桌面为例）：<div class="layui-row"><div class="layui-col-md9"><div style="background-color: red;">你的内容 9/12</div></div><div class="layui-col-md3"><div style="background-color: blue;">你的内容 3/12</div></div></div>移动设备、平板、桌面端的不同表现：<div class="layui-row" style="background-color: orange;"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: aqua;">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs6 layui-col-sm6 layui-co l-md4" style="background-color:bisque;">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color:blueviolet;">移动：4/12 | 平板：12/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color:yellow;">移动：4/12 | 平板：7/12 | 桌面：8/12</div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color:violet;">移动：4/12 | 平板：5/12 | 桌面：4/12</div></div></div><!-- <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div> --></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域www.test.com</div></div><!-- js路径修改 --><script src="/static/layui/layui.js"></script><script>//JS layui.use(['element', 'layer', 'util'], function () {var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;//头部事件util.event('lay-header-event', {//左侧菜单事件menuLeft: function (othis) {layer.msg('展开左侧菜单的操作', { icon: 0 });}, menuRight: function () {layer.open({type: 1, content: '<div style="padding: 15px;">处理右侧面板的操作</div>', area: ['260px', '100%'], offset: 'rt' //右上角, anim: 5, shadeClose: true});}});});</script>
</body></html>

创建母版

现有index.html更该名字为base.html

并再里边定义变量

<!-- templates/base.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>{% block title %}{% endblock %}</title><!-- css修改 --><link rel="stylesheet" href="/static/layui/css/layui.css">
</head><body><div class="layui-layout layui-layout-admin"><div class="layui-header layui-bg-cyan"><div class="layui-logo layui-hide-xs layui-bg-black" style="font-size: 26px;">运维管理平台</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"class="layui-nav-img">用户</a><dl class="layui-nav-child"><dd><a href="">个人信息</a></dd><dd><a href="">设置</a></dd><dd><a href="">退出</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll layui-bg-cyan"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;"><iclass="layui-icon layui-icon-face-smile"></i>&nbsp;&nbsp;&nbsp;其他系统</a><dl class="layui-nav-child"><dd><a href="javascript:;">OA</a></dd><dd><a href="javascript:;">人事</a></dd><dd><a href="javascript:;">考核</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">自动化</a><dl class="layui-nav-child"><dd><a href="javascript:;">CI</a></dd><dd><a href="javascript:;">CD</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">k8s</a></li><li class="layui-nav-item"><a href="">邮箱系统</a></li></ul></div></div><div class="layui-body" style="background-color: #eeeeee;"><!-- 内容主体区域 --><div style="padding: 15px;">{% block content %}{% endblock %}</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域www.test.com</div></div><!-- js路径修改 --><script src="/static/layui/layui.js"></script>{% block js %}{% endblock %}<script>//JS layui.use(['element', 'layer', 'util'], function () {var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;//头部事件util.event('lay-header-event', {//左侧菜单事件menuLeft: function (othis) {layer.msg('展开左侧菜单的操作', { icon: 0 });}, menuRight: function () {layer.open({type: 1, content: '<div style="padding: 15px;">处理右侧面板的操作</div>', area: ['260px', '100%'], offset: 'rt' //右上角, anim: 5, shadeClose: true});}});});</script>
</body></html>

卡片

<!-- templates/index.html -->
{% extends 'base.html' %} <!-- 引用母版 -->{% block content %}
<div class="layui-row layui-col-space10"><div class="layui-col-md6"><div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">卡片式面板面板通常用于非白色背景色的主体内<br>从而映衬出边框投影</div></div></div><div class="layui-col-md6"><div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">卡片式面板面板通常用于非白色背景色的主体内<br>从而映衬出边框投影</div></div></div>
</div>
{% endblock content %}

按钮

<!-- templates/index.html -->
{% extends 'base.html' %}{% block content %}
基础按钮<br>
<button type="button" class="layui-btn">一个标准的按钮</button><br>
<a href="http://www.baidu.com" class="layui-btn">一个可跳转的按钮</a><br>
<div class="layui-btn">一个按钮</div>
不同主题的按钮<br>
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button><br>
<button type="button" class="layui-btn">默认按钮</button><br>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button><br>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button><br>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button><br>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button><br>
按钮尺寸<br>
<button type="button" class="layui-btn layui-btn-primary layui-btn-1g">大型按钮</button>
<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button><br>
圆角按钮<br>
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button><br>
图标按钮<br>
<button type="button" class="layui-btn"><i class="layui-icon layui-icon-addition">增加</i></button><br>
<button type="button" class="layui-btn"><i class="layui-icon layui-icon-subtraction">删除</i></button><br>
{% endblock content %}

表单

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^user/$', views.user),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def user(request):if request.method == "GET":print('11111')elif request.method == "POST":print(request.POST)print(request.POST.get('username'))print('22222')code = "0"msg = "用户添加成功"result = {'code': code, 'msg': msg}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}
{% block content %}
<form class="layui-form" action="" onsubmit="return false">{% csrf_token %}<div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" 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-inline"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"class="layui-input"></div><div class="layui-form-mid layui-word-aux">辅助文字</div></div><div class="layui-form-item"><label class="layui-form-label">兴趣爱好</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="写作"><input type="checkbox" name="like[read]" title="阅读" checked><input type="checkbox" name="like[dai]" title="发呆"></div></div><div class="layui-form-item"><label class="layui-form-label">是否启用</label><div class="layui-input-block"><input type="checkbox" name="status" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">备注</label><div class="layui-input-block"><textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea></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 %}
{% block js %}
<script>// 使用Layui的表单模块layui.use(['form','layer'], function () {var form = layui.form;var $ = layui.jquery;var layer = layui.layer;// 监听提交form.on('submit(formDemo)', function (data) {$.ajax({type: "POST",url: "/user/",data: data.field,success: function (result) {if (result.code == "0" ) {layer.msg(result.msg, {icon:6})} else {layer.msg(result.msg, {icon:5})}}})});});
</script>
{% endblock %}

上传文件

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^upload/$', views.upload),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def upload(request):if request.method == "GET":print('getgggggggggg')elif request.method == "POST":print(request.POST)file_obj = request.FILES.get("file")import osfile_path = os.path.join('upload', file_obj.name)with open(file_path, mode='wb') as f:for i in file_obj.chunks():f.write(i)print('postpppppppppp')code = "0"msg = "用户添加成功"result = {'code': code, 'msg': msg}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}
{% block content %}
<form class="layui-form" action="" onsubmit="return false">{% csrf_token %}<div class="layui-form-item"><label class="layui-form-label">上传头像</label><button type="button" class="layui-btn" id="uploadFile"><i class="layui-icon"></i>上传文件</button></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo" id="uploadBtn" >立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form>{% endblock %}
{% block js %}
<script>//Demolayui.use(['form', 'layer', 'upload'], function () {var form = layui.form;var $ = layui.jquery;var layer = layui.layer;var upload = layui.upload;upload.render({elem: "#uploadFile",  // 选择上传按钮url: "/upload/",   // 服务端上传接口auto: false,     // 是否选中文件后自动上传bindAction: "#uploadBtn",  // 绑定提交表单的按钮before: function () {this.data = {csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),}},done: function (result) {if (result.code == "0") {layer.msg(result.msg, { icon: 6 })} else {layer.msg(result.msg, { icon: 5 })}}});});
</script>
{% endblock %}

验证

数据表格

静态

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
<div class="layui-card"><div class="layui-card-body"><table class="layui-table"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr></thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody></table></div>
</div>
{% endblock %}{% block js %}{% endblock %}

验证

动态渲染

	方式	机制	适用场景
01.	方法渲染	用JS方法的配置完成渲染	（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02.	自动渲染	HTML配置，自动渲染	无需写过多 JS，可专注于 HTML 表头部分
03.	转换静态表格	转化一段已有的表格元素	无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')
def liebiao(request):if request.method == "GET":data = []for id in range(1,15):import randomname = random.sample(['风','火','雷','电'],1)name = '姓' + name[0]sex = random.sample(['男','女'],1)sex = sex[0]city = random.sample(['北京','上海','深圳','广州','邯郸','邱县'],1)city = city[0]row = {'id':id,'username':name,'sex':sex,'city':city}data.append(row)code = "0"msg = "获取数据成功"count = len(data)result = {'code':code,'msg':msg,'count':count,'data':data}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
<div class="layui-card"><div class="layui-card-body"><table id="demo" lay-filter="test"></table></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table'], function () {var table = layui.tablevar $ = layui.jquery;table.render({elem: '#demo', url: '/liebiao/', title: '用户数据表', cols: [[{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120 },{ field: 'city', title: '城市' },]]});})
</script>{% endblock %}

验证

分页

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []for id in range(1,15):import randomname = random.sample(['风','火','雷','电'],1)name = '姓' + name[0]sex = random.sample(['男','女'],1)sex = sex[0]city = random.sample(['北京','上海','深圳','广州','邯郸','邱县'],1)city = city[0]row = {'id':id,'username':name,'sex':sex,'city':city}data.append(row)count = len(data)page = int(request.GET.get('page',1))limit = int(request.GET.get('limit'))start = (page-1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code':code,'msg':msg,'count':count,'data':data}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
<div class="layui-card"><div class="layui-card-body"><table id="demo" lay-filter="test"></table></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table'], function () {var table = layui.tablevar $ = layui.jquery;table.render({elem: '#demo', url: '/liebiao/', title: '用户数据表', cols: [[{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120 },{ field: 'city', title: '城市' },]], page: true});})
</script>{% endblock %}

验证

工具栏

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []for id in range(1,15):import randomname = random.sample(['风','火','雷','电'],1)name = '姓' + name[0]sex = random.sample(['男','女'],1)sex = sex[0]city = random.sample(['北京','上海','深圳','广州','邯郸','邱县'],1)city = city[0]row = {'id':id,'username':name,'sex':sex,'city':city}data.append(row)count = len(data)page = int(request.GET.get('page',1))limit = int(request.GET.get('limit'))start = (page-1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code':code,'msg':msg,'count':count,'data':data}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
<div class="layui-card"><div class="layui-card-body"><table id="demo" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div></script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table'], function () {var table = layui.tablevar $ = layui.jquery;table.render({elem: '#demo',url: '/liebiao/',title: '用户数据表',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}],cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120 },{ field: 'city', title: '城市' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }]],page: true});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {obj.del();layer.close(index);});} else if (obj.event === 'edit') {layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});});
</script>{% endblock %}

验证

删除记录

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []for id in range(1,15):import randomname = random.sample(['风','火','雷','电'],1)name = '姓' + name[0]sex = random.sample(['男','女'],1)sex = sex[0]city = random.sample(['北京','上海','深圳','广州','邯郸','邱县'],1)city = city[0]row = {'id':id,'username':name,'sex':sex,'city':city}data.append(row)count = len(data)page = int(request.GET.get('page',1))limit = int(request.GET.get('limit'))start = (page-1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code':code,'msg':msg,'count':count,'data':data}return JsonResponse(result)if request.method == "POST":print(request.POST)code = '0'msg = '删除成功'result = {'code':code,'msg':msg}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
{% csrf_token %}
<div class="layui-card"><div class="layui-card-body"><table id="demo" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div></script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table'], function () {var table = layui.tablevar $ = layui.jquery;table.render({elem: '#demo',url: '/liebiao/',title: '用户数据表',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}],cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120 },{ field: 'city', title: '城市' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }]],page: true});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {// obj.del();// layer.close(index);csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val()var post_data = {'id': data.id,'csrfmiddlewaretoken': csrfmiddlewaretoken}$.ajax({type: "POST",url: "/liebiao/",data: post_data,success: function (result) {if (result.code == "0") {layer.msg(result.msg, { icon: 6 })} else {layer.msg(result.msg, { icon: 5 })}}})});} else if (obj.event === 'edit') {layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});});
</script>{% endblock %}

验证

关键字搜索

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []for id in range(1,15):import randomname = random.sample(['风','火','雷','电'],1)name = '姓' + name[0]sex = random.sample(['男','女'],1)sex = sex[0]city = random.sample(['北京','上海','深圳','广州','邯郸','邱县'],1)city = city[0]row = {'id':id,'username':name,'sex':sex,'city':city}# data.append(row)# 根据查询关键字返回数据search_key = request.GET.get('searchKey', None)print(search_key)if search_key:if search_key == name:  # in 相当于模糊查询data.append(row)else:data.append(row)# 分页count = len(data)page = int(request.GET.get('page',1))limit = int(request.GET.get('limit'))start = (page-1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code':code,'msg':msg,'count':count,'data':data}return JsonResponse(result)if request.method == "POST":print(request.POST)code = '0'msg = '删除成功'result = {'code':code,'msg':msg}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
{% csrf_token %}
<div class="layui-card"><div class="layui-card-body"><!-- 表格容器 --><table id="demo" lay-filter="test"></table><!-- 头部工具栏模板 --><script type="text/html" id="toolbarDemo"><!-- 搜索框 --><input type="text" name="username" class="layui-input" style="width: 150px;float: left;"><button class="layui-btn" style="float: left;" id="searchBtn">搜索</button><br><br><!-- 头部按钮 --><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div></script><!-- 行工具栏模板 --><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table'], function () {var table = layui.tablevar $ = layui.jquery;// 渲染表格table.render({elem: '#demo',url: '/liebiao/',title: '用户数据表',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}],cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120 },{ field: 'city', title: '城市' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }]],page: true,id:'USER' // 表格的唯一标识，用于刷新});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {// 执行删除操作// obj.del();// layer.close(index);csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val()var post_data = {'id': data.id,'csrfmiddlewaretoken': csrfmiddlewaretoken}$.ajax({type: "POST",url: "/liebiao/",data: post_data,success: function (result) {if (result.code == "0") {layer.msg(result.msg, { icon: 6 })} else {layer.msg(result.msg, { icon: 5 })}}})});} else if (obj.event === 'edit') {// 执行编辑操作layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});// 搜索按钮点击事件$(document).on('click', "#searchBtn", function () {// $("#searchBtn").click(function () {var input_val = $('input[name=username]').val();layer.msg(input_val)// 重新加载表格数据，传递搜索关键字table.reload('USER',{where: {searchKey:input_val},page:{curr:1}});});});
</script>{% endblock %}

验证

选择查询

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []# 生成模拟数据for id in range(1, 15):import random# 随机生成姓name = '姓' + random.choice(['风', '火', '雷', '电'])# 随机生成性别sex = random.choice(['男', '女'])# 随机生成城市city = random.choice(['北京', '上海', '深圳', '广州', '邯郸', '邱县'])row = {'id': id, 'username': name, 'sex': sex, 'city': city}# 根据查询关键字返回数据search_key = request.GET.get('searchKey', None)sexKey = request.GET.get('sexKey', None)if search_key or sexKey:# 使用 in 进行模糊查询if search_key == name:data.append(row)elif sexKey == sex:data.append(row)else:data.append(row)# 分页count = len(data)page = int(request.GET.get('page', 1))limit = int(request.GET.get('limit'))start = (page - 1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code': code, 'msg': msg, 'count': count, 'data': data}return JsonResponse(result)if request.method == "POST":print(request.POST)code = '0'msg = '删除成功'result = {'code': code, 'msg': msg}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
{% csrf_token %}
<div class="layui-card"><div class="layui-card-body"><!-- 表格容器 --><table id="demo" lay-filter="test"></table><!-- 头部工具栏模板 --><script type="text/html" id="toolbarDemo"><!-- 搜索框 --><input type="text" name="username" class="layui-input" style="width: 150px;float: left;"><button class="layui-btn" style="float: left;" id="searchBtn">搜索</button><!-- 直接选择或搜索选择 --><div class="layui-input-inline"><select name="sex" lay-verify="required" lay-search="" lay-filter="sex"><option value="">性别</option><option value="男">男</option><option value="女">女</option></select></div><br><br><!-- 头部按钮 --><!-- <div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div> --></script><!-- 行工具栏模板 --><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table', 'form'], function () {var table = layui.table;var layer = layui.layer;var $ = layui.jquery;var form = layui.form;// 渲染表格table.render({elem: '#demo',url: '/liebiao/',title: '用户数据表',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}],cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120},{ field: 'city', title: '城市' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }]],page: true,id: 'USER' // 表格的唯一标识，用于刷新});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {// 执行删除操作// obj.del();// layer.close(index);csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val()var post_data = {'id': data.id,'csrfmiddlewaretoken': csrfmiddlewaretoken}$.ajax({type: "POST",url: "/liebiao/",data: post_data,success: function (result) {if (result.code == "0") {layer.msg(result.msg, { icon: 6 })} else {layer.msg(result.msg, { icon: 5 })}}})});} else if (obj.event === 'edit') {// 执行编辑操作layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});// 搜索按钮点击事件$(document).on('click', "#searchBtn", function () {// $("#searchBtn").click(function () {var input_val = $('input[name=username]').val();// layer.msg(input_val)// 重新加载表格数据，传递搜索关键字table.reload('USER', {where: {searchKey: input_val},page: {curr: 1}});});form.on('select(sex)', function (data) {// $(document).on('click', "#sex", function () {// var sex = $('input[sex=sex]').val();table.reload('USER', {where: { //设定异步数据接口的额外参数，任意设sexKey: data.value,},page: {curr: 1 //重新从第 1 页开始}}); //只重载数据})});
</script>{% endblock %}

验证

表格内容美化

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：
如果自定义模版的字符量太大，我们推荐你采用【方式一】；
如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用【方式二】；
如果自定义模板的字符量很小，我们推荐你采用【方式三】

方式一：绑定模版选择器

table.render({cols: [[{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器,{field:'id', title:'ID', width:100}]]
});等价于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>

下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据

<script type="text/html" id="titleTpl"><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：序号：{{ d.LAY_INDEX }} 当前列的表头信息：{{ d.LAY_COL }} （layui 2.6.8 新增）由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）：
<script type="text/html" id="titleTpl">{{#  if(d.id < 100){ }}<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>{{#  } else { }}{{d.title}}(普通用户){{#  } }}
</script>

方式二：函数转义

table.render({cols: [[{field:'title', title: '文章标题', width: 200,templet: function(d){console.log(d.LAY_INDEX); //得到序号。一般不常用console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增）。一般不常用//得到当前行数据，并拼接成自定义模板return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'}},{field:'id', title:'ID', width:100}]]
});

**方式三：直接赋值模版字符.**事实上，templet 也可以直接是一段 html 内容，如：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []# 生成模拟数据for id in range(1, 15):import random# 随机生成姓name = '姓' + random.choice(['风', '火', '雷', '电'])# 随机生成性别sex = random.choice(['男', '女'])# 随机生成城市city = random.choice(['北京', '上海', '深圳', '广州', '邯郸', '邱县'])row = {'id': id, 'username': name, 'sex': sex, 'city': city}# 根据查询关键字返回数据search_key = request.GET.get('searchKey', None)sexKey = request.GET.get('sexKey', None)if search_key or sexKey:# 使用 in 进行模糊查询if search_key == name:data.append(row)elif sexKey == sex:data.append(row)else:data.append(row)# 分页count = len(data)page = int(request.GET.get('page', 1))limit = int(request.GET.get('limit'))start = (page - 1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code': code, 'msg': msg, 'count': count, 'data': data}return JsonResponse(result)if request.method == "POST":print(request.POST)code = '0'msg = '删除成功'result = {'code': code, 'msg': msg}return JsonResponse(result)

网页

base.html继承上边的不变

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block content %}
{% csrf_token %}
<div class="layui-card"><div class="layui-card-body"><!-- 表格容器 --><table id="demo" lay-filter="test"></table><!-- 头部工具栏模板 --><script type="text/html" id="toolbarDemo"><!-- 搜索框 --><input type="text" name="username" class="layui-input" style="width: 150px;float: left;"><button class="layui-btn" style="float: left;" id="searchBtn">搜索</button><!-- 直接选择或搜索选择 --><div class="layui-input-inline"><select name="sex" lay-verify="required" lay-search="" lay-filter="sex"><option value="">性别</option><option value="男">男</option><option value="女">女</option></select></div><br><br><!-- 头部按钮 --><!-- <div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div> --></script><!-- 行工具栏模板 --><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div>
</div>{% endblock %}{% block js %}
<script>layui.use(['layer', 'table', 'form'], function () {var table = layui.table;var layer = layui.layer;var $ = layui.jquery;var form = layui.form;// 渲染表格table.render({elem: '#demo',url: '/liebiao/',title: '用户数据表',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}],cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120,templet: function (d) {if (d.sex == "女") {return '<span style="color: red">' + d.sex + '</span>'} else {return '<span style="color: blue">' + d.sex + '</span>'}}},{ field: 'city', title: '城市' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }]],page: true,id: 'USER' // 表格的唯一标识，用于刷新});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {// 执行删除操作// obj.del();// layer.close(index);csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val()var post_data = {'id': data.id,'csrfmiddlewaretoken': csrfmiddlewaretoken}$.ajax({type: "POST",url: "/liebiao/",data: post_data,success: function (result) {if (result.code == "0") {layer.msg(result.msg, { icon: 6 })} else {layer.msg(result.msg, { icon: 5 })}}})});} else if (obj.event === 'edit') {// 执行编辑操作layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});// 搜索按钮点击事件$(document).on('click', "#searchBtn", function () {// $("#searchBtn").click(function () {var input_val = $('input[name=username]').val();// layer.msg(input_val)// 重新加载表格数据，传递搜索关键字table.reload('USER', {where: {searchKey: input_val},page: {curr: 1}});});form.on('select(sex)', function (data) {// $(document).on('click', "#sex", function () {// var sex = $('input[sex=sex]').val();table.reload('USER', {where: { //设定异步数据接口的额外参数，任意设sexKey: data.value,},page: {curr: 1 //重新从第 1 页开始}}); //只重载数据})});
</script>{% endblock %}

验证

弹出框

路由

# layui/urls.py
from django.contrib import admin
from django.urls import path,re_path
from mylayui import viewsurlpatterns = [path('admin/', admin.site.urls),re_path('^$',views.index),re_path('^liebiao/$', views.liebiao),
]

视图

# mylayui/views.py
from django.http import JsonResponse
from django.shortcuts import render# Create your views here.
def index(request):return render(request,'index.html')def liebiao(request):if request.method == "GET":data = []# 生成模拟数据for id in range(1, 15):import random# 随机生成姓name = '姓' + random.choice(['风', '火', '雷', '电'])# 随机生成性别sex = random.choice(['男', '女'])# 随机生成城市city = random.choice(['北京', '上海', '深圳', '广州', '邯郸', '邱县'])row = {'id': id, 'username': name, 'sex': sex, 'city': city}# 根据查询关键字返回数据search_key = request.GET.get('searchKey', None)sexKey = request.GET.get('sexKey', None)if search_key or sexKey:# 使用 in 进行模糊查询if search_key == name:data.append(row)elif sexKey == sex:data.append(row)else:data.append(row)# 分页count = len(data)page = int(request.GET.get('page', 1))limit = int(request.GET.get('limit'))start = (page - 1) * limitend = page * limitdata = data[start:end]code = "0"msg = "获取数据成功"result = {'code': code, 'msg': msg, 'count': count, 'data': data}return JsonResponse(result)if request.method == "POST":print(request.POST)code = '0'msg = '删除成功'result = {'code': code, 'msg': msg}return JsonResponse(result)

网页

base.html

<!-- templates/base.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>{% block title %}{% endblock %}</title><!-- css修改 --> <link rel="stylesheet" href="/static/layui/css/layui.css">
</head><body>{% block body_first %}{% endblock %}<div class="layui-layout layui-layout-admin"><div class="layui-header layui-bg-cyan"><div class="layui-logo layui-hide-xs layui-bg-black" style="font-size: 26px;">运维管理平台</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"class="layui-nav-img">用户</a><dl class="layui-nav-child"><dd><a href="">个人信息</a></dd><dd><a href="">设置</a></dd><dd><a href="">退出</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll layui-bg-cyan"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;"><iclass="layui-icon layui-icon-face-smile"></i>&nbsp;&nbsp;&nbsp;其他系统</a><dl class="layui-nav-child"><dd><a href="javascript:;">OA</a></dd><dd><a href="javascript:;">人事</a></dd><dd><a href="javascript:;">考核</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">自动化</a><dl class="layui-nav-child"><dd><a href="javascript:;">CI</a></dd><dd><a href="javascript:;">CD</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">k8s</a></li><li class="layui-nav-item"><a href="">邮箱系统</a></li></ul></div></div><div class="layui-body" style="background-color: #eeeeee;"><!-- 内容主体区域 --><div style="padding: 15px;">{% block content %}{% endblock %}</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域www.test.com</div></div><!-- js路径修改 --><script src="/static/layui/layui.js"></script>{% block js %}{% endblock %}<script>//JS layui.use(['element', 'layer', 'util'], function () {var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;//头部事件util.event('lay-header-event', {//左侧菜单事件menuLeft: function (othis) {layer.msg('展开左侧菜单的操作', { icon: 0 });}, menuRight: function () {layer.open({type: 1, content: '<div style="padding: 15px;">处理右侧面板的操作</div>', area: ['260px', '100%'], offset: 'rt' //右上角, anim: 5, shadeClose: true});}});});</script>
</body></html>

index.html

<!-- templates/index.html -->
{% extends 'base.html' %}{% block title %}
数据表格
{% endblock %}{% block body_first %}
<div style="background-color: red;width: 100px;height: 100px;display: none;" id="abc">页面层
</div>
{% endblock %}{% block content %}
{% csrf_token %}
<div class="layui-card"><div class="layui-card-body"><!-- 表格容器 --><table id="demo" lay-filter="test"></table><!-- 头部工具栏模板 --><script type="text/html" id="toolbarDemo"><!-- 搜索框 --><input type="text" name="username" class="layui-input" style="width: 150px;float: left;"><button class="layui-btn" style="float: left;" id="searchBtn">搜索</button><!-- 直接选择或搜索选择 --><div class="layui-input-inline"><select name="sex" lay-verify="required" lay-search="" lay-filter="sex"><option value="">性别</option><option value="男">男</option><option value="女">女</option></select></div><br><br><!-- 头部按钮 --><!-- <div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div> --></script><!-- 行工具栏模板 --><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div>
</div><!-- 弹出框 -->
<button tyle="submit" class="layui-btn" id="btn">弹出框</button>
{% endblock %}{% block js %}
<script>layui.use(['layer', 'table', 'form'], function () {var table = layui.table;var layer = layui.layer;var $ = layui.jquery;var form = layui.form;$("#btn").click(function () {// layer.msg('hello',{icon:6})// 信息框/*layer.open({type: 0,content: '<span style="color: red;font-size:20px">hello</span>'})*/// 页面层/*layer.open({type: 1,content: $('#abc')})*/// 加载层layer.open({type: 2,content: 'https://www.csdn.net/',area: ['60%','50%'],title: ["这是嵌套页面",'font-size:20px;color:red'],btn: ['提交','关闭']})})// 渲染表格table.render({elem: '#demo',url: '/liebiao/',title: '用户数据表',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}],cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },{ field: 'username', title: '用户名', width: 120 },{ field: 'sex', title: '性别', width: 120,templet: function (d) {if (d.sex == "女") {return '<span style="color: red">' + d.sex + '</span>'} else {return '<span style="color: blue">' + d.sex + '</span>'}}},{ field: 'city', title: '城市' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }]],page: true,id: 'USER' // 表格的唯一标识，用于刷新});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {// 执行删除操作// obj.del();// layer.close(index);csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val()var post_data = {'id': data.id,'csrfmiddlewaretoken': csrfmiddlewaretoken}$.ajax({type: "POST",url: "/liebiao/",data: post_data,success: function (result) {if (result.code == "0") {layer.msg(result.msg, { icon: 6 })} else {layer.msg(result.msg, { icon: 5 })}}})});} else if (obj.event === 'edit') {// 执行编辑操作layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});// 搜索按钮点击事件$(document).on('click', "#searchBtn", function () {// $("#searchBtn").click(function () {var input_val = $('input[name=username]').val();// layer.msg(input_val)// 重新加载表格数据，传递搜索关键字table.reload('USER', {where: {searchKey: input_val},page: {curr: 1}});});form.on('select(sex)', function (data) {// $(document).on('click', "#sex", function () {// var sex = $('input[sex=sex]').val();table.reload('USER', {where: { //设定异步数据接口的额外参数，任意设sexKey: data.value,},page: {curr: 1 //重新从第 1 页开始}}); //只重载数据})});
</script>{% endblock %}

建站实战干货

第五章 前端UI框架Layui

文章目录

Layui介绍

框架

准备工作

下载layui

django创建项目

转发路由

视图

网页

启动

后台布局

栅格系统

创建母版

卡片

按钮

表单

路由

视图

网页

上传文件

路由

视图

网页

验证

数据表格

静态

路由

视图

网页

验证

动态渲染

路由

视图

网页

验证

分页

路由

视图

网页

验证

工具栏

路由

视图

网页

验证

删除记录

路由

视图

网页

验证

关键字搜索

路由

视图

网页

验证

选择查询

路由

视图

网页

验证

表格内容美化

路由

视图

网页

验证

弹出框

路由

视图

网页

base.html

index.html

验证

第五章前端UI框架Layui