LayUi学习笔记

最新推荐文章于 2023-07-10 22:08:19 发布

丁racy

最新推荐文章于 2023-07-10 22:08:19 发布

阅读量450

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/dingcai12003/article/details/93673078

版权

学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

layui简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

实例

首先看已经完成好的一个页面
在这里插入图片描述

首先引入两个js文件

<link rel="stylesheet" href="${path}/layui/css/layui.css">
<script src="${path}/jquery-1.10.2.min.js"></script>
 <script src="${path}/layui/layui.js"></script>

下面贴出后台动态模板

<%--
  Created by IntelliJ IDEA.
  User: cd
  Date: 2019/6/19
  Time: 23:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
    String path = request.getContextPath();
    pageContext.setAttribute("path",path);
%>
<!DOCTYPE html>


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <script src="${path}/jquery-1.10.2.min.js"></script>
    <script src="${path}/layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">个人中心</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">用户管理</a></dd>
                        <dd><a href="javascript:;">修改密码</a></dd>
                        <dd><a href="javascript:;">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">超市管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">供应商管理</a></dd>
                        <dd><a href="javascript:;" onclick="$('#main').load('${path}/bill/list.html')">账单管理</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body" id="main" style="padding-top: 30px">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>

其中跳转到侧边页面的方法是οnclick=" $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲main').load('$ {path}/bill/list.html’) 用的jquery的ajax的load方法，相当于在mian里面追加进另一个html，并且这一个html不需要有头文件

3.bill.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
 Created by IntelliJ IDEA.
 User: cd
 Date: 2019/6/24
 Time: 19:18
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--表头工具栏--%>
<form class="layui-form" action="">
<div class="layui-form-item">

   <div class="layui-inline">
       <label class="layui-form-label">商品名</label>
       <div class="layui-input-inline" style="width: 100px;">
           <input type="text" id="goodsName" name="goodsName"  autocomplete="off" class="layui-input">
       </div>
   </div>

   <div class="layui-inline">
       <label class="layui-form-label">供应商</label>
       <div class="layui-input-inline" style="width: 100px;">
           <select name="supplier_id" id="supplierId">
               <option value="">请选择</option>
               <c:forEach items="${suppliers}" var="s">
                   <option value="${s.id}">${s.name}</option>
               </c:forEach>
           </select>
       </div>
   </div><div class="layui-inline">
       <label class="layui-form-label">状态</label>
       <div class="layui-input-inline" style="width: 100px;">
           <select name="status" id="status">
               <option value="">请选择</option>
               <option value="1">已付款</option>
               <option value="0">未付款</option>
           </select>
       </div>
   </div>

   <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1"  id="search-bill-btn">搜索</button>

</div>
</form>

<table id="bill-table"  lay-filter="bill-table"></table>

<%--隐藏按钮--%>
<script type="text/html" id="bill-toolbar">
   <div class="layui-btn-container">
       <button class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
       <button class="layui-btn layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
   </div>
</script>

<script type="text/html" id="row-tool">
   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

<script type="text/javascript">

   layui.use(['form', 'table','layer'], function () {
       var form = layui.form;
       form.render();
       var table = layui.table;
       var layer = layui.layer;

       table.render({
           elem: '#bill-table'
           , height: 312
           , id: "billTable"
           , limit: 4
           , limits: [2, 4, 6]
           , toolbar: '#bill-toolbar'
           , url: '/bill/table.html' //数据接口
           , page: true //开启分页
           , cols: [[ //表头
               {type: 'checkbox',}
               , {field: 'id', title: 'ID', width: 80}
               , {field: 'goodsName', title: '商品名称'}
               , {
                   field: 'supplier', title: '供应商', templet: function (d) {
                       return d.supplier.name;
                   }
               }
               , {
                   field: 'amount', title: '金额', templet: function (d) {
                       return d.amount / 1.0;
                   }
               }
               , {
                   field: 'status', title: '状态', templet: function (d) {
                       return d.status == 1 ? '<span class="layui-badge layui-bg-blue">已付款</span>' : '<span class="layui-badge">未付款</span>';
                   }
               }
               , {field: 'createdTime', title: '创建时间'}
               , {toolbar: '#row-tool', title: '操作'}
           ]]
       });
       function opendEditLayer(data){
           layer.open({
               title: "编辑账单",
               type:1,
               btn: ['提交', '取消'],
               content: $('#edit-layer').html(),
               area:['500px','300px']
               ,yes: function(index, layero){
                   //按钮【按钮一】的回调

                   $.ajax({
                       url: "/bill/edit.html",
                       data:$('#edit-form').serialize(),
                       method: 'post',
                       success:function (json) {

                           if (json.status) {
                               table.reload("billTable", {});
                               layer.close(index);
                           }else {
                               layer.msg(json.message())
                           }
                       }
                   })
               }
               ,btn2: function(index, layero){

                   layer.close(index);

               },
               success:function (layero,index) {
                   form.render()
                   if (data != null) {
                       form.val("edit-form",data);
                       form.val("edit-form",{
                           "supplier.id": data.supplier.id,
                           status: data.status + "",
                       });
                   }
               }
           })
       }

       /*监听表头*/

       table.on('toolbar(bill-table)', function(obj){
           switch(obj.event){
               case 'add':
                   opendEditLayer(null)
                   break;
               case 'delete':
                   var data = table.checkStatus('billTable').data;
                   var ids = new Array();

                   $.each(data,function (i,obj) {
                       ids.push(obj.id);
                   })

                   $.ajax({
                       url:"/bill/delete.html",
                       data:"ids="+ids,
                       method:'post',
                       success:function (json) {
                           if (json.status) {
                               table.reload("billTable", {});
                           }else {
                               layer.msg(json.message())
                           }
                       }
                   })
                   break;
           };
       });

       //监听行工具事件
       table.on('tool(bill-table)', function(obj){
           var data = obj.data;
           console.log(data)
           //console.log(obj)
           switch (obj.event) {
               case 'edit':
                   opendEditLayer(data)
                   break;
           }

       });

       /*重载表格*/
       $('#search-bill-btn').click(function () {
           var data = {};
           data.status = $('#status').val();
           data.goodsName = $('#goodsName').val();
           data['supplier.id'] = $('#supplierId').val();
           table.reload('billTable', {
               where: data
           })
       })

   });
</script>

<%--弹出的表单--%>

<script type="text/html" id="edit-layer">
   <form class="layui-form" id="edit-form" lay-filter="edit-form">
       <div class="layui-form-item">
           <label class="layui-form-label">商品名</label>
           <div class="layui-input-block">
               <input type="text" name="goodsName" required  lay-verify="required" placeholder="请输入商品名" autocomplete="off" class="layui-input">
           </div>
       </div>
       <input type="hidden" name="id">
       <div class="layui-form-item">
           <label class="layui-form-label">供应商</label>
           <div class="layui-input-inline">
               <select name="supplier.id">
                   <option value="">请选择</option>
                   <c:forEach items="${suppliers}" var="s">

                       <option value="${s.id}">${s.name}</option>

                   </c:forEach>
               </select>

           </div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label">状态</label>
           <div class="layui-input-block">
               <input type="radio" name="status" value="1" title="付款" checked>
               <input type="radio" name="status" value="0" title="未付款">
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">价格</label>
           <div class="layui-input-block">
               <input type="text" name="amount" required  lay-verify="required" eautocomplete="off" class="layui-input">
           </div>
       </div>
   </form>
</script>

主要的就是这段代码layui.use([‘form’, ‘table’,‘layer’], function () { })
form.render();（xxx.render）这种都代表重新渲染，每次追加以后都要重新执行这段代码才行

在用table.on(‘event(filter)’, callback);等表格事件时需要设置lay-filter=“bill-table”

丁racy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
LayUi学习笔记

layui简介layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是...
复制链接

扫一扫