国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端基礎(chǔ)5——UI框架Layui

2年前作者：百慕卿君分類：Toy博客閱讀(28)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了前端基礎(chǔ)5——UI框架Layui。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

一、基本使用

概念：

layui（諧音：類UI)是一個(gè)前端UI框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式，使用門(mén)檻低，拿來(lái)即用。

同類產(chǎn)品：Bootstrap、EasyUI。

舊官網(wǎng)代碼已遷移到公共代碼平臺(tái)。GitLab地址，Gitee地址。

新官網(wǎng)，參考文檔

1.下載壓縮包。

  ├─css //css目錄
  │  │─modules //模塊 css 目錄（一般如果模塊相對(duì)較大，我們會(huì)單獨(dú)提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心樣式文件
  ├─font  //字體圖標(biāo)目錄
  └─layui.js //核心庫(kù)

2.將layui目錄放到django項(xiàng)目的static靜態(tài)目錄下。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

3.html導(dǎo)入layui.css和layui.js

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

4.使用layui。

##################################################
1.創(chuàng)建應(yīng)用qingjun。
python manage.py startapp qingjun
##################################################
2.編寫(xiě)根url規(guī)則。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index)
]
##################################################
3.視圖函數(shù)。
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>首頁(yè)</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<h1>首頁(yè)</h1>
<script>
layui.use(['layer', 'form'], function(){  // 導(dǎo)入js模塊
  var layer = layui.layer   // 為了方便使用，將模塊賦予變量
  ,form = layui.form;  

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

</body>
</html>

5.查看效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

二、管理后臺(tái)布局

2.1 導(dǎo)航欄

頂部導(dǎo)航：一般用于官網(wǎng)。

側(cè)欄導(dǎo)航：一般用于管理后臺(tái)。

1.使用官網(wǎng)文檔里的代碼作為母版，復(fù)制過(guò)來(lái)進(jìn)行修改，其他作為子頁(yè)面，做好預(yù)留區(qū)域。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

2.修改涉及文字，注釋不要的頭部菜單和用戶信息。
3.新增幾個(gè)菜單和頁(yè)面，配置導(dǎo)航欄展開(kāi)和選中效果，主要涉及兩個(gè)類使用。

菜單展開(kāi)類樣式：layui-nav-itemed
子菜單選中類樣式：layui-this

2.2 主題顏色

1.頂部背景。

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

2.側(cè)欄背景。

<div class="layui-logo layui-hide-xs layui-bg-cyan">DevOps管理平臺(tái)</div>
<div class="layui-side-scroll layui-bg-cyan">
<ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">

2.3 字體圖標(biāo)

1.給導(dǎo)航欄前面添加字體圖標(biāo)，美化效果。

<a class="" href="javascript:;"><i class="layui-icon layui-icon-home" style="color: #00FFFF;font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;儀表盤(pán)</i></a>

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

三、柵格系統(tǒng)

基本概念：

柵格也叫網(wǎng)格系統(tǒng)，是一種平面設(shè)計(jì)的方法和風(fēng)格。以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局。

將容器進(jìn)行了 12 等分，預(yù)設(shè)了 4*12 種 CSS 排列類，它們?cè)谝苿?dòng)設(shè)備、平板、桌面中/大尺寸四種不同的屏幕下發(fā)揮著各自的作用。

柵格布局規(guī)則：

采用 layui-row 來(lái)定義行，比如：<div class=“l(fā)ayui-row”></div>

采用類似 layui-col-md* 這樣的預(yù)設(shè)類來(lái)定義一組列（column），且放在行（row）內(nèi)。其中：變量md 代表的是不同屏幕下的標(biāo)記（可選值見(jiàn)下文）變量代表的是該列所占用的12等分?jǐn)?shù)（如6/12），可選值為 1-12。如果多個(gè)列的“等分?jǐn)?shù)值”總和等于12，則剛好滿行排列。如果大于12，多余的列將自動(dòng)另起一行。

列可以同時(shí)出現(xiàn)最多四種不同的組合，分別是：xs（超小屏幕，如手機(jī)）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈現(xiàn)更加動(dòng)態(tài)靈活的布局。

可對(duì)列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預(yù)設(shè)類來(lái)定義列的間距和偏移。

最后，在列（column）元素中放入你自己的任意元素填充內(nèi)容，完成布局！

常用參數(shù)	釋義
layui-row	樣式行類
layui-col-md*	樣式列類
layui-col-space*	列間距類。支持列之間為 1px-30px 區(qū)間的所有雙數(shù)間隔，以及 1px、5px、15px、25px 的單數(shù)間隔。
layui-container	讓整個(gè)效果集中顯示。

1.使用柵格嵌套效果。在列元素（layui-col-md）中插入一個(gè)行元素（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">內(nèi)容1</div>
            <div class="layui-col-md3" style="background-color: green">內(nèi)容2</div>
        </div>
        <div class="layui-col-md6">
            <div style="background-color: blue">內(nèi)容3</div>
        </div>
    </div>
</div>

2.查看效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

四、卡片面板

卡片式面板面板通常用于非白色背景色的主體內(nèi)，從而襯托出邊框投影的效果。

主要用于美化顯示。

1.添加代碼。

<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
		內(nèi)容區(qū)
  </div>
</div>

2.查看效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

五、面包屑

頁(yè)面導(dǎo)航效果。

1.首頁(yè)添加效果。

<span class="layui-breadcrumb" lay-separator="》">
  <a href="#">首頁(yè)</a>
  <a><cite>儀表盤(pán)</cite></a>
</span>
<hr>

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
2.子頁(yè)面添加效果。

<span class="layui-breadcrumb" lay-separator="》">
  <a href="#">首頁(yè)</a>
  <a href="#">Kubernetes</a>
  <a><cite>Node</cite></a>
</span>

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

六、按鈕

配合js綁定事件使用。

1.添加代碼。

<!-- 基礎(chǔ)按鈕 -->
<button type="button" class="layui-btn">一個(gè)標(biāo)準(zhǔn)的按鈕</button>
<a  class="layui-btn">一個(gè)可跳轉(zhuǎn)的按鈕</a>
<div class="layui-btn">一個(gè)按鈕</div>
<!-- 不同主題按鈕 --> <br>
<button type="button" class="layui-btn layui-btn-primary">原始按鈕</button>
<button type="button" class="layui-btn">默認(rèn)按鈕</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">默認(rèn)按鈕</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">默認(rèn)按鈕</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>

<!-- 圖標(biāo)按鈕 --> <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.查看效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

七、表單

form.on語(yǔ)法：form.on(‘event(過(guò)濾器值)’, callback);

form模塊在 layui 事件機(jī)制中注冊(cè)了專屬事件，類似于js onclick：

event	描述
select	觸發(fā)select下拉選擇事件
checkbox	觸發(fā)checkbox復(fù)選框勾選事件
switch	觸發(fā)checkbox復(fù)選框開(kāi)關(guān)事件
radio	觸發(fā)radio單選框事件
submit	觸發(fā)表單提交事件

1.表單基本區(qū)塊結(jié)構(gòu)。

<form action="" class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">標(biāo)簽區(qū)域</label>
      <div class="layui-input-block" >
             表單元素區(qū)域
      </div>
    </div>
</form>

2.通過(guò)ajax將數(shù)據(jù)提交到服務(wù)端。

相關(guān)參數(shù)釋義：

lay-filter=“formDemo”：類似于ID，選擇一個(gè)事件標(biāo)識(shí)。

data.field：表單數(shù)據(jù)及csrf_token都保存到里面。

lay-submit：表單的提交事件是需要通過(guò)帶有l(wèi)ay-submit屬性的按鈕來(lái)觸發(fā)的

#################################################################################
1.根url路由規(guī)則。
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)視圖函數(shù)。
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 = "創(chuàng)建用戶成功！"
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)

#################################################################################
3.子板部分內(nèi)容。
<form class="layui-form" action=""  onsubmit="return false"> //采用post請(qǐng)求，執(zhí)行下方的js腳本，通過(guò)ajax將表單數(shù)據(jù)提交給服務(wù)端接口。
    {% csrf_token %}   //解決csrf安全機(jī)制問(wèn)題。
  <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="請(qǐng)輸入用戶名" 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="請(qǐng)輸入密碼" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">密碼必須滿足字母、數(shù)字和特殊字符</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">興趣愛(ài)好</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="寫(xiě)作">
      <input type="checkbox" name="like[read]" title="閱讀" checked>
      <input type="checkbox" name="like[dai]" title="發(fā)呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">賬號(hào)是否啟用</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="請(qǐng)輸入內(nèi)容" 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">創(chuàng)建</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;
        //監(jiān)聽(tīng)提交
        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("服務(wù)器接口異常！", {icon: 5})
                }
            });
        });
    });
</script>

3.查看效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

八、上傳文件

通過(guò)上傳模塊upload.render實(shí)現(xiàn)。

1.接上述示例，添加一個(gè)上傳文件按鈕（表單項(xiàng)）。

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

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

2.通過(guò)ajax將圖片上傳到服務(wù)端。

###############################################################
1.接上述示例，將子板js內(nèi)容修改如下。
<script>
layui.use(['form','upload'], function(){   //導(dǎo)入upload模塊。
  var form = layui.form;
  var $ = layui.jquery
  var upload = layui.upload;
    
  upload.render({
    elem: '#test1'    //選擇元素
    ,url: '/user/'    //服務(wù)端上傳接口
    ,auto: false      //是否選完文件后自動(dòng)上傳
    ,bindAction: '#uploadBtn'     //綁定提交表單按鈕，一般配合auto: false使用
    ,accept: 'file'     //指定允許上傳時(shí)效驗(yàn)的文件類型
    ,size: 10240        //限制文件大小，單位 KB
    ,exts: 'jpg|txt'   //允許上傳的文件后綴，一般結(jié)合accept設(shè)置
    // 上傳前回調(diào)
    ,before: function () {       //before:文件提交上傳前的回調(diào)
          // 興趣愛(ài)好多選保存到數(shù)組中
          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': ['協(xié)作,閱讀'],
              status: $('input[name="status"]').val(),
              sex: $('input[name="sex"]:checked').val(),
              desc: $('textarea[name="desc"]').val(),
          };
      }
    ,done: function(res){     //done:執(zhí)行上傳請(qǐng)求后的回調(diào)，上傳完后回調(diào)，服務(wù)端以json格式返回?cái)?shù)據(jù)。
        if (res.code == "0") {
            layer.msg(res.msg, {icon: 6});
        } else {
            layer.msg(res.msg, {icon: 5});
        }
    }
    ,error: function (res) {            //error:執(zhí)行上傳請(qǐng)求出現(xiàn)異常的回調(diào)
       layer.msg("服務(wù)器接口異常！", {icon:5})
    }
  });
});
</script>
###############################################################
2.接上述示例，將視圖函數(shù)修改如下。
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 = "創(chuàng)建用戶成功！"
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)

3.查看效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

九、數(shù)據(jù)表格

通過(guò)table模塊對(duì)表格進(jìn)行一些列功能和動(dòng)態(tài)化數(shù)據(jù)操作，涵蓋了日常業(yè)務(wù)所涉及的幾乎全部需求。

9.1 table模塊常用參數(shù)

參數(shù)

類型

說(shuō)明

示例值

elem

String/DOM

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

“#demo”

cols

Array

設(shè)置表頭。值是一個(gè)二維數(shù)組。方法渲染方式必填

url（等）

-

異步數(shù)據(jù)接口相關(guān)參數(shù)。其中 url 參數(shù)為必填項(xiàng)

toolbar

String/DOM/Boolean

開(kāi)啟表格頭部工具欄區(qū)域，該參數(shù)支持四種類型值：toolbar: ‘#toolbarDemo’ //指向自定義工具欄模板選擇器toolbar: ‘

xxx

’ //直接傳入工具欄模板字符toolbar: true //僅開(kāi)啟工具欄，不顯示左側(cè)模板toolbar: ‘default’ //讓工具欄左側(cè)顯示默認(rèn)的內(nèi)置模板注意： 1. 該參數(shù)為 layui 2.4.0 開(kāi)始新增。 2. 若需要“列顯示隱藏”、“導(dǎo)出”、“打印”等功能，則必須開(kāi)啟該參數(shù)

false

defaultToolbar

Array

該參數(shù)可自由配置頭部工具欄右側(cè)的圖標(biāo)按鈕

done

Function

數(shù)據(jù)渲染完的回調(diào)。你可以借此做一些其它的操作

error

Function

數(shù)據(jù)請(qǐng)求失敗的回調(diào)，返回兩個(gè)參數(shù)：錯(cuò)誤對(duì)象、內(nèi)容 layui 2.6.0 新增

-

data

Array

直接賦值數(shù)據(jù)。既適用于只展示一頁(yè)數(shù)據(jù)，也非常適用于對(duì)一段已知數(shù)據(jù)進(jìn)行多頁(yè)展示。

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

totalRow

Boolean/String

是否開(kāi)啟合計(jì)行區(qū)域

false

page

Boolean/Object

開(kāi)啟分頁(yè)（默認(rèn)：false）。支持傳入一個(gè)對(duì)象，里面可包含 laypage組件所有支持的參數(shù)（jump、elem除外）

{theme: ‘#c00’}

limit

Number

每頁(yè)顯示的條數(shù)（默認(rèn) 10）。值需對(duì)應(yīng) limits 參數(shù)的選項(xiàng)。注意：優(yōu)先級(jí)低于 page 參數(shù)中的 limit 參數(shù)

30

limits

Array

每頁(yè)條數(shù)的選擇項(xiàng)，默認(rèn)：[10,20,30,40,50,60,70,80,90]。注意：優(yōu)先級(jí)低于 page 參數(shù)中的 limits 參數(shù)

[30,60,90]

title

String

定義 table 的大標(biāo)題（在文件導(dǎo)出等地方會(huì)用到）

“用戶表”

text

Object

自定義文本，如空數(shù)據(jù)時(shí)的異常提示等。

id

String

設(shè)定容器唯一 id。id 是對(duì)表格的數(shù)據(jù)操作方法上是必要的傳遞條件，它是表格容器的索引，你在下文諸多地方都將會(huì)見(jiàn)識(shí)它的存在。另外，若該參數(shù)未設(shè)置，則默認(rèn)從

中的 id 屬性值中獲取。

test

cols 表頭參數(shù)

參數(shù)	類型	說(shuō)明	示例值
field	String	設(shè)定字段名。非常重要，且是表格數(shù)據(jù)列的唯一標(biāo)識(shí)	username
title	String	設(shè)定標(biāo)題名稱	用戶名
width	Number/String	設(shè)定列寬，若不填寫(xiě)，則自動(dòng)分配；若填寫(xiě)，則支持值為：數(shù)字、百分比。請(qǐng)結(jié)合實(shí)際情況，對(duì)不同列做不同設(shè)定。	200 30%
type	String	設(shè)定列類型。可選值有：normal（常規(guī)列，無(wú)需設(shè)定）checkbox（復(fù)選框列）radio（單選框列，layui 2.4.0 新增）numbers（序號(hào)列）space（空列）	任意一個(gè)可選值
fixed	String	固定列?？蛇x值有：left（固定在左）、right（固定在右）。一旦設(shè)定，對(duì)應(yīng)的列將會(huì)被固定在左或右，不隨滾動(dòng)條而滾動(dòng)。注意：如果是固定在左，該列必須放在表頭最前面；如果是固定在右，該列必須放在表頭最后面。	left（同 true） right
hide	Boolean	是否初始隱藏列，默認(rèn)：false。layui 2.4.0 新增	true
sort	Boolean	是否允許排序（默認(rèn)：false）。如果設(shè)置 true，則在對(duì)應(yīng)的表頭顯示排序icon，從而對(duì)列開(kāi)啟排序功能。	true
edit	String	單元格編輯類型（默認(rèn)不開(kāi)啟）目前只支持：text（輸入框）	text
style	String	自定義單元格樣式。即傳入 CSS 樣式	background-color: #5FB878; color: #fff;
align	String	單元格排列方式?？蛇x值有：left（默認(rèn)）、center（居中）、right（居右）	center
templet	String	自定義列模板，模板遵循 laytpl語(yǔ)法。這是一個(gè)非常實(shí)用的功能，你可借助它實(shí)現(xiàn)邏輯處理，以及將原始數(shù)據(jù)轉(zhuǎn)化成其它格式，如時(shí)間戳轉(zhuǎn)化為日期字符等
toolbar	String	綁定工具條模板?？稍诿啃袑?duì)應(yīng)的列中出現(xiàn)一些自定義的操作性按鈕

9.2 創(chuàng)建表格

1.接上述示例，新建一個(gè)子模版，在卡片面板區(qū)域新增一個(gè)表格。

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

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
2.子模版js代碼。

<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo' // 選擇table元素
    ,url: '/user_data/' //數(shù)據(jù)接口
    ,page: true //開(kāi)啟分頁(yè)
    ,cols: [[ //表頭
      {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
      ,{field: 'username', title: '用戶名'}
      ,{field: 'sex', title: '性別'}
      ,{field: 'email', title: '郵箱'}
    ]]
  });
});
</script>

3.新增url接口和視圖函數(shù)。

#################################################
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 = []  #數(shù)據(jù)格式為[{},{},{}]
        # 正常通過(guò)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 = "獲取用戶數(shù)據(jù)成功！"
        data = {'code': 0, 'data': user, 'msg': msg}
        return JsonResponse(data)   #如果傳遞不是一個(gè)字典，需要設(shè)置safe=False

4.查看數(shù)據(jù)接口返回的JSON數(shù)據(jù)格式。

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

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

5.查看卡片面板頁(yè)面顯示效果。

|

9.3 表格分頁(yè)

分頁(yè)效果：比如一頁(yè)顯示10條記錄，共十頁(yè)。用戶可以自行翻閱，記錄少，清晰顯示。

js中的table.render 默認(rèn)會(huì)自動(dòng)傳遞兩個(gè)參數(shù)：?page=1&limit=30，該參數(shù)可通過(guò) request 自定義。

page：代表當(dāng)前第幾頁(yè)。

limit：代表每頁(yè)數(shù)據(jù)條數(shù)。

1.服務(wù)端數(shù)據(jù)接口根據(jù)這兩個(gè)傳遞參數(shù)，返回指定數(shù)量數(shù)據(jù)。

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] # 返回指定數(shù)據(jù)范圍

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

2.接上述示例，修改視圖函數(shù)如下。

def user_data(request):
    if request.method == "GET":
        user = []  #數(shù)據(jù)格式為[{},{},{}]
        # 正常通過(guò)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)  # 要在切片之前獲取總數(shù)
        page = int(request.GET.get('page', 1))  # 當(dāng)前頁(yè)，第幾頁(yè)
        limit = int(request.GET.get('limit'))  # 當(dāng)前頁(yè)數(shù)量，在table.render參數(shù)配置，默認(rèn)10
        start = (page - 1) * limit  # 獲取上一頁(yè)的最后一個(gè)數(shù)
        end = page * limit  # 當(dāng)前頁(yè)最后一個(gè)數(shù)
        data = user[start:end]
        code = '0'
        msg = "獲取數(shù)據(jù)成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)

3.查看卡片面板效果。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

9.4 表格工具欄

實(shí)現(xiàn)思路：

第一步，先基于上面的“表格分頁(yè)”案例的代碼上，把表格框架弄出來(lái)。（頭工具欄事件）

第二步，再針對(duì)實(shí)現(xiàn)每個(gè)按鈕功能。（監(jiān)聽(tīng)行工具事件）

第三步，實(shí)現(xiàn)刪除操作。監(jiān)聽(tīng)行工具事件函數(shù)第一個(gè)參數(shù)obj是當(dāng)前行所有數(shù)據(jù)，可以console.log(obj)在控制臺(tái)查看。所以實(shí)現(xiàn)刪除操作，只需要把這行ID或者其他列值傳遞給服務(wù)端即可，即前端ajax DELETE提交當(dāng)前行ID到服務(wù)端接口。

第四步，實(shí)現(xiàn)編輯操作。以修改郵箱為例，前端ajax PUT 提交當(dāng)前行ID和彈出框輸入的信息到服務(wù)端接口。
其中的回調(diào)函數(shù)可以根據(jù)不同狀態(tài)，使用layer提示框。服務(wù)端一個(gè)函數(shù)視圖實(shí)現(xiàn)增刪改查，即GET/POST/PUT/DELETE

常見(jiàn)HTTP方法	數(shù)據(jù)處理	說(shuō)明
POST	新增	新增一個(gè)沒(méi)有id的資源
GET	獲取	取得一個(gè)資源
PUT	更新	更新一個(gè)資源?；蛐略鲆粋€(gè)含id資源(如果id不存在)
DELETE	刪除	刪除一個(gè)資源

1.新增表格頭部編輯欄和行工具欄。

<!--  頭部工具欄，左側(cè) -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行數(shù)據(jù)</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">獲取選中數(shù)目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">驗(yàn)證是否全選</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規(guī)則和視圖函數(shù)。
<script>
layui.use('table', function(){
    var table = layui.table;
    table.render({
        elem: '#demo' // 選擇table元素
        ,url: '/user_data/' //數(shù)據(jù)接口
        ,toolbar: '#toolbarDemo' //開(kāi)啟頭部工具欄，并為其綁定左側(cè)模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側(cè)圖標(biāo)。如無(wú)需自定義，去除該參數(shù)即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]
        ,page: true //開(kāi)啟分頁(yè)
        ,title: '用戶數(shù)據(jù)表'
        ,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 + ' 個(gè)');
          break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全選': '未全選');
          break;

          //自定義頭工具欄右側(cè)圖標(biāo) - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('這是工具欄右側(cè)自定義的一個(gè)圖標(biāo)按鈕');
          break;
        };
    });
    //監(jiān)聽(tīng)行工具事件
        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>

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
2.實(shí)現(xiàn)右側(cè)的“編輯”和“刪除”操作。

##################################################################
#接上述案例，修改視圖函數(shù)如下。
from django.http import QueryDict 
def user_data(request):
    if request.method == "GET":
        user = []  #數(shù)據(jù)格式為[{},{},{}]
        # 正常通過(guò)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)  # 要在切片之前獲取總數(shù)
        page = int(request.GET.get('page', 1))  # 當(dāng)前頁(yè)，第幾頁(yè)
        limit = int(request.GET.get('limit'))  # 當(dāng)前頁(yè)數(shù)量，在table.render參數(shù)配置，默認(rèn)10
        start = (page - 1) * limit  # 獲取上一頁(yè)的最后一個(gè)數(shù)
        end = page * limit  # 當(dāng)前頁(yè)最后一個(gè)數(shù)
        data = user[start:end]
        code = '0'
        msg = "獲取數(shù)據(jù)成功."
        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并沒(méi)有像GET那種封裝好的字典結(jié)果，需要我們手動(dòng)處理request.body獲取參數(shù)
        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 %}   //添加此行。
<!--  頭部工具欄，左側(cè) -->
<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/' //數(shù)據(jù)接口
        ,toolbar: '#toolbarDemo' //開(kāi)啟頭部工具欄，并為其綁定左側(cè)模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側(cè)圖標(biāo)。如無(wú)需自定義，去除該參數(shù)即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]
        ,page: true //開(kāi)啟分頁(yè)
        ,title: '用戶數(shù)據(jù)表'
        ,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 + ' 個(gè)');
          break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全選': '未全選');
          break;

          //自定義頭工具欄右側(cè)圖標(biāo) - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('這是工具欄右側(cè)自定義的一個(gè)圖標(biāo)按鈕');
          break;
        };
    });
    //監(jiān)聽(tīng)行工具事件
    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();  // 刪除當(dāng)前頁(yè)面數(shù)據(jù)，屆時(shí)ajax將數(shù)據(jù)id傳服務(wù)端進(jìn)行刪除數(shù)據(jù)庫(kù)
                        layer.msg(result.msg, {icon: 6,time: 1000})  // icon 6 微笑，time彈出時(shí)間，默認(rèn)3秒，單位毫秒
                    } else {
                        layer.msg(result.msg, {icon: 5})  // icon 5 哭泣
                    }
                },
                error: function () {
                    layer.msg("服務(wù)器接口異常！", {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彈出時(shí)間，默認(rèn)3秒，單位毫秒
                    } else {
                        layer.msg(result.msg, {icon: 5})  // icon 5 哭泣
                    }
                },
                error: function () {
                    layer.msg("服務(wù)器接口異常！", {icon: 5})
                }
            });
            obj.update({
              email: value
            });
            layer.close(index);
          });
        }
    });
});
</script>

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

9.5 表格查詢

9.5.1 搜索關(guān)鍵字查詢

實(shí)現(xiàn)思路：

在已有的左側(cè)位置創(chuàng)建input搜索框和button按鈕。

使用jquery綁定按鈕事件并獲取input輸入框值。

使用table.reload重載表格。

服務(wù)端接受url傳參，根據(jù)搜索關(guān)鍵字返回?cái)?shù)據(jù)

1.增加搜索框。

<!--  頭部工具欄，左側(cè) -->
<script type="text/html" id="toolbarDemo">
    <a href="#" class="layui-btn" style="float: left;margin-right: 50px">創(chuàng)建</a>
    <input type="text" name="username" lay-verify="title" placeholder="請(qǐng)輸入用戶名" class="layui-input" style="width: 150px;float: left">
    <button class="layui-btn" id="searchBtn" style="float: left">搜索</button>
</script>

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

2.給表格設(shè)置ID。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
3.監(jiān)聽(tīng)搜索按鈕事件與表格重載。表格重載其實(shí)就是重新從后端獲取數(shù)據(jù)，刷新表格。

##接上述示例，在layui.use函數(shù)里追加如下內(nèi)容
$(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: {   //設(shè)定異步數(shù)據(jù)接口的額外參數(shù)，任意設(shè)置
            search_key: input_val
        },
        page: {
            curr: 1  //重新從第 1 頁(yè)開(kāi)始
        }
    })
})

4.服務(wù)端數(shù)據(jù)接口。

####接上述示例，修改視圖函數(shù)。
def user_data(request):
    if request.method == "GET":
        user = []  #數(shù)據(jù)格式為[{},{},{}]
        # 正常通過(guò)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)  # 要在切片之前獲取總數(shù)
        page = int(request.GET.get('page', 1))  # 當(dāng)前頁(yè)，第幾頁(yè)
        limit = int(request.GET.get('limit'))  # 當(dāng)前頁(yè)數(shù)量，在table.render參數(shù)配置，默認(rèn)10
        start = (page - 1) * limit  # 獲取上一頁(yè)的最后一個(gè)數(shù)
        end = page * limit  # 當(dāng)前頁(yè)最后一個(gè)數(shù)
        data = user[start:end]
        code = '0'
        msg = "獲取數(shù)據(jù)成功."
        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并沒(méi)有像GET那種封裝好的字典結(jié)果，需要我們手動(dòng)處理request.body獲取參數(shù)
        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.驗(yàn)證效果，查詢name，返回關(guān)鍵字給服務(wù)端。
前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

9.5.2 選擇框查詢

與上面思路一樣。增加選擇框，根據(jù)已有的信息選擇，這里是性別為例。

1.增加選擇框。

<!--  頭部工具欄，左側(cè) -->
<script type="text/html" id="toolbarDemo">
    <a href="#" class="layui-btn" style="float: left;margin-right: 50px">創(chuàng)建</a>
    <input type="text" name="username" lay-verify="title" placeholder="請(qǐng)輸入用戶名" 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.表單（選擇框）事件監(jiān)聽(tīng)。

########################################################################
#增加form模塊。
layui.use(['table','form'], function(){
    var form = layui.form;
########################################################################
##js腳本內(nèi)容。
form.on('select(sex)', function (data) {
    var select_val = data.value;
    table.reload('TT', {
        where: {   //設(shè)定異步數(shù)據(jù)接口的額外參數(shù)，任意設(shè)置
            search_sex: select_val
        },
        page: {
            curr: 1  //重新從第 1 頁(yè)開(kāi)始
        }
    });
})

3.服務(wù)端數(shù)據(jù)接口。

def user_data(request):
    if request.method == "GET":
        user = []  #數(shù)據(jù)格式為[{},{},{}]
        # 正常通過(guò)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:   # 如果兩個(gè)條件都滿足
                if search_key in name and select_sex == sex:
                    user.append(row)
            elif search_key:     # 滿足一個(gè)條件
                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)  # 要在切片之前獲取總數(shù)
        page = int(request.GET.get('page', 1))  # 當(dāng)前頁(yè)，第幾頁(yè)
        limit = int(request.GET.get('limit'))  # 當(dāng)前頁(yè)數(shù)量，在table.render參數(shù)配置，默認(rèn)10
        start = (page - 1) * limit  # 獲取上一頁(yè)的最后一個(gè)數(shù)
        end = page * limit  # 當(dāng)前頁(yè)最后一個(gè)數(shù)
        data = user[start:end]
        code = '0'
        msg = "獲取數(shù)據(jù)成功."
        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并沒(méi)有像GET那種封裝好的字典結(jié)果，需要我們手動(dòng)處理request.body獲取參數(shù)
        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

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

9.6 數(shù)據(jù)表格內(nèi)容美化

在默認(rèn)情況下，單元格的內(nèi)容是完全按照數(shù)據(jù)接口返回的content原樣輸出，若要對(duì)某列的單元格添加鏈接等其它元素，可以借助該參數(shù)來(lái)輕松實(shí)現(xiàn)。

1.方式一，直接寫(xiě)標(biāo)簽進(jìn)行美化。

##############################################
##代碼格式。
table.render({
  cols: [[
    {field:'title', title: '文章標(biāo)題', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，標(biāo)題：<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}
]]

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

2.定義函數(shù)使用。

// 數(shù)據(jù)表格指定函數(shù)
,{field: 'username', title: '用戶名',templet: sexFormat}

// 定義處理表格內(nèi)容函數(shù)
    function sexFormat(d) {
        if(d.username == "慕卿君") {
            return '<span style="color: red">' + d.username + '<span>'
        } else {
            return '<span style="color: blue">' + d.username + '<span>'
        }
    }

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)

十、彈出層

使用layer模塊實(shí)現(xiàn)彈出效果。

常用類型：

layer.msg：提示框。

layer.open支持的幾種常用類型：

0：信息框，默認(rèn)，輸出一個(gè)文本。

1：頁(yè)面層，輸出一段HTML內(nèi)容。

2：內(nèi)嵌層，加載網(wǎng)址。

1.提示框。

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

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
2.信息框輸出一個(gè)文本。

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

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
3.頁(yè)面層輸出一段HTML內(nèi)容。

#########################################################
##母板的body外定義按鈕。
<head>
</head>

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

<body>
</body>
#########################################################
##子板的js內(nèi)引用按鈕id。
layer.open({
  type: 1,
  content: $('#qingjun')  ##根據(jù)按鈕id引用。
});

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā)
4.內(nèi)嵌層加載網(wǎng)址。

##子板js內(nèi)添加。
layer.open({
  type: 2,
  content: "https://blog.csdn.net/yi_qingjun",  //彈出地址。
  title: ["百慕卿君博客網(wǎng)站",'font-size:18px;'],
  area: ["40%","60%"]   //也可以設(shè)置像素。
});

前端基礎(chǔ)5——UI框架Layui,python開(kāi)發(fā),前端,ui,layui,javascript,運(yùn)維開(kāi)發(fā) 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-698454.html

到了這里，關(guān)于前端基礎(chǔ)5——UI框架Layui的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

前端框架LayUI
Bootstrap讓前端開(kāi)發(fā)更快速、簡(jiǎn)單。所有開(kāi)發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。可以直接使用Bootstrap提供的 CSS 樣式表，Bootstrap的源碼是采用最流行的CSS預(yù)處理工具Less和Sass開(kāi)發(fā)的?？梢灾苯硬捎妙A(yù)編譯的CSS文件快速開(kāi)發(fā)，也可以從Bootstrap源碼自定義自
2024年02月02日
瀏覽(27)
Element UI 和 Layui 的使用區(qū)別
Element UI 和 Layui 都是非常流行的前端 UI 框架，用于構(gòu)建用戶界面。它們有一些共同之處，但也有一些明顯的區(qū)別。 Element UI： Element UI 是一套基于 Vue.js 的組件庫(kù)，設(shè)計(jì)風(fēng)格較為現(xiàn)代、扁平化，注重用戶體驗(yàn)。 Layui： Layui 是一套經(jīng)典的前端 UI 框架，設(shè)計(jì)風(fēng)格相對(duì)簡(jiǎn)潔，注重簡(jiǎn)
2024年02月03日
瀏覽(18)
JavaScript與前端框架Element UI
一、JavaScript概述 JavaScript（簡(jiǎn)稱JS）是一種輕量級(jí)、解釋性的、基于對(duì)象的腳本語(yǔ)言，用于Web開(kāi)發(fā)中的客戶端腳本。它是HTML和CSS的一部分，用于在瀏覽器中實(shí)現(xiàn)動(dòng)態(tài)交互。 JavaScript最初由Netscape公司的Brendan Eich于1995年開(kāi)發(fā)，旨在為網(wǎng)頁(yè)添加動(dòng)態(tài)內(nèi)容。不同于編譯型語(yǔ)言如Java和
2024年04月29日
瀏覽(22)
【智慧醫(yī)療】Springboot+Element-UI+LayUI的醫(yī)療管理平臺(tái)
需求分析系統(tǒng)概要技術(shù)選型功能模塊隨著第五代移動(dòng)通信技術(shù)（5G）高速發(fā)展，推動(dòng)新一代信息技術(shù)與各個(gè)行業(yè)的融合發(fā)展，各行各業(yè)都在積極融合智能現(xiàn)代化概念，努力把互聯(lián)網(wǎng)技術(shù)運(yùn)用到其中。在我國(guó)目前人口基數(shù)大，對(duì)醫(yī)療服務(wù)需求量大，在其過(guò)程中，看病人員多，
2024年01月25日
瀏覽(13)
前端框架Layui實(shí)現(xiàn)動(dòng)態(tài)樹(shù)效果（書(shū)籍管理系統(tǒng)左側(cè)下拉列表）
目錄一、前言 1.什么是樹(shù)形菜單 2.樹(shù)形菜單的使用場(chǎng)景二、案例實(shí)現(xiàn) 1.需求分析 2.前期準(zhǔn)備工作 ①導(dǎo)入依賴 ②工具類 BaseDao（通用增刪改查） BuildTree(完成平級(jí)數(shù)據(jù)到父子級(jí)的轉(zhuǎn)換) ResponseUtil（將數(shù)據(jù)轉(zhuǎn)換成json格式進(jìn)行回顯） ③編寫(xiě)實(shí)體 3.dao層編寫(xiě) 4.servlet層編寫(xiě) 5.jsp頁(yè)面搭
2024年02月13日
瀏覽(24)
Layui Vue - 優(yōu)雅經(jīng)典、免費(fèi)開(kāi)源的 Vue 3 桌面端 UI 組件庫(kù)，沿用 layui 設(shè)計(jì)規(guī)范，開(kāi)箱即用，自帶 Pear Admin Next 后臺(tái)管理系統(tǒng)
經(jīng)典的 layui 沒(méi)有停止維護(hù)，還出了 Vue 3 版本的，依舊好用，分享給大家。關(guān)于 Layui Vue 在介紹 Layui Vue 之前有必要先介紹一下 Layui。Layui 是一套經(jīng)典的開(kāi)源的 Web UI 組件庫(kù)，作者是大名鼎鼎的前端大神賢心。Layui 采用輕量級(jí)模塊化規(guī)范，遵循原生態(tài)的 HTML / CSS / JavaScript 開(kāi)發(fā)模
2024年02月08日
瀏覽(31)
前端框架Layui實(shí)現(xiàn)動(dòng)態(tài)表格效果用戶管理實(shí)例（對(duì)表格進(jìn)行CRUD操作-附源碼）
目錄一、前言 1.什么是表格 2.表格的使用范圍二、案例實(shí)現(xiàn) 1.案例分析 ①根據(jù)需求找到文檔源碼 ②查詢結(jié)果在實(shí)體中沒(méi)有該屬性 2.dao層編寫(xiě) ①BaseDao工具類 ②UserDao編寫(xiě) 3.Servlet編寫(xiě) ①R工具類的介紹 ②Useraction編寫(xiě) 4.jsp頁(yè)面搭建 ①userManage.jsp ?②userEdit.jsp ③userManage.js ④us
2024年02月16日
瀏覽(31)
前端UI框架有哪些|20個(gè)優(yōu)秀免費(fèi)開(kāi)源的WEB前端UI框架提高網(wǎng)站開(kāi)發(fā)效率
最近準(zhǔn)備學(xué)習(xí)一下前端UI我也是在網(wǎng)上找了很久最終整理出來(lái)了20個(gè)不錯(cuò)的前端UI框架網(wǎng)站，大家都知道很多成熟的前端框架可以直接引，學(xué)習(xí)框架可以提升我們網(wǎng)站的開(kāi)發(fā)速度。有些大型公司的前端或者后端框架都是用自己開(kāi)發(fā)的，對(duì)于大部分用戶和公司來(lái)講，我們可以用開(kāi)
2024年02月06日
瀏覽(86)
X-admin經(jīng)典前端后臺(tái)管理模板，基于layui的輕量級(jí)前端后臺(tái)管理框架，簡(jiǎn)單，兼容性好，面向所有層次的前后端程序
簡(jiǎn)介 X-admin基于layui的輕量級(jí)前端后臺(tái)管理框架，簡(jiǎn)單免費(fèi)，兼容性好，面向所有層次的前后端程序。創(chuàng)立于2017年初，為了敏捷WEB應(yīng)用開(kāi)發(fā)和簡(jiǎn)化企業(yè)應(yīng)用開(kāi)發(fā)而誕生的。#X-admin從誕生以來(lái)一直秉承簡(jiǎn)潔實(shí)用的設(shè)計(jì)原則，在保持出色的性能和至簡(jiǎn)的代碼的同時(shí)，也注重易用性。
2024年02月16日
瀏覽(55)
面向后端開(kāi)發(fā)者，即無(wú)需涉足各類構(gòu)建工具，只需面向?yàn)g覽器本身的Layui框架
Layui是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，它遵循原生的 HTML/CSS/JS 書(shū)寫(xiě)方式。它雖然外在極簡(jiǎn)，但是內(nèi)容豐富，里面包含眾多組件從核心代碼到 API 都非常適合界面的快速開(kāi)發(fā)。事實(shí)上layui更多是面向于后端開(kāi)發(fā)者，而且它還擁有自己的模式。 Layui更多是面向于后端開(kāi)
2024年01月22日
瀏覽(24)

<small id="riugt"><form id="riugt"><optgroup id="riugt"></optgroup></form></small>