前端基础5——UI框架Layui

一、基本使用

概念：

layui（谐音：类UI)是一个前端UI框架，遵循原生 HTML/CSS/JS 的书写与组织形式，使用门槛低，拿来即用。

同类产品：Bootstrap、EasyUI。

旧官网代码已迁移到公共代码平台。GitLab地址，Gitee地址。

新官网，参考文档

1.下载压缩包。

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

2.将layui目录放到django项目的static静态目录下。
在这里插入图片描述

3.html导入layui.css和layui.js

<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js"></script>

4.使用layui。

##################################################
1.创建应用qingjun。
python manage.py startapp qingjun
##################################################
2.编写根url规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index)
]
##################################################
3.视图函数。
from django.shortcuts import render
def index(request):
    return render(request,'index.html')
##################################################
4.html模板。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<h1>首页</h1>
<script>
layui.use(['layer', 'form'], function(){  // 导入js模块
  var layer = layui.layer   // 为了方便使用，将模块赋予变量
  ,form = layui.form;  

  layer.msg('Hello World');
});
</script>

</body>
</html>

5.查看效果。
在这里插入图片描述

二、管理后台布局

2.1 导航栏

顶部导航：一般用于官网。

侧栏导航：一般用于管理后台。

1.使用官网文档里的代码作为母版，复制过来进行修改，其他作为子页面，做好预留区域。
在这里插入图片描述

2.修改涉及文字，注释不要的头部菜单和用户信息。
3.新增几个菜单和页面，配置导航栏展开和选中效果，主要涉及两个类使用。

菜单展开类样式：layui-nav-itemed
子菜单选中类样式：layui-this

2.2 主题颜色

1.顶部背景。

<div class="layui-header layui-bg-cyan">

2.侧栏背景。

<div class="layui-logo layui-hide-xs layui-bg-cyan">DevOps管理平台</div>
<div class="layui-side-scroll layui-bg-cyan">
<ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">

2.3 字体图标

1.给导航栏前面添加字体图标，美化效果。

<a class="" href="javascript:;"><i class="layui-icon layui-icon-home" style="color: #00FFFF;font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;仪表盘</i></a>

在这里插入图片描述

三、栅格系统

基本概念：

栅格也叫网格系统，是一种平面设计的方法和风格。以规则的网格阵列来指导和规范网页中的版面布局。

将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则：

采用 layui-row 来定义行，比如：<div class=“layui-row”></div>

采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量代表的是该列所占用的12等分数（如6/12），可选值为 1-12。如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

常用参数	释义
layui-row	样式行类
layui-col-md*	样式列类
layui-col-space*	列间距类。支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔。
layui-container	让整个效果集中显示。

1.使用栅格嵌套效果。在列元素（layui-col-md）中插入一个行元素（layui-row）即可。

<div class="layui-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-col-md9" style="background-color: lightseagreen">内容1</div>
            <div class="layui-col-md3" style="background-color: green">内容2</div>
        </div>
        <div class="layui-col-md6">
            <div style="background-color: blue">内容3</div>
        </div>
    </div>
</div>

2.查看效果。
在这里插入图片描述

四、卡片面板

卡片式面板面板通常用于非白色背景色的主体内，从而衬托出边框投影的效果。

主要用于美化显示。

1.添加代码。

<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
		内容区
  </div>
</div>

2.查看效果。
在这里插入图片描述

五、面包屑

页面导航效果。

1.首页添加效果。

<span class="layui-breadcrumb" lay-separator="》">
  <a href="#">首页</a>
  <a><cite>仪表盘</cite></a>
</span>
<hr>

在这里插入图片描述
2.子页面添加效果。

<span class="layui-breadcrumb" lay-separator="》">
  <a href="#">首页</a>
  <a href="#">Kubernetes</a>
  <a><cite>Node</cite></a>
</span>

在这里插入图片描述

六、按钮

配合js绑定事件使用。

1.添加代码。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.ctnrs.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
<!-- 不同主题按钮 --> <br>
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
<!-- 按钮尺寸 -->  <br>
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</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>
<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>
<button type="button" class="layui-btn">
    <i class="layui-icon layui-icon-addition">增加</i>
</button>
<button type="button" class="layui-btn">
    <i class="layui-icon layui-icon-subtraction">删除</i>
</button>

2.查看效果。
在这里插入图片描述

七、表单

form.on语法：form.on(‘event(过滤器值)’, callback);

form模块在 layui 事件机制中注册了专属事件，类似于js onclick：

event	描述
select	触发select下拉选择事件
checkbox	触发checkbox复选框勾选事件
switch	触发checkbox复选框开关事件
radio	触发radio单选框事件
submit	触发表单提交事件

1.表单基本区块结构。

<form action="" class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">标签区域</label>
      <div class="layui-input-block" >
             表单元素区域
      </div>
    </div>
</form>

2.通过ajax将数据提交到服务端。

相关参数释义：

lay-filter=“formDemo”：类似于ID，选择一个事件标识。

data.field：表单数据及csrf_token都保存到里面。

lay-submit：表单的提交事件是需要通过带有lay-submit属性的按钮来触发的

#################################################################################
1.根url路由规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index),
    re_path('user/',views.user,name='user')
]
#################################################################################
2.app(qingjun)视图函数。
def user(request):
    if request.method == "GET":   #from自带提交事件。
        print("from提交")
        print(request.GET.get("username"))
    elif request.method == "POST":     #ajax绑定事件提交。
        print("ajax提交")
        print(request.POST)
        code = 0
        msg = "创建用户成功！"
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)

#################################################################################
3.子板部分内容。
<form class="layui-form" action=""  onsubmit="return false"> //采用post请求，执行下方的js脚本，通过ajax将表单数据提交给服务端接口。
    {% csrf_token %}   //解决csrf安全机制问题。
  <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">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </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="switch" 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>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        var $ = layui.jquery;
        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log(data.field);
            $.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})
                    }
                },
                error: function () {
                    layer.msg("服务器接口异常！", {icon: 5})
                }
            });
        });
    });
</script>

3.查看效果。
在这里插入图片描述

八、上传文件

通过上传模块upload.render实现。

1.接上述示例，添加一个上传文件按钮（表单项）。

<div class="layui-form-item">
    <label class="layui-form-label">上传头像</label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传文件</button>
    </div>
</div>

在这里插入图片描述

2.通过ajax将图片上传到服务端。

###############################################################
1.接上述示例，将子板js内容修改如下。
<script>
layui.use(['form','upload'], function(){   //导入upload模块。
  var form = layui.form;
  var $ = layui.jquery
  var upload = layui.upload;
    
  upload.render({
    elem: '#test1'    //选择元素
    ,url: '/user/'    //服务端上传接口
    ,auto: false      //是否选完文件后自动上传
    ,bindAction: '#uploadBtn'     //绑定提交表单按钮，一般配合auto: false使用
    ,accept: 'file'     //指定允许上传时效验的文件类型
    ,size: 10240        //限制文件大小，单位 KB
    ,exts: 'jpg|txt'   //允许上传的文件后缀，一般结合accept设置
    // 上传前回调
    ,before: function () {       //before:文件提交上传前的回调
          // 兴趣爱好多选保存到数组中
          var like = [];
          $("input[name='like']:checked").each(function () {
              like.push($(this).val());
          });
          this.data = {
              csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
              username: $('input[name="username"]').val(),
              password: $('input[name="password"]').val(),
              city: $('select[name="city"]').val(),
              like: like,  // 'like': ['协作,阅读'],
              status: $('input[name="status"]').val(),
              sex: $('input[name="sex"]:checked').val(),
              desc: $('textarea[name="desc"]').val(),
          };
      }
    ,done: function(res){     //done:执行上传请求后的回调，上传完后回调，服务端以json格式返回数据。
        if (res.code == "0") {
            layer.msg(res.msg, {icon: 6});
        } else {
            layer.msg(res.msg, {icon: 5});
        }
    }
    ,error: function (res) {            //error:执行上传请求出现异常的回调
       layer.msg("服务器接口异常！", {icon:5})
    }
  });
});
</script>
###############################################################
2.接上述示例，将视图函数修改如下。
def user(request):
    if request.method == "GET":   #from自带提交事件。
        print("from提交")
        print(request.GET.get("username"))
    elif request.method == "POST":     #ajax绑定事件提交。
        print("ajax提交")
        print(request.POST)
        file_obj = request.FILES.get('file')
        try:
            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)
            code = 0
            msg = "上传成功."
        except Exception as e:
            code = 1
            msg = "上传失败！"
        code = 0
        msg = "创建用户成功！"
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)

3.查看效果。
在这里插入图片描述

九、数据表格

通过table模块对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。

9.1 table模块常用参数

参数

类型

说明

示例值

elem

String/DOM

指定原始 table 容器的选择器或 DOM，方法渲染方式必填

“#demo”

cols

Array

设置表头。值是一个二维数组。方法渲染方式必填

url（等）

异步数据接口相关参数。其中 url 参数为必填项

toolbar

String/DOM/Boolean

开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器toolbar: ‘

xxx

’ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default’ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数

false

defaultToolbar

Array

该参数可自由配置头部工具栏右侧的图标按钮

done

Function

数据渲染完的回调。你可以借此做一些其它的操作

error

Function

数据请求失败的回调，返回两个参数：错误对象、内容 layui 2.6.0 新增

data

Array

直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。

[{}, {}, {}, {}, …]

totalRow

Boolean/String

是否开启合计行区域

false

page

Boolean/Object

开启分页（默认：false）。支持传入一个对象，里面可包含 laypage组件所有支持的参数（jump、elem除外）

{theme: ‘#c00’}

limit

Number

每页显示的条数（默认 10）。值需对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数

limits

Array

每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。注意：优先级低于 page 参数中的 limits 参数

[30,60,90]

title

String

定义 table 的大标题（在文件导出等地方会用到）

“用户表”

text

Object

自定义文本，如空数据时的异常提示等。

String

设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。另外，若该参数未设置，则默认从

中的 id 属性值中获取。

test

cols 表头参数

参数	类型	说明	示例值
field	String	设定字段名。非常重要，且是表格数据列的唯一标识	username
title	String	设定标题名称	用户名
width	Number/String	设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比。请结合实际情况，对不同列做不同设定。	200 30%
type	String	设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列）	任意一个可选值
fixed	String	固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。	left（同 true） right
hide	Boolean	是否初始隐藏列，默认：false。layui 2.4.0 新增	true
sort	Boolean	是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。	true
edit	String	单元格编辑类型（默认不开启）目前只支持：text（输入框）	text
style	String	自定义单元格样式。即传入 CSS 样式	background-color: #5FB878; color: #fff;
align	String	单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）	center
templet	String	自定义列模板，模板遵循 laytpl语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等
toolbar	String	绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮

9.2 创建表格

1.接上述示例，新建一个子模版，在卡片面板区域新增一个表格。

<table id="demo" lay-filter="test"></table>

在这里插入图片描述
2.子模版js代码。

<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo' // 选择table元素
    ,url: '/user_data/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名'}
      ,{field: 'sex', title: '性别'}
      ,{field: 'email', title: '邮箱'}
    ]]
  });
});
</script>

3.新增url接口和视图函数。

#################################################
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index),
    re_path('user_data/',views.user_data,name='user_data'),
]
#################################################
def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            user.append(row)
        msg = "获取用户数据成功！"
        data = {'code': 0, 'data': user, 'msg': msg}
        return JsonResponse(data)   #如果传递不是一个字典，需要设置safe=False

4.查看数据接口返回的JSON数据格式。

{
    "code": 0,
    "data": [{}, {}],
    "msg": "",
    "count": 1000  
}

在这里插入图片描述

5.查看卡片面板页面显示效果。

|

9.3 表格分页

分页效果：比如一页显示10条记录，共十页。用户可以自行翻阅，记录少，清晰显示。

js中的table.render 默认会自动传递两个参数：?page=1&limit=30，该参数可通过 request 自定义。

page：代表当前第几页。

limit：代表每页数据条数。

1.服务端数据接口根据这两个传递参数，返回指定数量数据。

page = int(request.GET.get('page'))
limit = int(request.GET.get('limit'))
# data = data[0:10]
start = (page - 1) * limit  # 切片的起始值
end = page * limit  # 切片的末值
data = data[start:end] # 返回指定数据范围

在这里插入图片描述

2.接上述示例，修改视图函数如下。

def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            user.append(row)
        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)

3.查看卡片面板效果。
在这里插入图片描述

9.4 表格工具栏

实现思路：

第一步，先基于上面的“表格分页”案例的代码上，把表格框架弄出来。（头工具栏事件）

第二步，再针对实现每个按钮功能。（监听行工具事件）

第三步，实现删除操作。监听行工具事件函数第一个参数obj是当前行所有数据，可以console.log(obj)在控制台查看。所以实现删除操作，只需要把这行ID或者其他列值传递给服务端即可，即前端ajax DELETE提交当前行ID到服务端接口。

第四步，实现编辑操作。以修改邮箱为例，前端ajax PUT 提交当前行ID和弹出框输入的信息到服务端接口。
其中的回调函数可以根据不同状态，使用layer提示框。服务端一个函数视图实现增删改查，即GET/POST/PUT/DELETE

常见HTTP方法	数据处理	说明
POST	新增	新增一个没有id的资源
GET	获取	取得一个资源
PUT	更新	更新一个资源。或新增一个含id资源(如果id不存在)
DELETE	删除	删除一个资源

1.新增表格头部编辑栏和行工具栏。

<!--  头部工具栏，左侧 -->
<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>
#########################################################################################
##js代码部分，接上述案例的url规则和视图函数。
<script>
layui.use('table', function(){
    var table = layui.table;
    table.render({
        elem: '#demo' // 选择table元素
        ,url: '/user_data/' //数据接口
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]
        ,page: true //开启分页
        ,title: '用户数据表'
        ,cols: [[ //表头
            {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
            ,{field: 'email', title: '邮箱'}
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
        ]]
    });
    //头工具栏事件
    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);
          });
        } else if(obj.event === 'edit'){
          layer.prompt({
            formType: 2
            ,value: data.email
          }, function(value, index){
            obj.update({
              email: value
        });
        layer.close(index);
      });
    }
    });
});
</script>

在这里插入图片描述
2.实现右侧的“编辑”和“删除”操作。

##################################################################
#接上述案例，修改视图函数如下。
from django.http import QueryDict 
def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            user.append(row)
        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
    elif request.method == "DELETE":  #删除记录。
        DELETE = QueryDict(request.body)
        id = DELETE.get('id')
        print(id)
        code = 0
        msg = "删除成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "PUT":  #更新记录。
        PUT = QueryDict(request.body)    # 由于PUT和DELETE并没有像GET那种封装好的字典结果，需要我们手动处理request.body获取参数
        id = PUT.get('id')
        email = PUT.get('email')
        print(id,email)
        code = 0
        msg = "更新成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "POST":  #新建记录。
        pass
##################################################################
{% csrf_token %}   //添加此行。
<!--  头部工具栏，左侧 -->
<script type="text/html" id="toolbarDemo">
......
......
##################################################################
#接上述案例，修改js脚本如下。
<script>
layui.use('table', function(){
    var table = layui.table;
    $ = layui.jquery;
    table.render({
        elem: '#demo' // 选择table元素
        ,url: '/user_data/' //数据接口
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]
        ,page: true //开启分页
        ,title: '用户数据表'
        ,cols: [[ //表头
            {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
            ,{field: 'email', title: '邮箱'}
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
        ]]
    });
    //头工具栏事件
    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(data);
        //console.log(obj)
        if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            var csrf_token = $("[name='csrfmiddlewaretoken']").val();
            var post_data = {'id': data.id, 'csrfmiddlewaretoken': csrf_token};
            $.ajax({
                type: "DELETE",
                url: "/user_data/",
                data: post_data,
                headers:{'X-CSRFToken': csrf_token},
                success: function (result) {
                    if(result.code == '0'){
                        obj.del();  // 删除当前页面数据，届时ajax将数据id传服务端进行删除数据库
                        layer.msg(result.msg, {icon: 6,time: 1000})  // icon 6 微笑，time弹出时间，默认3秒，单位毫秒
                    } else {
                        layer.msg(result.msg, {icon: 5})  // icon 5 哭泣
                    }
                },
                error: function () {
                    layer.msg("服务器接口异常！", {icon: 5})
                }
            });
            obj.del();
            layer.close(index);
          });
        } else if(obj.event === 'edit'){
          layer.prompt({
            formType: 2
            ,value: data.email
          }, function(value, index){
            var csrf_token = $("[name='csrfmiddlewaretoken']").val();
            var post_data = {'id': index, 'email': value};
            $.ajax({
                type: "PUT",
                url: "/user_data/",
                data: post_data,
                headers:{'X-CSRFToken': csrf_token},
                success: function (result) {
                    if(result.code == '0'){
                        obj.update({
                          email: value
                        });
                        layer.msg(result.msg, {icon: 6,time: 1000})  // icon 6 微笑，time弹出时间，默认3秒，单位毫秒
                    } else {
                        layer.msg(result.msg, {icon: 5})  // icon 5 哭泣
                    }
                },
                error: function () {
                    layer.msg("服务器接口异常！", {icon: 5})
                }
            });
            obj.update({
              email: value
            });
            layer.close(index);
          });
        }
    });
});
</script>

在这里插入图片描述

9.5 表格查询

9.5.1 搜索关键字查询

实现思路：

在已有的左侧位置创建input搜索框和button按钮。

使用jquery绑定按钮事件并获取input输入框值。

使用table.reload重载表格。

服务端接受url传参，根据搜索关键字返回数据

1.增加搜索框。

<!--  头部工具栏，左侧 -->
<script type="text/html" id="toolbarDemo">
    <a href="#" class="layui-btn" style="float: left;margin-right: 50px">创建</a>
    <input type="text" name="username" lay-verify="title" placeholder="请输入用户名" class="layui-input" style="width: 150px;float: left">
    <button class="layui-btn" id="searchBtn" style="float: left">搜索</button>
</script>

在这里插入图片描述

2.给表格设置ID。
在这里插入图片描述
3.监听搜索按钮事件与表格重载。表格重载其实就是重新从后端获取数据，刷新表格。

##接上述示例，在layui.use函数里追加如下内容
$(document).on('click','#searchBtn', function () {
//$('#searchBtn').click(function ()[
    {#var input_val = $('.layui-input').val();#}
    var input_val = $("input[name='username']").val();
    table.reload('TT', {
        where: {   //设定异步数据接口的额外参数，任意设置
            search_key: input_val
        },
        page: {
            curr: 1  //重新从第 1 页开始
        }
    })
})

4.服务端数据接口。

####接上述示例，修改视图函数。
def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            search_key = request.GET.get("search_key", None)
            if search_key:
                if search_key == name:   # == 换成 in 则为模糊查询
                    user.append(row)
            else:
                user.append(row)

        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
    elif request.method == "DELETE":  #删除记录。
        DELETE = QueryDict(request.body)
        id = DELETE.get('id')
        print(id)
        code = 0
        msg = "删除成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "PUT":  #更新记录。
        PUT = QueryDict(request.body)    # 由于PUT和DELETE并没有像GET那种封装好的字典结果，需要我们手动处理request.body获取参数
        id = PUT.get('id')
        email = PUT.get('email')
        print(id,email)
        code = 0
        msg = "更新成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "POST":  #新建记录。
        pass

5.验证效果，查询name，返回关键字给服务端。
在这里插入图片描述

9.5.2 选择框查询

与上面思路一样。增加选择框，根据已有的信息选择，这里是性别为例。

1.增加选择框。

<!--  头部工具栏，左侧 -->
<script type="text/html" id="toolbarDemo">
    <a href="#" class="layui-btn" style="float: left;margin-right: 50px">创建</a>
    <input type="text" name="username" lay-verify="title" placeholder="请输入用户名" class="layui-input" style="width: 150px;float: left">
    <button class="layui-btn" id="searchBtn" style="float: left">搜索</button>
    <label class="layui-form-label" style="width: 100px">性别</label>
    <div class="layui-input-inline" style="float: left;margin-right: 50px">
        <select name="sex" lay-verify="required" lay-search="" lay-filter="sex">
              <option value="">直接选择或搜索选择</option>
              <option value="男">男</option>
              <option value="女">女</option>
        </select>
    </div>
</script>

2.表单（选择框）事件监听。

########################################################################
#增加form模块。
layui.use(['table','form'], function(){
    var form = layui.form;
########################################################################
##js脚本内容。
form.on('select(sex)', function (data) {
    var select_val = data.value;
    table.reload('TT', {
        where: {   //设定异步数据接口的额外参数，任意设置
            search_sex: select_val
        },
        page: {
            curr: 1  //重新从第 1 页开始
        }
    });
})

3.服务端数据接口。

def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            search_key = request.GET.get("search_key", None)
            select_sex = request.GET.get("select_sex", None)
            if search_key and select_sex:   # 如果两个条件都满足
                if search_key in name and select_sex == sex:
                    user.append(row)
            elif search_key:     # 满足一个条件
                if search_key in name:
                    user.append(row)
            elif select_sex:
                if select_sex == sex:
                    user.append(row)
            else:
                user.append(row)

        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
    elif request.method == "DELETE":  #删除记录。
        DELETE = QueryDict(request.body)
        id = DELETE.get('id')
        print(id)
        code = 0
        msg = "删除成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "PUT":  #更新记录。
        PUT = QueryDict(request.body)    # 由于PUT和DELETE并没有像GET那种封装好的字典结果，需要我们手动处理request.body获取参数
        id = PUT.get('id')
        email = PUT.get('email')
        print(id,email)
        code = 0
        msg = "更新成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "POST":  #新建记录。
        pass

在这里插入图片描述

9.6 数据表格内容美化

在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出，若要对某列的单元格添加链接等其它元素，可以借助该参数来轻松实现。

1.方式一，直接写标签进行美化。

##############################################
##代码格式。
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});   
##############################################
##示例。
    ,{field: 'sex', title: '性别',templet: function (row){
        if (row.sex == "女") {
            return '<span style="color: red">' + row.sex + '</span>'
        } else {
            return '<span style="color: blue">' + row.sex +  '</span>'
        }
    }}
    ,{field: 'email', title: '邮箱'}
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]]

在这里插入图片描述

2.定义函数使用。

// 数据表格指定函数
,{field: 'username', title: '用户名',templet: sexFormat}

// 定义处理表格内容函数
    function sexFormat(d) {
        if(d.username == "慕卿君") {
            return '<span style="color: red">' + d.username + '<span>'
        } else {
            return '<span style="color: blue">' + d.username + '<span>'
        }
    }

在这里插入图片描述

十、弹出层

使用layer模块实现弹出效果。

常用类型：

layer.msg：提示框。

layer.open支持的几种常用类型：

0：信息框，默认，输出一个文本。

1：页面层，输出一段HTML内容。

2：内嵌层，加载网址。

1.提示框。

layer.msg('提示框', {icon: 6});

在这里插入图片描述
2.信息框输出一个文本。

##js子板内添加。
layer.open({
  type: 0,
  content: '<span style="color: red">这是一个普通的文本<span>' // 字符串或者HTML
});

在这里插入图片描述
3.页面层输出一段HTML内容。

#########################################################
##母板的body外定义按钮。
<head>
</head>

<div style="width: 100px;height: 100px;background-color: oldlace;display: none" id="qingjun">
</div>

<body>
</body>
#########################################################
##子板的js内引用按钮id。
layer.open({
  type: 1,
  content: $('#qingjun')  ##根据按钮id引用。
});

在这里插入图片描述
4.内嵌层加载网址。

##子板js内添加。
layer.open({
  type: 2,
  content: "https://blog.csdn.net/yi_qingjun",  //弹出地址。
  title: ["百慕卿君博客网站",'font-size:18px;'],
  area: ["40%","60%"]   //也可以设置像素。
});

在这里插入图片描述