XMYX-0

第五章前端UI框架Layui

第一章：前端开发基础：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

框架

样式类

类主题

样式类

绑定表单提交事件

渲染

绑定工具栏事件

表格重载

表格数据美化

前端UI框架:Layui

Layui介绍

Layui基本使用

后台布局

栅格系统

layui-row

layui-col-md*

颜色

字体图标

卡片面板

layui-card-*

按钮

layui-btn

layui-btn-*

表单

layui-form,layui-form-item

form,on

上传文件

upload.render

数据表格

table.render

table.on

table.reload

templet

弹出层

layer.open

layer.msg

准备工作

下载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 views

urlpatterns = [
    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')

网页


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Layuititle>
head>

<body>
    <p>hellop>
body>

html>

启动

python3 manage.py runserver 0.0.0.0:8080

后台布局

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

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


DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>运维管理平台title>
    
    <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>
            
            <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">
                
                <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>   其他系统a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">OAa>dd>
                            <dd><a href="javascript:;">人事a>dd>
                            <dd><a href="javascript:;">考核a>dd>
                            <dd><a href="">the linksa>dd>
                        dl>
                    li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">自动化a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">CIa>dd>
                            <dd><a href="javascript:;">CDa>dd>
                            <dd><a href="">超链接a>dd>
                        dl>
                    li>
                    <li class="layui-nav-item"><a href="javascript:;">k8sa>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>
    
    <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: '处理右侧面板的操作
'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
    script>
body>

html>

红框里边的都改动过

栅格系统

1.	采用 layui-row 来定义行，如：
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）元素中放入你自己的任意元素填充内容，完成布局！


DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>运维管理平台title>
    
    <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>
            
            <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">
                
                <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>   其他系统a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">OAa>dd>
                            <dd><a href="javascript:;">人事a>dd>
                            <dd><a href="javascript:;">考核a>dd>
                            <dd><a href="">the linksa>dd>
                        dl>
                    li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">自动化a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">CIa>dd>
                            <dd><a href="javascript:;">CDa>dd>
                            <dd><a href="">超链接a>dd>
                        dl>
                    li>
                    <li class="layui-nav-item"><a href="javascript:;">k8sa>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/12div>
                    div>
                    <div class="layui-col-md3">
                        <div style="background-color: blue;">你的内容 3/12div>
                    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>

        <div class="layui-footer">
            
            底部固定区域www.test.com
        div>
    div>
    
    <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: '处理右侧面板的操作
'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
    script>
body>

html>

创建母版

现有index.html更该名字为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>
    
    <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>
            
            <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">
                
                <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>   其他系统a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">OAa>dd>
                            <dd><a href="javascript:;">人事a>dd>
                            <dd><a href="javascript:;">考核a>dd>
                            <dd><a href="">the linksa>dd>
                        dl>
                    li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">自动化a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">CIa>dd>
                            <dd><a href="javascript:;">CDa>dd>
                            <dd><a href="">超链接a>dd>
                        dl>
                    li>
                    <li class="layui-nav-item"><a href="javascript:;">k8sa>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>
    
    <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: '处理右侧面板的操作
'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
    script>
body>

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 %}

按钮


{% 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 views

urlpatterns = [
    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继承上边的不变


{% 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 views

urlpatterns = [
    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 os
        file_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继承上边的不变


{% 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>
    //Demo
    layui.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 views

urlpatterns = [
    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继承上边的不变


{% 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-29td>
                    <td>人生就像是一场修行td>
                tr>
                <tr>
                    <td>许闲心td>
                    <td>2016-11-28td>
                    <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 views

urlpatterns = [
    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.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继承上边的不变


{% 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.table
        var $ = 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 views

urlpatterns = [
    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.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) * limit
        end = page * limit
        data = data[start:end]
        code = "0"
        msg = "获取数据成功"
        
        result = {'code':code,'msg':msg,'count':count,'data':data}
        return JsonResponse(result)

网页

base.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.table
        var $ = 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 views

urlpatterns = [
    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.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) * limit
        end = page * limit
        data = data[start:end]
        code = "0"
        msg = "获取数据成功"
        
        result = {'code':code,'msg':msg,'count':count,'data':data}
        return JsonResponse(result)

网页

base.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.table
        var $ = 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 views

urlpatterns = [
    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.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) * limit
        end = page * limit
        data = 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继承上边的不变


{% 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.table
        var $ = 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 views

urlpatterns = [
    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.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) * limit
        end = page * limit
        data = 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继承上边的不变


{% 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.table
        var $ = 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 views

urlpatterns = [
    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) * limit
        end = page * limit
        data = 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继承上边的不变


{% 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}">IDth>

下述是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 views

urlpatterns = [
    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) * limit
        end = page * limit
        data = 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继承上边的不变


{% 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 '' + d.sex + ''
                    } else {
                        return '' + d.sex + ''
                    }
                }},
                { 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 views

urlpatterns = [
    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) * limit
        end = page * limit
        data = 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


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>
     
    <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>
            
            <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">
                
                <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>   其他系统a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">OAa>dd>
                            <dd><a href="javascript:;">人事a>dd>
                            <dd><a href="javascript:;">考核a>dd>
                            <dd><a href="">the linksa>dd>
                        dl>
                    li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">自动化a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">CIa>dd>
                            <dd><a href="javascript:;">CDa>dd>
                            <dd><a href="">超链接a>dd>
                        dl>
                    li>
                    <li class="layui-nav-item"><a href="javascript:;">k8sa>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>
    
    <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: '处理右侧面板的操作
'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
    script>
body>

html>

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: 'hello'
            })
            */
            // 页面层
            /*
            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 '' + d.sex + ''
                    } else {
                        return '' + d.sex + ''
                    }
                }},
                { 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 %}

验证

你可能感兴趣的:(运维开发实战Web前端开发,前端,ui,layui)

OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
你可能遗漏的一些C#/.NET/.NET Core知识点追逐时光者 C#.NET DotNetGuide编程指南 c#.net .netcore microsoft
前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
linux 发展史种树的猴子内核 java 操作系统 linux 大数据
linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
spring如何整合druid连接池？惜.己 spring spring junit 数据库 java idea 后端 xml
目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android 更改窗口的层次
最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
matlab mle 优化,MLE+: Matlab Toolbox for Integrated Modeling, Control and Optimization for Buildings... Simon Zhong matlab mle 优化
摘要：FollowingunilateralopticnervesectioninadultPVGhoodedrat,theaxonguidancecueephrin-A2isup-regulatedincaudalbutnotrostralsuperiorcolliculus(SC)andtheEphA5receptorisdown-regulatedinaxotomisedretinalgan
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
TextFiled 中输入金额宁梓茞
要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range
JAVA·一个简单的登录窗口 MortalTom java 开发语言学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
GenVisR 基因组数据可视化实战(三) 11的雾
3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作 Lossya ui 自动化测试工具自动化测试 appium
引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
Python3.7出现“ModuleNotFoundError: No module named ‘Tkinter‘”错误的解决方法可爱的小红猪 python
Python3.7出现“ModuleNotFoundError:Nomodulenamed‘Tkinter’”错误的解决方法在网上看到很多针对这个问题的解决方法都是重新安装或配置Tkinter库，但Tkinter是python内置的标准GUI库，安装Python时就已经内置在了库中，不需要另外下载。针对于Tkinter，你的代码很可能是这样的：importTkinter或者是这样fromTkint
设计模式之建造者模式(通俗易懂--代码辅助理解【Java版】） ok!ko 设计模式设计模式建造者模式 java
文章目录设计模式概述1、建造者模式2、建造者模式使用场景3、优点4、缺点5、主要角色6、代码示例：1）实现要求2）UML图3)实现步骤：1）创建一个表示食物条目和食物包装的接口2）创建实现Packing接口的实体类3）创建实现Item接口的抽象类，该类提供了默认的功能4）创建扩展了Burger和ColdDrink的实体类5）创建一个Meal类，带有上面定义的Item对象6）创建一个MealBuil
多线程编程之理财周凡杨 java 多线程生产者消费者理财
现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元（暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
[Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
SecureCRT快捷键 daizj secureCRT 快捷键
ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w: 删除光标至行首
Java 子类与父类这间的转换周凡杨 java 父类与子类的转换
最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。代码：
可视化swing界面编辑朱辉辉33 eclipse swing
今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
web报表工具FineReport常用函数的用法总结（文本函数）老A不折腾 finereport web报表工具报表软件 java报表
文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。 CODE CODE(text):计算文本串中第一个字
mysql安装出错林鹤霄 mysql安装
[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing... #####################
linux下编译libuv aigo libuv
下载最新版本的libuv源码，解压后执行： ./autogen.sh 这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool 如果提示错误：make: *** No targe
中国行政区数据及三级联动菜单 alxw4616
近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局发布时间：2014-01-17 15:0
哈夫曼加密文件百合不是茶哈夫曼压缩哈夫曼加密二叉树
在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤; 加密步骤: 1,统计文件中字节出现的次数,作为权值 2,创建节点和哈夫曼树 3,得到每个子节点01串 4,使用哈夫曼编码表示每个字节
JDK1.5 Cyclicbarrier实例 bijian1013 java thread java多线程 Cyclicbarrier
CyclicBarrier类一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
九项重要的职业规划 bijian1013 工作学习
一. 学习的步伐不停止古人说，活到老，学到老。终身学习应该是您的座右铭。世界在不断变化，每个人都在寻找各自的事业途径。您只有保证了足够的技能储
【Java范型四】范型方法 bit1129 java
范型参数不仅仅可以用于类型的声明上，例如 package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
ua实现split字符串分隔 ronin47 lua split
LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
java-从先序遍历和中序遍历重建二叉树 bylijinnan java
public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
openfire开发指南《连接和登陆》开窍的石头 openfire 开发指南 smack
第一步官网下载smack.jar包下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步把smack里边的jar导入你新建的java项目中开始编写smack连接openfire代码 p
[移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎但是，对于手机的新设计，有几点我们也要注意第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
20款国外知名的php开源cms系统 cuiyadll cms
内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
Java生成全局唯一标识符 darrenzhu java uuid unique identifier id
How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
5天学会一种 web 开发框架 dcj3sjt126com Web 框架 framework
web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路建议把本文
Gson使用三(Map集合的处理,一对多处理) eksliang json gson Gson map Gson 集合处理
转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述 Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。二、Map参考实例 package com.ickes.json; import java.lang.refl
cordova实现“再点击一次退出”效果 gundumw100 android
基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
openldap configuration leaning note iwindyforest configuration
hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
Nullability and Objective-C 啸笑天 Objective-C
https://developer.apple.com/swift/blog/?id=25 http://www.cocoachina.com/ios/20150601/11989.html http://blog.csdn.net/zhangao0086/article/details/44409913 http://blog.sunnyxx
jsp中实现参数隐藏的两种方法 macroli JavaScript jsp
在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境 bootstrap 纵观千象
Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。 <a href="#/group-buy" class="btn bt
二维数组在Java和C中的区别流淚的芥末 java c 二维数组数组
Java代码： public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } } 运行结果： Exception in thread "mai
systemctl命令用法 wmlJava linux systemctl
对比表，以 apache / httpd 为例任务旧指令新指令使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h

第五章 前端UI框架Layui

文章目录

Layui介绍

框架

准备工作

下载layui

django创建项目

转发路由

视图

网页

启动

后台布局

栅格系统

创建母版

卡片

按钮

表单

路由

视图

网页

上传文件

路由

视图

网页

验证

数据表格

静态

路由

视图

网页

验证

动态渲染

路由

视图

网页

验证

分页

路由

视图

网页

验证

工具栏

路由

视图

网页

验证

删除记录

路由

视图

网页

验证

关键字搜索

路由

视图

网页

验证

选择查询

路由

视图

网页

验证

表格内容美化

路由

视图

网页

验证

弹出框

路由

视图

网页

base.html

index.html

验证

你可能感兴趣的:(运维开发实战Web前端开发,前端,ui,layui)

第五章前端UI框架Layui