精华内容
下载资源
问答
  • layui官网只有数据表格才有全选功能,静态表格没有 自己写了一个,做个笔记保留下来 html代码: <table class="layui-table layui-form"> <thead> <tr> <th style="text-align: center;">...

    layui官网只有数据表格才有全选功能,静态表格没有
    自己写了一个,做个笔记保留下来

    html代码:

    <table class="layui-table layui-form">
                <thead>
                <tr>
                    <th style="text-align: center;"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"/></th>
                    <th>SKU</th>
                    <th>名称</th>
                    <th>尺码</th>
                    <th>颜色</th>
                    <th>图片</th>
                    <th>工艺</th>
                    <th>版型</th>
                    <th>状态</th>
                    <th>件数</th>
                </tr>
                </thead>
                <tbody>
                @if($flag == 0)
                    <tr>
                        <td colspan="10" style="text-align: center;">请使用扫码枪扫描日清单单号</td>
                    </tr>
                @else
                    @foreach($list as $v)
                        <tr>
                            <td style="text-align: center;"><input type="checkbox" lay-skin="primary" lay-filter="itemChoose"/></td>
                            <td>{{$v->config_sku->sku??''}}</td>
                            <td>{{$v->config_sku->shortname??''}}</td>
                            <td>{{$v->size??''}}</td>
                            <td>{{$v->color??''}}</td>
                            <td><img src="{{$v->config_sku->pic??''}}" width="50" height="50"></td>
                            <td>{{$v->config_sku->craft_config_name??''}}</td>
                            <td>{{$v->clothe_version??''}}</td>
                            <td>@if($v->state == 1) <span class="layui-badge">印花未完成</span> @else <span class="layui-badge layui-bg-gray">印花已完成</span> @endif</td>
                            <td>{{$v->quantity??''}}</td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
    

    JS代码:

    layui.use(['form', 'element', 'jquery'], function () {
                var $ = layui.jquery,
                    form = layui.form;
                //全选
                form.on('checkbox(allChoose)', function (data) {
                    var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
                    child.each(function (index, item) {
                        item.checked = data.elem.checked;
                    });
                    form.render('checkbox');
                });
    
                //全选和部分选中时候,表头全选按钮的样式变化
                form.on('checkbox(itemChoose)', function (data) {
                    var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
                    var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
                    if (sib == total) {
                        $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", true);
                        form.render();
                    } else {
                        $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",
                            false);
                        form.render();
                    }
                });
    
            })
    
    展开全文
  • springboot+layui上传图片保存到服务器

    千次阅读 2019-08-01 10:52:45
    最近给学校做了一个捐赠平台的项目,里面用到了上传图片保存到服务器的需求,在这里记录一下 项目使用了springboot + layui html <div class="layui-form-item magt3"> <label class="layui-form-...

    最近给学校做了一个捐赠平台的项目,里面用到了上传图片保存到服务器的需求,在这里记录一下

    项目使用了springboot + layui

    html

    <div class="layui-form-item magt3">
    					<label class="layui-form-label" style="float: left">项目图片</label>
    					<div class="layui-upload">
    						<button type="button" class="layui-btn" id="test1">上传图片</button>
    						<div class="layui-upload-list">
    							<img class="layui-upload-img" id="demo1">
    							<p id="demoText"></p>
    						</div>
    					</div>
    				</div>
    

    js

     //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/project/projectPictureUpload'
            ,method:'post'
            ,accept:'images'
            ,acceptMime:'image/*'
            ,field:'projectImg'
            ,choose: function (obj) {
                //预读本地文件示例,不支持ie8
                // obj.preview(function (index, file, result) {
                //     //图片预览
                //     $('#demo1').attr('src', result); //图片链接(base64)
                // });
            }
            ,done: function (res) {
                //如果上传失败
                if (res.code == 250) {
                    return layer.msg('上传项目图片失败',{icon: 5});
                }
                //上传成功,获得图片地址
                $('#demo1').attr('src', res.data);
            }
            ,error: function () {
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    
    

    由于项目是异步提交图片,当确认图片后就会立即上传,服务器会返回图片地址,需要将图片地址和
    项目其他信息一起保存在数据库,使用以下js可以获得到图片的地址

    $('#demo1')[0].src                    //图片地址
    

    controller

    @PostMapping("/projectPictureUpload")
        @ResponseBody
        public Result projectPictureUpload(@RequestParam(value = "projectImg",required = true)MultipartFile file){
            //将图片上传到服务器
            if(file.isEmpty()){
                return Result.error(ResultCodeConstants.UPLOAD_FAIL,"项目图片不能为空");
            }
            //原始文件名
            String originalFilename = file.getOriginalFilename();
            //文件后缀
            String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //图片名称为uuid+图片后缀防止冲突
            String fileName = UUID.randomUUID().toString()+"."+suffix;
            String os = System.getProperty("os.name");
            //文件保存路径
            String filePath="";
            if(os.toLowerCase().startsWith("win")){
                //windows下的路径
                filePath ="d:/pictureUpload/project/";
            }else {
                //linux下的路径
                filePath="/root/pictureUpload/project/";
            }
            try {
                //写入图片
                Boolean writePictureflag = FileUtils.uploadFile(file.getBytes(),filePath,fileName);
                if(writePictureflag == false){
                    //上传图片失败
                    return Result.error(ResultCodeConstants.UPLOAD_FAIL,"上传项目图片失败");
                }
                //上传成功后,将可以访问的完整路径返回
                String fullImgpath = "/pictureUpload/project/"+fileName;
                return Result.ok(fullImgpath,"上传图片成功");
            } catch (Exception e) {
                e.printStackTrace();
                //上传图片失败
                return Result.error(ResultCodeConstants.UPLOAD_FAIL,"上传项目图片失败");
            }
        }
    

    工具类

    package com.iot.donation.util;
    
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    
    /**
     * @Author 张满
     * @Description  文件操作相关工具类
     * @Date 2019/7/31 15:46
     * @vsersion 1.0.0
     **/
    public class FileUtils {
    
    
        /**
         * @Author 张满
         * @Description 文件上传
         * @Date 2019/7/31  15:48
         * @Param [file, filePath, fileName]
         * @return void
         **/
        public static Boolean uploadFile(byte[] file, String filePath, String fileName) throws Exception {
            FileOutputStream out = null;
            try {
                File targetFile = new File(filePath);
                //如果目录不存在,创建目录
                if(!targetFile.exists()){
                    targetFile.mkdirs();
                }
                out = new FileOutputStream(filePath+fileName);
                out.write(file);
                out.flush();
                //写入成功
                return true;
            } catch (IOException e) {
                e.printStackTrace();
                //写入失败
                return false;
            } finally {
                out.close();
            }
        }
    
    }
    
    

    springboot配置静态资源访问

    package com.iot.donation.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    
    @Configuration
    public class MyWebMvcConfig extends WebMvcConfigurationSupport {
    
        /**
         * 解决springboot2.0静态资源无法直接访问问题
         * @param registry
         */
        @Override
        protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    
    
            registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    
            String os = System.getProperty("os.name");
            System.out.println(os);
            if(os.toLowerCase().startsWith("win")){
                //--------------------------------------windows下保存路径-------------------------------------------------------------
                //项目图片访问路径
                registry.addResourceHandler("/pictureUpload/project/**").addResourceLocations("file:D:/pictureUpload/project/");
            }else{
                //--------------------------------------linux下保存路径---------------------------------------------------------------------------------
                //项目图片访问路径
                registry.addResourceHandler("/pictureUpload/project/**").addResourceLocations("file:/root/pictureUpload/project/");
            }
            super.addResourceHandlers(registry);
        }
    
    
    
    
    }
    
    

    效果图

    后台效果

    在这里插入图片描述

    首页效果

    在这里插入图片描述

    由于后台没有给图片大小,长宽高的限制,所以首页图片显示时只取了一部分,留着以后改进一下

    展开全文
  • Spring Boot项目+Layui 多文件上传 在application.properties文件编写配置路径信息 # 静态资源对外暴露的访问路径 file.staticAccessPath = /imgs/** # 文件上传目录,这里需要注意文件夹后面必须得带上斜杠,否则会...

    Spring Boot项目+Layui 多图片上传

    在application.properties文件编写配置路径信息

    # 静态资源对外暴露的访问路径
    file.staticAccessPath = /imgs/**
    # 文件上传目录,这里需要注意文件夹后面必须得带上斜杠,否则会出现404的问题
    # win10
    #file.uploadFolder = F:/upload/
    #linux
    file.uploadFolder = /root/Pictures/
    

    编写MyWebAppConfiguration配置文件

    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    
    @Configuration
    public class MyWebAppConfiguration extends WebMvcConfigurationSupport {
    
    	//静态虚拟访问路径
        @Value("${file.staticAccessPath}")
        private String staticAccessPath;
        //真实路径
        @Value("${file.uploadFolder}")
        private String path;
    
        /**
         * @Description:
         * 对文件的路径进行配置, 创建一个虚拟路径/imgs/**
         */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
            registry.addResourceHandler(staticAccessPath).addResourceLocations("file:"+path);
    
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
            super.addResourceHandlers(registry);
        }
    }
    

    编写UploadFileConfig上传文件配置信息(我这边仅对上传文件大小进行了设置)

    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.boot.web.servlet.MultipartConfigFactory;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.util.unit.DataSize;
    
    import javax.servlet.MultipartConfigElement;
    
    @Configuration
    public class UploadFileConfig {
    
        @Value("${file.uploadFolder}")
        private String uploadFolder;
    
        @Bean
        MultipartConfigElement multipartConfigElement(){
            MultipartConfigFactory factory = new MultipartConfigFactory();
            factory.setLocation(uploadFolder);
            // 单次请求最大上传文件大小
            factory.setMaxRequestSize(DataSize.parse("10MB"));
            return factory.createMultipartConfig();
        }
    }
    
    

    编写UploadFilePathConfig上传路径配置文件

    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class UploadFilePathConfig  implements WebMvcConfigurer {
        @Value("${file.staticAccessPath}")
        private String staticAccessPath;
        @Value("${file.uploadFolder}")
        private String uploadFolder;
    
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler(staticAccessPath).addResourceLocations("file:/" + uploadFolder);
            WebMvcConfigurer.super.addResourceHandlers(registry);
        }
    }
    

    编写文件上传代码(service层或controller层)

    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    
    @Controller
    @RequestMapping({"/img"})
    public class Test {
    
            @Value("${file.uploadFolder}")
            private String path;
    
            /**
             * 图片上传
             * @param file
             * @return
             */
            @ResponseBody
            @RequestMapping(value = {"/uploadImg"}, method = {RequestMethod.POST})
            public Map<String, Object> uploadSource(@RequestParam("file") MultipartFile file, Long demandId) {
                Map<String, Object> map = new HashMap<>();
                String imgPath = null;
                if (file != null) {
                    //获取上传的文件名称
                    String imgName = file.getOriginalFilename();
                    //文件上传时,chrome与IE/Edge对于originalFilename处理方式不同
                    //chrome会获取到该文件的直接文件名称,IE/Edge会获取到文件上传时完整路径/文件名
                    //Check for Unix-style path
                    int unixSep = imgName.lastIndexOf('/');
                    //Check for Windows-style path
                    int winSep = imgName.lastIndexOf('\\');
                    //cut off at latest possible point
                    int pos = (winSep > unixSep ? winSep : unixSep);
                    if (pos != -1)
                        imgName = imgName.substring(pos + 1);
    
                    //拼接时间戳后的文件名
                    String imgFullName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" + imgName;
                    imgPath = path +imgFullName; //上传到本地
                }
                try {
                    File files = new File(imgPath);//在内存中创建File文件映射对象
                    //打印查看上传路径
                    System.out.println("上传路径=========" + imgPath);
                    if (!files.getParentFile().exists()) {//判断映射文件的父文件是否真实存在
                        files.getParentFile().mkdirs();//创建所有父文件夹
                    }
                    file.transferTo(files);//采用file.transferTo 来保存上传的文件
                    /**
                     *数据库添加代码
                     */
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                map.put("code", 0);
                map.put("msg", "success");
                map.put("imgPath", imgPath);
    
                return map;
            }
    
            /*
             * 删除上传的文件
             */
            @RequestMapping("deleteImg")
            @ResponseBody
            public Map<String, Object> deleteFile(String imgFullName) {
                Map<String, Object> map = new HashMap<>();
                //path数据库保存的真实路径
                String imgPath = path + imgFullName;
                File file = new File(imgPath);
                // 路径文件且不为空则进行删除
                if (file.isFile()) {
                    boolean delete = file.delete();
                    if (delete){
                        /**
                         *数据库删除代码
                         */
                        map.put("msg",10000);
                        System.out.println("删除图片"+imgPath+"成功");
                    }else {
                        map.put("msg",99999);
                        System.out.println("删除图片"+imgPath+"失败");
                    }
                }else{
                    map.put("msg",99999);
                    System.out.println("删除图片"+imgPath+"失败");
                }
                return map;
            }
    
    }
    
    
    

    前端使用的是layui的多文件上传组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 引入样式文件 -->
        <script src="../../static/js/jquery-3.5.1.js"></script>
        <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
        <script src="../../static/layui/layui.js"></script>
    </head>
    <body>
    
    <!-- 上传图片模块 -->
    <div class="layui-upload" id="uploadImg">
        <input name="demandId" id="demandIdUpload" type="hidden" class="layui-input"/>
        <button type="button" style="display:block;margin:0 auto" class="layui-btn layui-btn-normal" id="checkImg">
            <i class="layui-icon">&#xe67c;</i>选择图片
        </button>
        <div class="layui-upload-list">
            <table class="layui-table" id="imgTable">
                <thead>
                <tr>
                    <th>图片名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>图片路径</th>
                </tr>
                </thead>
                <tbody id="imgList"></tbody>
            </table>
        </div>
        <button type="button" style="display:block;margin:0 auto" class="layui-btn" id="uploadAction">
            开始上传
        </button>
    </div>
    
    <!-- JS代码 -->
    <script>
        layui.use(['upload', 'layer'], function () {
            let layer = layui.layer;
            let upload = layui.upload;
    
            //多图片上传
            //多图片列表示例
            let imgListView = $('#imgList'),
                uploadListIns = upload.render({
                    elem: '#checkImg',
                    //改成自己的上传接口
                    url: '/img/uploadImg',
                    accept: 'images',
                    multiple: true,
                    auto: false,
                    bindAction: '#uploadAction',
                    choose: function (obj) {
    
                        let files = this.files = obj.pushFile();  //将每次选择的文件追加到文件队列
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                        //读取本地文件
                        //data为携带的参数
                        this.data={'demandId':$('#demandIdUpload').val()};
                        obj.preview(function (index, file, result) {
                            let tr = $([
                                '<tr class="imgFiles" id="upload-' + index + '">'
                                , '<td>' + file.name + '</td>'
                                , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                , '<td>等待上传</td>', '<td>'
                                , '<button class="layui-btn layui-btn-xs img-reload layui-hide">重传</button>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger img-delete">删除</button>'
                                , '</td>'
                                , '</tr>'
                            ].join(''));
    
                            //单个重传
                            tr.find('.img-reload').on('click', function () {
                                obj.upload(index, file);
                            });
    
                            //删除
                            tr.find('.img-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                            });
    
                            imgListView.append(tr);
                        });
                    },
                    done: function (res, index, upload) {
                        //console.log(typeof res);
                        //console.log(res);
    
                        if (res.code == 0) {  //上传成功
                            let tr = imgListView.find('tr#upload-' + index),
                                tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html('<span id="imgPathSpan">' + res.imgPath + '</span>'); //清空操作
                            return delete this.files[index]; //删除图片队列已经上传成功的图片
                        } else {
                            this.error(index, upload);
                        }
    
                    },
                    error: function (index, upload) {
                        let tr = imgListView.find('tr#upload-' + index),
                            tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.img-reload').removeClass('layui-hide'); //显示重传
                    }
                });
    
        });
    </script>
    
    </body>
    </html>
    
    展开全文
  • LayUI

    2021-08-25 15:34:54
    LayUI 1、LaUI的安装及使用 1.1、LayUI的介绍 layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。 由国人开发,16年出厂的...

    LayUI

    1、LaUI的安装及使用


    1.1、LayUI的介绍

    layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。

    由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。

    官网

    官方文档

    1.2、LayUI的特点

    • layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
    • layui是提供给后端开发入员的UI框架,基于DOM驱动。

    1.3、下载与使用

    1. 在官网首页下载到layui的最新版。目录结构如下:

    2. 获得layui后,将其完整地部署(拷贝到项目中)到你的项目目录中,你只需引入这两个文件

      <!--LayUI的核心css文件-->
      <link rel="stylesheet" href="../static/layui/css/layui.css">
      <!--LayUI的核心js文件(采用模块化引入)-->
      <script src="../static/layui/layui.js"></script>
      
    3. 基本模板

      <!doctype html>
      <html lang="zh-CN">
          <head>
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <title>LayUI基本模板</title>
              <!--LayUI的核心css文件-->
              <link href="/static/layui/css/layui.css">
              <!--LayUI的核心js文件(采用模块化引入)-->
              <script src="/static/layui/layui.js" type="text/javascript"></script>
          </head>
          <body>
              <script src="./layui/layui.js"></script>
              <script>
                  layui.use(['layer', 'form'], function () {
                      var layer = layui.layer
                      , form = layui.form;
      
                      layer.msg('Hello World');
                  });
              </script>
          </body>
      </html>
      
    4. 预先加载模块:还需要声明需要使用的模块回调函数。layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候,且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义

    <script>
        //注:导航 依赖 element 模块提供,否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
            //...
        })
    
        layui.use(['form', 'upload'], function(){  //如果只加载一个模块,可以不填数组。如:layui.use('form')
            var form = layui.form //获取form模块
            ,upload = layui.upload; //获取upload模块
    
            //监听提交按钮
            form.on('submit(test)', function(data){
                console.log(data);
            });
    
            //实例化一个上传控件
            upload({
                url: '上传接口url'
                ,success: function(data){
                    console.log(data);
                }
            })
        });
    </script>
    

    2、页面元素


    2.1、布局

    2.2.1、布局容器

    2.2.1.1、固定宽度(两侧留白)
    <div class="layui-container layui-bg-orange" style="height: 300px">
    	...
    </div>
    
    2.2.1.2、完整宽度(占据屏幕宽度100%)
    <div class="layui-fluid layui-bg-red" style="height: 300px">
        ...
    </div>
    

    2.1.2、栅格系统

    为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

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

    实例:

    <div class="layui-container">
        <!--定义行-->
        <div class="layui-row">
            <!--定义列-->
            <div class="layui-col-md6 layui-col-sm6 layui-bg-red">6/12</div>
            <div class="layui-col-md6 layui-col-sm6 layui-bg-orange">6/12</div>
        </div>
    
        <!--定义行-->
        <div class="layui-row">
            <!--定义列-->
            <div class="layui-col-md10 layui-bg-green">10/12</div>
            <div class="layui-col-md2 layui-bg-blue">2/12</div>
        </div>
    </div>
    
    2.1.2.2、响应式规则

    栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理

    <h2>平板、桌面端的不同表现</h2>
    <div class="layui-row">
        <div class="layui-col-sm3 layui-col-md6 layui-bg-red">(平板≥768px):3/12 | (桌面≥992px):6/12</div>
    </div>
    <div class="layui-row">
        <div class="layui-col-sm6 layui-col-md10 layui-bg-orange">(平板≥768px):6/12 | (桌面≥992px):10/12</div>
    </div>
    <div class="layui-row">
        <div class="layui-col-sm4 layui-col-md3 layui-bg-blue">(平板≥768px):4/12 | (桌面≥992px):3/12</div>
    </div>
    
    2.1.2.3、列间距

    通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:

    /*支持列之间为 1px-30px 区间的所有双数间隔,以及 1px、5px、15px、25px 的单数间隔*/
    layui-col-space1
    layui-col-space2
    layui-col-space4
    layui-col-space5
    layui-col-space6
    layui-col-space8
    layui-col-space10
    layui-col-space12
    layui-col-space14
    layui-col-space15
    layui-col-space16
    layui-col-space18
    layui-col-space20
    layui-col-space22
    layui-col-space24
    layui-col-space25
    layui-col-space26
    layui-col-space28
    layui-col-space30
    

    注:

    layui-col-space:设置后不起作用主要是因为设置的是padding,也就是说是向内缩,所以设置背景色padding也是会添上颜色,看起来好像没有间距一样。可以在里面在加一个div,来达到目的。

    如果需要的间距高于30px(一般不常见),请采用列偏移

    2.1.2.4、列偏移

    对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 *** 号代表的是偏移占据的列数,可选中为 1 - 12。
    如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移 3 个列宽度

    <div class="layui-row">
        <div class="layui-col-md3">
            <div class="layui-bg-red">3/12</div>
        </div>
        <div class="layui-col-md3 layui-col-md-offset6">
            <div class="layui-bg-orange">向右移动6列,从而在最右侧</div>
        </div>
    </div>
    

    注:列偏移可针对不同屏幕的标准进行设定,在当前设定的屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列

    2.1.2.5、列嵌套

    可以对栅格进行无穷层次的嵌套,在列元素(layui-col-md*)中插入一个行元素(layui-row),即可完成嵌套。

    <div class="layui-row">
        <div class="layui-col-md6 layui-border-red">
            <div class="layui-row">
                <!--内部列-->
                <div class="layui-col-md4 layui-border-orange">4/12</div>
                <div class="layui-col-md4 layui-border-orange">4/12</div>
                <div class="layui-col-md4 layui-border-orange">4/12</div>
            </div>
        </div>
    </div>
    

    2.2、基本元素

    2.2.1、按钮

    2.2.1.1、用法

    向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    <div class="layui-btn">div按钮</div>
    
    2.2.1.2、主题
    名称组合
    原始class=“layui-btn layui-btn-primary”
    默认class=“layui-btn”
    百搭class=“layui-btn layui-btn-normal”
    暖色class=“layui-btn layui-btn-warm”
    警告class=“layui-btn layui-btn-danger”
    禁用class=“layui-btn layui-btn-disabled”

    实例:

    <button class="layui-btn">默认按钮</button>
    <button class="layui-btn layui-btn-primary">原始按钮</button>
    <button class="layui-btn layui-btn-normal">百搭按钮</button>
    <button class="layui-btn layui-btn-warm">暖色按钮</button>
    <button class="layui-btn layui-btn-danger">警告按钮</button>
    <button class="layui-btn layui-btn-disabled">禁用按钮</button>
    
    2.2.1.3、尺寸
    尺寸组合
    大型class=“layui-btn layui-btn-lg”
    默认class=“layui-btn”
    小型class=“layui-btn layui-btn-sm”
    迷你class=“layui-btn layui-btn-xs”
    <button class="layui-btn layui-btn-normal layui-btn-xs">超小型</button>
    <button class="layui-btn layui-btn-warm layui-btn-sm">小型</button>
    <button class="layui-btn layui-btn-danger layui-btn-normal">默认</button>
    <button class="layui-btn layui-btn-disabled layui-btn-lg">大型</button>
    
    2.2.1.4、圆角

    layui-btn-radius

    <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs">原始超小型圆角按钮</button>
    <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">百搭小型圆角按钮</button>
    <button class="layui-btn layui-btn-radius layui-btn-warm">暖色正常圆角按钮</button>
    <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-lg">警告超大型圆角按钮</button>
    
    2.2.1.5、图标
    <button type="button" class="layui-btn layui-btn-primary">
        <i class="layui-icon layui-icon-logout layui-font-16"></i> 退出/注销
    </button>
    <button type="button" class="layui-btn layui-btn-normal">
        <i class="layui-icon layui-icon-home layui-font-16"></i> 主页
    </button>
    
    2.2.1.6、按钮组

    将按钮放入一个*class=“layui-btn-group”*元素中,即可形成按钮组,按钮本身仍然可以随意搭配

    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-font-16">&#xe642;</i> 编辑
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-font-16">&#xe641;</i> 分享
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-font-16">&#xe640;</i> 删除
        </button>
    </div>
    

    2.2.2、导航

    导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。

    依赖加载模块element

    实现步骤:

    1. 引入资源

      <!--LayUI的核心css文件-->
      <link rel="stylesheet" href="../static/layui/css/layui.css">
      <!--LayUI的核心js文件(采用模块化引入)-->
      <script src="../static/layui/layui.js"></script>
      
    2. 依赖加载模块

      <script type="text/javascript">
          //导航 依赖于element模块
          layui.use('element', function () {
              var element = layui.element;
          });
      </script>
      
    3. 显示指定类型的导航

      1. 水平导航

        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <h2 class="layui-font-20">水平导航</h2>
                    <ul class="layui-nav">
                        <li class="layui-nav-item"><a href="#">最新活动</a></li>
                        <li class="layui-nav-item"><a href="#">产品</a></li>
                        <li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
                        <li class="layui-nav-item">
                            <a href="#">解决方案</a>
                            <dl class="layui-nav-child">
                                <dd><a href="#">移动模块</a></dd>
                                <dd><a href="#">后台模块</a></dd>
                                <dd><a href="#">电商平台</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item"><a href="#">社区</a></li>
                    </ul>
                </div>
            </div>
        </div>
        

        水平、垂直、侧边三个导航的HTML结构是完全一样的, 不同的是:

        水平导航:layui-nav

        垂直导航需要追加class:layui-nav layui-nav-tree

        侧边导航需要追加class:layui-nav layui-nav-tree layui-nav-side

      2. 导航主题

        通过对导航追加CSS背景类,让导航呈现不同的主题色

        <!--如定义一个墨绿背景色的导航-->
        <ul class="layui-nav layui-bg-green" lay-filter=""></ul>     
        

        水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
        垂直导航支持的其它背景主题有:layui-bg-cyan(藏青)

      3. 面包屑

        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">国际新闻</a>
            <a href="">亚太地区</a>
            <a><cite>正文</cite></a>
        </span>
        

        你还可以通过设置属性 lay-separator="||" 来自定义分隔符

        <p>
            <span class="layui-breadcrumb" lay-separator="||">
                <a href="">娱乐</a>
                <a href="">八卦</a>
                <a href="">体育</a>
                <a href="">搞笑</a>
                <a href="">视频</a>
                <a href="">游戏</a>
                <a href="">综艺</a>
            </span>
        </p>
        

    2.2.3、选项卡

    导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。

    依赖加载模块element

    实现步骤

    实现步骤:

    1. 引入资源

      <!--LayUI的核心css文件-->
      <link rel="stylesheet" href="../static/layui/css/layui.css">
      <!--LayUI的核心js文件(采用模块化引入)-->
      <script src="../static/layui/layui.js"></script>
      
    2. 依赖加载模块

      <script type="text/javascript">
          //导航 依赖于element模块
          layui.use('element', function () {
          var element = layui.element;
      });
      </script>
      
    3. 显示指定类型的选项卡

      <div class="layui-tab">
          <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
          </ul>
          <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">内容1</div>
              <div class="layui-tab-item">内容2</div>
              <div class="layui-tab-item">内容3</div>
              <div class="layui-tab-item">内容4</div>
              <div class="layui-tab-item">内容5</div>
          </div>
      </div>
      

      默认风格:layui-tab

      简洁风格需要追加:layui-tab-brief

      卡片风格需要追加:layui-tab-card

    带删除的选项卡

    对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

    <div class="layui-tab" lay-allowClose="true">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    

    2.2.4、表格

    2.2.4.1、常规用法
    <div class="layui-container">
        <div class="">
            <div class="layui-col-md12">
                <table class="layui-table" lay-even lay-skin="line row" lay-size="lg">
                    <colgroup>
                        <col width="60">
                        <col width="100">
                        <col width="360">
                        <col width="110">
                        <col width="150">
                    </colgroup>
                    <thead>
                        <tr>
                            <td>id</td>
                            <td>电脑名称</td>
                            <td>简介</td>
                            <td>价格</td>
                            <td>录入时间</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>10001</td>
                            <td>华为</td>
                            <td>HUAWEI MateBook X Pro 2021款 i7 16GB 512GB</td>
                            <td>9999.00</td>
                            <td>2021 8/23</td>
                        </tr>
                        <tr>
                            <td>10002</td>
                            <td>小米</td>
                            <td>RedmiBook Air 13.3英寸 2.5k全面屏超轻薄</td>
                            <td>4799.00</td>
                            <td>2021 8/12</td>
                        </tr>
                        <tr>
                            <td>10003</td>
                            <td>联想</td>
                            <td>2021款十一代酷睿i7 14英寸高性能轻薄商务学生超薄本设计超极本办公游戏手提笔记本电脑</td>
                            <td>6899.00</td>
                            <td>2021 5/15</td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    2.2.4.2、基础属性

    2.2.5、表单

    依赖加载模块form

    1. 给表单体系所在的父元素加上class=“layui-form”
    2. 基本的行区块结构,它提供了响应式的支持。可以换成其他结构,但必须要在外层容器中定义class=“layui-form”,form模块才能正常工作。
    <form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label for="uName" class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入用户名"
                       id="uName" autocomplete="off" autofocus>
            </div>
        </div>
    </form>
    
    2.2.5.1、输入框
    <input type="text" name="username" class="layui-input" required lay-verify="required|number"
           placeholder="请输入用户名"
           id="uName" autocomplete="off" autofocus>
    
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit>提交</button>
        <input type="reset" class="layui-btn layui-btn-primary">
    </div>
    
    • required:浏览器规定的必填项
    • lay-verify=“required|number”:注册form模块需要验证的类型
    • class=“layui-input”:layui.css提供的通用CSS类

    注:提交按钮必须要包含lay-submit,否则可能导致验证不生效问题

    2.2.5.2、下拉框
    <select name="city" lay-verify="required">
        <option value="">请选择城市</option>
        <option value="010">北京</option>
        <option value="021" disabled>上海(禁用)</option>
        <option value="0571" selected>杭州(默认选中)</option>
    </select>
    
    • 通过selected设置默认选中项
    • 通过disabled开启禁用 可设置select标签 和 option标签(禁用下拉框、禁用下拉中的项)

    可以通过optgroup标签给select分组

    <select name="history">
        <option>请选择</option>
        <optgroup label="少年时代">
            <option>最喜欢的运动?</option>
        </optgroup>
        <optgroup label="青年时代">
            <option>最喜欢的音乐?</option>
            <option>最热爱的生活?</option>
        </optgroup>
    </select>
    

    通过设置lay-search属性可以开启搜索功能

    <select name="life" lay-search>
        <option>请选择</option>
        <option>吃饭</option>
        <option>睡觉</option>
        <option>打豆豆</option>
    </select>
    
    2.2.5.3、复选框
    <h2>默认风格</h2>
    <input type="checkbox" name="hobby" title="唱歌" value="sing" disabled>
    <input type="checkbox" name="hobby" title="阅读" value="read" checked>
    <input type="checkbox" name="hobby" title="打篮球" value="playBasketball">
    <h2>原始风格</h2>
    <input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="sing" disabled/>
    <input type="checkbox" name="hobby" title="运动" lay-skin="primary" value="sport"/>
    <input type="checkbox" name="hobby" title="写作" lay-skin="primary" value="write" checked/>
    
    • 通过title属性设置自定义文本(如果不需要文本,则不设置title属性)
    • 通过checked设置可设置默认选中
    • 通过属性lay-skin属性设置复选框的样式效果(primary表示原始风格)
    • 通过disabled禁用元素
    • 设置value="read"可自定义值,否则选中时返回的值默认是:on
    2.2.5.4、开关

    将复选框checkbox,通过设定 lay-skin=“switch” 形成了开关风格

    <input type="checkbox" name="start" lay-skin="switch">
    <input type="checkbox" name="open" lay-skin="switch" lay-text="ON|OFF" checked>
    <input type="checkbox" name="turn" lay-skin="switch" lay-text="开启|关闭">
    <input type="checkbox" name="close" lay-skin="switch" disabled>
    
    • 属性checked可设定默认打开状态
    • 属性disabled开启禁用
    • 属性lay-text可自定义开关两种状态的文本
    • 设置*value=“open”*可自定义值,否则选中时返回的值默认是:on
    2.2.5.5、单选框
    <input type="radio" name="gender" value="man" title="">
    <input type="radio" name="gender" value="woman" title="" checked>
    <input type="radio" name="gender" value="" title="中性" disabled>
    
    • 属性title可自定义文本
    • 属性checked设置默认选中项
    • 属性disabled开启禁用
    • 设置value="xxx"可自定义值,否则选中时返回的值默认是:on
    2.2.5.6、文本域
    <textarea name="introduce" required lay-verify="required" placeholder="请输入你的个人简介"
              class="layui-textarea"></textarea>
    

    class=“layui-textarea”:layui.css提供的通用CSS类

    2.2.5.7、组装行内表单
    <div class="layui-inline">
        <label class="layui-form-label">范围</label>
        <div class="layui-input-inline">
            <input type="text" name="price_min" placeholder="" autocomplete=""
                   class="layui-input">
        </div>
        <!--横线-->
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
            <input type="text" name="price_max" placeholder="" autocomplete=""
                   class="layui-input">
        </div>
    </div>
    

    class=“layui-inline”:定义外层行内
    class=“layui-input-inline”:定义内层行内

    2.2.5.8、忽略美化渲染

    可以对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格。

    <input type="radio" title="" name="sex" lay-ignore="">
    
    2.2.5.9、表单方框风格

    追加 layui-form-pane 的class,来设定表单的方框风格。内部结构不变

    <form class="layui-form layui-form-pane" action="">
        <!--内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭)-->
        <div class="layui-form-item" pane>
            <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>
    </form>
    

    3、组件示例


    3.1、弹出层

    依赖加载模块:layer,独立版本:layer.layui.com

    3.1.1、使用场景

    由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

    场景用前准备调用方式
    1. 作为独立组件使用如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js通过script标签引入layer.js后,直接用即可。 参考:快速上手
    2. layui 模块化使用如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.csslayui.js通过*layui.use(‘layer’, callback)*加载模块
    1. 作为独立组件使用 layer

      <script src="../static/layui/layui.js"></script>
      <link rel="stylesheet" href="../static/layui/css/layui.css">
          <script type="text/javascript">
              //使用layer
              layer.msg("hello");
      </script>
      
    2. 在layui中使用layui

      //加载模块
      layui.use('layer', function () {
          var layer = layui.layer;
      
          //使用layer
          layer.msg("hi");
      })
      

    3.1.2、基础参数

    1. type 基本层类型

      类型:Number,默认:0

      layer提供了5种层类型。可传入的值有:

      0(信息框,默认)

      1(页面层)

      2(iframe层)

      3(加载层)

      4(tips层)

    2. title 标题

      类型:String/Array/Boolean,默认:‘信息’

      title支持三种类型的值,

      若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’]数组第二项可以写任意css样式

      如果你不想显示标题栏,你可以title: false

    3. content 内容

      类型:String/DOM/Array,默认:’ ’

      content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM

      /*信息框*/
      layer.open({
          type: 0,
          //title: '系统信息',
          //title: false,       //不显示标题
          title: ['温馨提示', 'color:green'],
          content: '显示绿色的标题'    //这里content传入的是文本
      });
      
      /*页面层*/
      layer.open({
          type: 1,
          title: '显示红色div块',
          content: '<div style="width: 200px;height: 200px;background-color: red"></div>'    //这里content传入的是html
      });
      
      /*iframe层*/
      layer.open({
          type: 2,
          title: '加载url地址,显示对应页面',
          //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content:
          content: ['https:www.tmall.com'],
          area: ['1000px', '800px'],      //设置宽和高
      });
      
      /*tip层*/
      layer.open({
          type: 4,
          content: ['ASUS华硕游戏本电脑笔记本i5顽石i7飞行堡垒7代8代吃鸡天选R7联想', '#detail']  //数组第二项即吸附元素选择器或者DOM
      });
      
    4. icon 图标

      注:信息框和加载层的私有参数

      类型:Number,默认:-1(信息框)/ 0(加载层)

      信息框默认不显示图标。当你想显示图标时,默认层可以传入0-6;如果是加载层,可以传入0-2。如:

    layer.alert('酷毙了', {icon: 1});
    layer.msg('不开心', {icon: 5})
    layer.load(2);      //风格2的加载
    

    示例:

    layer.alert('nice to meet you!', {icon: 6});
    
    layer.msg('你愿意和我做朋友吗', {
        time: 0,        //自动关闭所需毫秒数
        anim: 3,        //设置弹出动画
        shade: [0.8, 'pink'],
        btn: ['当然愿意', '残忍拒绝'],    //按钮
        yes: function (index) {     //关闭当前弹出框
            layer.close(index);
            layer.msg('新朋友,你好', {
                icon: 6,
                btn: ['开心', '快乐'],
            })
        }
    })
    
    layer.msg('这是常用的弹出层');
    
    layer.msg('玩命加载中', function () {
        layer.msg('欢迎回来', {icon: 5});
    })
    

    3.2、日期和时间选择

    模块加载名称:laydate,独立版本:http://www.layui.com/laydate/

    layDate 包含了大量的更新,其中主要以:年选择器年月选择器日期选择器时间选择器日期时间选择器 五种类型的选择方式为基本核心

    3.2.1、快速使用

    和 layer 一样,你可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,请按照你的实际需求来选择。

    场景用前准备调用方式
    1. 在 layui 模块中使用下载 layui 后,引入layui.csslayui.js即可通过*layui.use(‘laydate’, callback)*加载模块后,再调用方法
    2. 作为独立组件使用layDate 独立版本官网下载组件包,引入 laydate.js 即可直接调用方法使用

    在 layui 模块中使用

    <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="myDate" placeholder="选择日期">
        </div>
    </div>
    
    <script>
        layui.use('laydate', function () {
            //加载laydate模块
            var laydate = layui.laydate;
    
            //执行一个laydate实例
            laydate.render({
                elem: '#myDate',        //绑定id为myDate元素
            })
        })
    </script>
    
    3.2.2、基础参数
    1. elem 绑定元素

      类型:String/DOM,默认值:

      必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象

      laydate.render({ 
          elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
      });
      
    2. type 控件选择类型

      类型:String,默认值:date

      用于单独提供不同的选择器类型,可选值如下表:

      //日期时间选择器
      laydate.render({ 
          elem: '#test'
          ,type: 'datetime'
      });
      
    3. 自定义格式

      类型:String,默认值:yyyy-MM-dd

      通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下:

      通过上述不同的格式符组合成一段日期时间字符串,可任意排版

      laydate.render({
          elem: '#myDate5',        //绑定id为myDate5元素
          type: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',      //可任意组合
      });
      
    4. value 初始值

      类型:String,默认值:new Date()

      支持传入符合format参数设定的日期格式字符,或者 new Date()

      laydate.render({
          elem: '#myDate5',        //绑定id为myDate5元素
          type: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',      //可任意组合
          value: '2020-5-16 12:20:30',        //必须遵循format参数设定的格式
      });
      
      //传入Date对象赋初值
      laydate.render({
          elem: '#myDate6',
          value: new Date(),
      })
      

    3.3、分页

    模块加载名称:laypage

    3.3.1、快速使用

    laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:

    <div id="page"></div>
    
    <script>
        layui.use('laypage', function () {
            //加载laypage模块
            var laypage = layui.laypage;
    
            //加载laypage实例
            laypage.render({
                elem: 'page',       //elem属性绑定的是容器的ID属性值,不需要加 #号
                count: 100,      //数据总数,从服务端获得
                limit: 10,      //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。(这里计算出一共有:100/10 = 10页)
                limits: [5, 10, 15, 20],        //每页条数选择的选择项
                layout: ['prev', 'page', 'next', 'limit', 'count'],      //自定义排版
                groups: 10,     //连续显示的页码个数
                theme: '#80d4de',
            })
        })
    </script>
    
    3.3.2、基础参数

    通过核心方法:laypage.render(options) 来设置基础参数

    参数选项说明类型默认值
    elem指向存放分页的容器,值可以是容器ID、DOM对象。如: 1. elem: ‘id’ 注意:这里不能加 # 号 2. elem: document.getElementById(‘id’)String/Object-
    count数据总数。一般通过服务端得到Number-
    limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10
    limits每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]
    curr起始页。一般用于刷新类型的跳页以及HASH跳页。如:</>code//开启location.hash的记录laypage.render({ elem: 'test1' ,count: 500 ,curr: location.hash.replace('#!fenye=', '') //获取起始页 ,hash: 'fenye' //自定义hash值});Number1
    groups连续出现的页码个数Number5
    prev自定义“上一页”的内容,支持传入普通文本和HTMLString上一页
    next自定义“下一页”的内容,同上String下一页
    first自定义“首页”的内容,同上String1
    last自定义“尾页”的内容,同上String总页数值
    layout自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域)Array[‘prev’, ‘page’, ‘next’]
    theme自定义主题。支持传入:颜色值,或任意普通字符。如: 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类,以便自定义主题String-
    hash开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页String/Booleanfalse
    3.3.3、jump 切换分页的回调

    当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

    laypage.render({
        elem: 'page',       //绑定元素
        count: 50,      //总页数
        limit: 5,       //每页显示的条数
        limits: ['5', '10', '15', '20'],        //每页条数的选择项
        layout: ['prev', 'page', 'next', 'limit', 'count'],     //自定义排版
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数,比如:
            console.log(obj.curr);      //得到当前页,以便向服务端请求对应页的数据。
            console.log(obj.limit);     //得到每页显示的条数
    
            //首次不执行
            if (!first) {
                //do something
            }
        }
    })
    

    3.4、数据表格

    模块加载名称:table

    3.4.1、快速使用

    创建一个table实例最简单的方式是,在页面放置一个元素

    ,然后通过 table.render() 方法指定该容器

    <!--准备容器,设置id属性值-->
    <table id="table"></table>
    
    <script>
    
        //加载table模块
        layui.use('table', function () {
            var table = layui.table;
    
            //执行table实例
            table.render({
                elem: '#table',     //绑定容器id    属性值
                url: '../static/js/user.json',       //数据接口
                page: true,     //开启分页
                cols: [[        //设置表头
                    {field: 'aa', type: 'numbers'},     //设置序列号(数字)
                    {field: 'bb', type: 'checkbox'},     //设置序列号(复选框)
                    {field: "id", title: '用户编号', sort: true, width: 120, hide: true},       //隐藏该列
                    {field: "username", title: '用户名', width: 100,},
                    {field: "sex", title: '性别', width: 100,},
                    {field: "city", title: '城市',}
                ]],
            });
        })
    </script>
    
    3.4.2、三种初始化渲染方式
    机制适用场景
    方法渲染用JS方法的配置完成渲染(推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。
    自动渲染HTML配置,自动渲染无需写过多 JS,可专注于 HTML 表头部分
    转换静态表格转化一段已有的表格元素无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可
    3.4.3、方法渲染

    将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个 选择器

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

    渲染表格

    //执行渲染
    table.render({
        elem: '#test',     //指定原始表格元素选择器(推荐id选择器)
        url: "../static/js/user.json",        //数据接口
        height: 500,     //容器高度
        page: true,         //开启分页
        cols: [[        //设置表头
            {field: 'id', title: 'ID', sort: true, width: 120},
            {field: 'username', title: '用户名', width: 100},
            {field: 'sex', title: '性别', width: 100},
        ]],
    });
    

    注:*table.render()*方法返回一个对象:var tableIns = table.render(options),可用于对当前表格进行“重载"等操作

    3.4.4、自动渲染

    在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法

    \1) 带有 class=“layui-table”

    标签。
    \2) 对标签设置属性 lay-data="" 用于配置一些基础参数
    \3) 在
    标签中设置属性*lay-data=""*用于配置表头信息

    <table class="layui-table" lay-data="{url:'../static/js/user.json',page:true}">
        <thead>
            <th lay-data="{field:'id'}">ID</th>
            <th lay-data="{field:'username'}">用户名</th>
            <th lay-data="{field:'sex',sort:true}">性别</th>
        </thead>
    </table>
    
    3.4.5、转换静态表格

    页面已经存在了一段有内容的表格,它由原始的table标签组成,这时你需要赋予它一些动态元素

    <table lay-filter="demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:100}">昵称</th>
                <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
                <th lay-data="{field:'sign'}">签名</th>
            </tr> 
        </thead>
        <tbody>
            <tr>
                <td>贤心1</td>
                <td>66</td>
                <td>人生就像是一场修行a</td>
            </tr>
            <tr>
                <td>贤心2</td>
                <td>88</td>
                <td>人生就像是一场修行b</td>
            </tr>
            <tr>
                <td>贤心3</td>
                <td>33</td>
                <td>人生就像是一场修行c</td>
            </tr>
        </tbody>
    </table>
    

    执行用于转换表格的JS方法

    var table = layui.table;
    
    //转换静态表格
    table.init('demo', {
        height: 315 //设置高度
        //支持所有基础参数
    }); 
    
    3.4.6、基础参数使用场景

    基础参数并非所有都要出现,有必选也有可选,结合你的实际需求自由设定

    参考api

    3.4.7、开启头部工具栏及监听事件
    <!--准备容器,设置id属性值-->
    <table id="table" lay-filter="test"></table>
    
    <!--表格工具栏-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!--lay-event给元素绑定事件-->
            <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 layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>
    
    <script>
    
        //加载table模块
        layui.use('table', function () {
            var table = layui.table;
    
            //执行table实例
            table.render({
                elem: '#table',     //绑定容器id    属性值
                url: '../static/js/user.json',       //数据接口
                page: true,     //开启分页
                cols: [[        //设置表头
                    {field: 'aa', type: 'numbers'},     //设置序列号(数字)
                    {field: 'bb', type: 'checkbox'},     //设置序列号(复选框)
                    {field: "id", title: '用户编号', sort: true, width: 120, hide: true},       //隐藏该列
                    {field: "username", title: '用户名', width: 100, unresize: true,},     //设置是否可以拖拽
                    {field: "sex", title: '性别', width: 100,},
                    {field: "city", title: '城市',},
                    //设置表头工具栏
                    {title: "操作", toolbar: "#barDemo"}
                ]],
                //设置表格工具栏
                toolbar: '#toolbarDemo',
            });
    
            /**
             * 监听头工具栏事件
             * 语法:
             *  table.on('toolbar(demo)',function(obj){
             *
             *  });
             *  注:demo表示的是容器上设置的lay-filter属性值
            */
            table.on('toolbar(test)', function (obj) {
                //console.log(obj);       //obj.config可以获取id属性值,即表示当前容器的id属性值,也就是:table
                //获取当前表格被选中的记录对象,返回数据
                var checkStatus = table.checkStatus(obj.config.id);
                //console.log(checkStatus);
                //获取事件名
                var eventName = obj.event;
                //判断事件名,执行对应的代码
                switch (eventName) {
                    case 'getCheckData':
                        //获取被选中的记录的数组
                        var arr = checkStatus.data;
                        //将数组解析成字符串
                        layer.alert(JSON.stringify(arr));
                        break;
                    case 'getCheckLength':
                        //获取被选中的记录的数组
                        var arr = checkStatus.data;
                        layer.msg('选中了' + arr.length + '条数据!');
                        break;
                    case 'isAll':
                        //通过isAll属性判断是否全选
                        var flag = checkStatus.isAll;
                        var str = flag ? '全选' : '未全选';
                        layer.msg(str);
                        break;
                }
            });
    
            //监听行工具栏事件
            table.on('tool(test)', function (obj) {
                //得到当前操作行的相关信息
                var tr = obj.data;
                console.log(tr);
                //得到事件名
                var eventName = obj.event;
                //判断事件名,执行对应方法
                if (eventName == 'add') {   //添加操作
                    layer.msg('add')
                } else if (eventName == 'edit') {   //修改操作
                    //输入框
                    layer.prompt({
                        //表单元素的类型   0:文本框  1:密码框  2:文本域
                        formType: 0,
                        value: tr.username,     //设置输入框的值
                    }, function (value, index) {
                        //修改指定单元格的值
                        //value表示修改的值,也就是输入的值
                        obj.update({
                            username: value,
                        })
                        //关闭弹出层
                        layer.close(index);
                    });
                } else if (eventName == 'del') {    //删除操作
                    //确认框
                    layer.confirm('你确认要删除吗', function (index) {
                        //删除指定tr    del()方法
                        obj.del();
                        //关闭弹出层,(index是当前弹出层的下标)
                        layer.close(index);
                    })
                }
            });
        })
    </script>
    
    3.4.8、开启单元格编辑
    <table class="layui-table" id="tableCell" lay-data="{url:'../static/js/user.json'}" lay-filter="demo">
        <thead>
            <tr>
                <th lay-data="{type:'numbers'}"></th>
                <th lay-data="{field:'id',type:'checkbox',title:'ID'}"></th>
                <th lay-data="{field:'username',edit:'text',title:'userName',sort:true}"></th>
                <th lay-data="{field:'sex',edit:'text',title:'sex',unresize:true}"></th>
                <th lay-data="{field:'city',edit:'text',title:'city'}"></th>
            </tr>
        </thead>
    </table>
    
    <script>
        layui.use('table', function () {
            var table = layui.table;
    
            /**
             * 监听单元格编辑事件
             * 表头设置edit属性 单元格编辑类型(默认不开启)目前只支持:text(输入框)
             */
            table.on('edit(demo)', function (obj) {
                console.log(obj);
                var value = obj.value;  //获取修改后的值
                var data = obj.data;    //得到当前修改的tr对象
                var field = obj.field;  //得到修改的字段名
                layer.msg('id为:' + data.id + '的' + field + '的字段值修改为:' + value);
            });
        })
    </script>
    
    3.4.9、数据表格的重载
    <!--搜索框-->
    <div class="demoTable layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">搜索ID:</label>
            <div class="layui-input-inline">
                <input type="text" name="id" id="demoReload" placeholder="请搜索你想要的ID" autocomplete="off"
                       class="layui-input">
            </div>
            <button class="layui-btn" id="searchBtn">搜索</button>
        </div>
    </div>
    
    
    //加载table模块
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.jquery;       //获取jquery对象
        /**
    	 * 给指定元素绑定事件
    	 */
        $(document).on('click', '#searchBtn', function (data) {
            //获取搜索文本框的值
            var searchText = $("#demoReload");
            //调用数据表格重载方法    table.reload(ID, options, deep)
            table.reload('table', {
                where: {        //设定需要传递的参数
                    id: searchText.val(),
                },
                page: {
                    curr: 1,        //表示让条件查询从第一页查询,如果未设置则从当前页开始查询,此页之前的所有数据不纳入条件筛选
    
                }
            })
        });
    

    3.5、文件上传

    模块加载名称:upload

    3.5.1、快速使用
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>拖拽上传(只允许上传后缀为png格式的图片)</legend>
    </fieldset>
    
    <div class="layui-upload-drag" id="test">
        <i class="layui-icon"></i>
        <p>点击上传,或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
    </div>
    
    <script>
        //加载upload模块
        layui.use('upload', function () {
            var upload = layui.upload;
    
            //执行实例  拖拽上传
            upload.render({
                elem: '#test',
                url: 'https://httpbin.org/post',    //服务端上传接口  此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
                method: '',     //可选项。HTTP类型,默认:post
                data: {}, //可选项。额外的参数,如:{id: 123, abc: 'xxx'}
                accept: 'images',       //指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
                exts: 'png',            //允许上传的文件后缀
                acceptMime: 'image/png',      //规定打开文件选择框时,筛选出的文件类型;只显示 png 文件
                size: '3072',       //设置文件最大可允许上传的大小,单位 KB      默认为:0(即不限制)
                multiple: 'true',           //是否允许多文件上传。设置 true即可开启     默认为:false
                number: '2',         //设置同时可上传的文件数量,一般配合 multiple 参数出现      默认为:0(即不限制)
                drag: 'true',            //是否接受拖拽的文件上传,设置 false 可禁用  默认为:true
                done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                    console.log(res)
                }, error: function () {
                    //请求异常回调
                    layer.msg('上传失败');
                }
            });
        });
    </script>
    
    3.5.2、核心方法与基础参数选项

    参考官方api

    3.6、轮播图

    模块加载名称:carousel

    3.6.1、快速使用
    <div class="layui-carousel" id="test">
        <div carousel-item>
            <div><img src="../static/image/birthday_banner_pc.jpg"></div>
            <div><img src="../static/image/byz_banner_pc.jpg"/></div>
            <div><img src="../static/image/login_bg.jpg"/></div>
            <div><img src="../static/image/longtou.jpg"/></div>
            <div><img src="../static/image/youflower_pc.jpg"/></div>
        </div>
    </div>
    
    <script>
        //加载carousel模块
        layui.use('carousel', function () {
            var carousel = layui.carousel;
    
            //建造实例
            carousel.render({
                elem: '#test',      //绑定元素
                width: '100%',      //设定轮播容器宽度,支持像素和百分比
                height: '480px',    //设定轮播高器高度,支持像素和百分比
                arrow: 'always',     //切换箭头默认显示状态,可选值为:hover(悬停显示)always(始终显示)none(始终不显示) 默认为:hover
                autoplay: true,        //是否自动切换  默认为:true
                interval: 2000,        //自动切换的时间间隔,单位:ms(毫秒),不能低于800   默认为:3000(3秒)
                index: 1,       //初始开始的条目索引  默认为:0(也就是从第一张图片开始显示)
                anim: 'default',   //轮播切换动画方式,可选值为:default(左右切换)updown(上下切换)fade(渐隐渐显切换) 默认为:default
                full: false,     //是否全屏轮播    默认为:false
            });
        });
    </script>
    
    3.6.2、基础参数

    参考官方api

    展开全文
  • springmvc 后台数据产生了一个JSON文件 json中,中文内容正常,当layui table去调用该json文件, 显示出来的时候,就出现了乱码。其中,table col 的title的中文是正常的
  • layUI

    2020-12-04 17:09:17
    layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。 https://www.layui.com/doc/ 将layUI全部路径导入项目(注意项目文件路径) ...
  • layui

    2021-03-28 11:35:45
    layui (谐音:类ui)是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,属于轻量级框架,适用于开发后端模式,在服务器端页面上有良好的效果,是提供给后端...
  • Layui

    2021-05-30 10:04:37
    Layui 开发工具与关键技术:layui 作者:李则农 撰写时间:2021/5/27 开始使用 - 入门指南 1. 官网首页下载 你可以在我们的官网首页下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录...
  • @layui 图片轮播动态拼接不显示图问题 layui 图片轮播动态拼接不显示图问题 layui.use([‘carousel’], function(){ // 注册 var $ = layui.$, carousel = layui.carousel; var b = 1920/419;//我的图片比例 var W =...
  • layui的table中显示图片

    万次阅读 2018-02-11 11:35:42
    图片需要用到模板.templet:注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; layui.use('table',...
  • Layui表格中显示图片

    千次阅读 2019-09-17 20:37:09
    要在layui表格上显示图片,我的做法是首先自定义一个函数,获取对应数据的ID值,然后根据ID值去控制器页面查询出对应图片。之后再返回图片layui数据表格上。 视图页面代码: driver.render({ elem: "#driver...
  • LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但...
  • 之前用layui 富文本编辑器的时候,上传较大的图片时,图片显示不全,而且编辑起来非常的不便,这样的用户体验是非常不好的,想了好久没想出办法, 1.找到layedi.js 文件 路径:layui/lay/modules/layedit.js,如下图...
  • Layui数据表格之图片的处理

    千次阅读 2020-04-06 20:22:43
    Layui数据表格图片的处理 现在的问题是使用layui数据表格如何插入图片。 如果我们是静态表格可直接用img标签嵌入即可,但如果使用table.render函数渲染表格和就会和普通的字段有所不同。 处理方法如下: cols:[[ {...
  • layui怎么表格中显示图片

    千次阅读 2019-11-16 10:29:38
    layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了 如果你想了解更多关于layui的知识,可以点击:layui教程 1、jsp代码 <div class="demoTable"> <button class=...
  • 1.application.properties文件默认,可以用不用配置。 2.启动类自动生成。 3.... import java.io.File;... import org.springframework.stereotype.Controller;...页面需要引入layui的相关包。 上传 选择文件 开始上传
  • 初识layui

    2019-11-01 14:39:01
    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之...
  • 1、创建富文本编辑器 <form class="layui-form" method="post" id="myForm" enctype="multipart/form-data"> ...div class="layui-form-item layui-form-text"> <label clas...
  • 学习layui

    2017-06-09 17:12:00
    获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件: ./layui/css/layui.css ./layui/layui.js 我们更推荐你遵循Layui的模块规范,建立一个自己的模块作为...
  • 一、layUI的介绍layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,...layui 区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准...
  • 最近需要做一个批量上传图片的功能,为丰富前端框架的拓展学习使用,这次打算用layui前端框架实现,源码放在文章底部,废话不多说,先上演示效果 执行前: 操作后: 一、导入对应的layui样式及其资源文件 1.引入...
  • 简介: 全网维护中 禁止添加新用户 部分商提供了 老用户修改...今天爱发布了改密接口 作者往者把他写成了网页版的 接口是第三方的 慎用 建议用本博客新发的邮箱版本 为本地接口 使用: ... 网盘下载地址: ...图片: ...
  • layui学习

    千次阅读 2018-08-05 22:54:06
    1、全局配置:layui.config(options) 2、定义模块:layui.define([mods],callback) 3、加载所需模块:layui.use([mods],callback) 4、其他的方法 二、页面元素(认识) 三、模块规范 四、页面元素(使用) 1...
  • LayUI基础入门

    2021-08-21 00:28:12
    前言:本篇文章是作者在B站学习LayUI视频的笔记 视频传送门:https://www.bilibili.com/video/BV19V411b7sx 文章目录LayUI1.主要内容2.LayUI 的安装及使用2.1. LayUI 的介绍2.2. LayUI 的特点2.3. 下载与使用3.页面...
  • layui+springboot+thymeleaf上传图片接口并显示图片 前端页面 前端使用的是开源框架layuilayui提供了一个上传文件的组件,使用方式如下: html javascript <script> layui.use('upload',function...
  • layui 单图上传

    2019-09-21 11:14:57
    今天分享一个基于layui和tp5.1的的单图上传,带预览和删除 代码: ... 首先要引入layui插件,下载地址:http://www.layui.com <div class="layui-form-item" id="pics">...轮播图片</div> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 947
精华内容 378
关键字:

layui的静态图片