精华内容
下载资源
问答
  • Layui数据表格图片的处理 现在问题是使用layui数据表格如何插入图片。 如果我们是静态表格可直接用img标签嵌入即可,但如果使用table.render函数渲染表格和就会和普通字段有所不同。 处理方法如下: cols:[[ {...

    Layui数据表格图片的处理

    现在的问题是使用layui数据表格如何插入图片。
    如果我们是静态表格可直接用img标签嵌入即可,但如果使用table.render函数渲染表格和就会和普通的字段有所不同。
    处理方法如下:

    cols:[[
                {checkbox: true},
                {field: 'head',width:120,title: '员工头像',templet:function(d){
                         if(d.head==null)
                                 return "<img src='img/58dfb25b762643.jpg' width='80px' height='80px' class='layui-circle'/>"
                         return "<img src=http://127.0.0.1/img/get?imgName="+d.head+" width='80px' height='80px' class='layui-circle'/>";
                  }},
                  {field: 'eno',title: '员工编号',minWidth: 110,sort: true},
                  {field: 'ename',title: '员工姓名',minWidth: 110,sort: true},
                  {field: 'sex',title: 性别',minWidth:  75,sort: true},
                  {field: 'birth',title: '生日',minWidth:  100,sort: true},
                  {field: 'hiredate',title: '入职时间',minWidth:  110,sort: true},
                  {field: department',title: '部门',minWidth:  75,sort: true},
                  {field: 'leval',title: '职位',minWidth:  80,sort: true},
                  {field: 'salary',title: '月薪',minWidth: 100,sort: true},
                  {fixed: 'right', title: '操作', minWidth: 170, align:'center',  toolbar: '#tool'}//编辑栏
          ]],
    

    上面是我做项目时的一个处理,结果如下:
    在这里插入图片描述
    其中最主要的是有个属性叫templet,它允许你将一一个html模板渲染到当前单元格。
    除了这种用法还可以向绑定行内编辑栏一样,使用id进行绑定。
    但是如果我们一旦需要将数据也渲染到其中,就需要使用当前function回调的方式,function的参数d就是当前的行数据。


    第一次写博客,讲的不是很清楚,欢迎留言探讨。
    转载请注明出处!

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

    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 table第三种渲染方法:静态table渲染layui样式。渲染layui样式是想得到相关列默认sort方法,lay-data中sort:true. table.init('OrderTable', {...

    因为赋值不同的图片,该图片路径在前端进行维护,就选用layui table的第三种渲染方法:静态table渲染layui样式。渲染layui样式是想得到相关列的默认sort方法,lay-data中的sort:true.

    table.init('OrderTable', {
    limit: 15
    });

    总结:在数据库中取数的时候就进行了排序,得到list是有序的,这时,就只能在页面加载data时,对第一列进行赋值。第一等级:1.png图片,第二等级:2.png,第三等级:3.png,第四行数据之后都是显示0.png图片。

    效果图:

    现在默认的是“额外调整里程”从少到多排序,自动循环赋值第一列等级图片,用来区别等级。

    测试的时候出现一点小问题:

    说明:每个数据加单位,就自动转化为string类型了,所以,排序按钮只是进行第一个首数字的排序(我一直找不到规律,对自己很无语啊~)。不加单位的都是数值型的,点击排序小按钮,可以显示正常的排序数据。

    转载于:https://www.cnblogs.com/Ly426/p/9953640.html

    展开全文
  • D:\Development Tools\workspace_idea\mall\mall-api\src\main\resources\static\goodsImg\ 是我上传的图片的绝对地址。 @Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter { /** * 静态...

    解决

    /goodsImg/**是我的访问路径,
    D:\Development Tools\workspace_idea\mall\mall-api\src\main\resources\static\goodsImg\ 是我上传的图片的绝对地址。

    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
        /**
         * 静态资源映射
         * @param registry
         */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
            registry.addResourceHandler("/goodsImg/**").addResourceLocations("file:D:\\Development Tools\\workspace_idea\\mall\\mall-api\\src\\main\\resources\\static\\goodsImg\\");
    
        }
    }
    
    展开全文
  • 一开始用静态的图片 可以正常加载,然后又从json动态拼接图片得div 发现图片不显示 控制面板中也成功加载了图片 最后发现是没有重置轮播; 需要把实例化的layui放在拼接div 后边 <div class="layui-carousel...
  • 即使我写成静态也没有办法! ![图片说明](https://img-ask.csdn.net/upload/201901/04/1546586959_781244.jpg)![图片说明](https://img-ask.csdn.net/upload/201901/04/1546586972_59673.jpg) 谢谢大家!
  • 前后端代码都齐全,可以用来学习提升技术,背景图片或者静态样式可以自行美化修改 废话不多说,直接上截图 有需要同学可以私信我或者加我QQ获取资源 希望能够帮助有需要人 资源如果有需要可以加QQ联系:...
  • 1. 前言上一篇文章简单地介绍了 PPT 文档结构,并使用 python-pptx 这个依赖库完成对 PPT 文档最基本操作最全总结 | 聊聊 Python 办公自动化之 PPT(上)作为 PPT 系列篇第 2 ...Image,包含静态图片、Gif 动态图...
  • 在html页面中,引入CSS,JS,图片失败,但是在IDEA中按住ctrl+鼠标左键点击引入连接能跳转到对应的静态资源文件。 错误配置如下: <link rel="stylesheet" href="/static/layui/css/layui.css" /> <...
  • vue静态资源加载

    2020-10-24 13:48:29
    src/assets目录:存放组件img、background-image引用的图片静态资源 2.public静态资源 2.1 外部静态资源 这些静态资源包含了编译之前就存在外部js、css,如layui、jquery等等js文件,这些文件在index....
  • 今天使用springboot+layui+shiro实现一个前后端分离商城后台系统,一个小小静态资源(image)问题搞了一下午;还好坚持了下来,否者崩溃、吐血都是小事???????????? 这是引入路径 这是图片的实际路径 自己真...
  • 会报错hello:10 GET ...#设定静态文件路径包括js,css等(springboot默认的静态资源文件是在static目录下,也可以自定义添加路径) spring.mvc.static-path-patt
  • 最近在使用springboot+thymeleaf技术,打包成jar...1.静态文件错误:比如bootstrap或者layui的静态css,js文件未找到,就会报如下错误 org.thymeleaf.exceptions.TemplateInputException: An error happened during tem
  • 导读 项目已上传到我的码云,如果有需要的,可以自行下载:[项目原码]1 今天,应产品经理的要求,当我们点击左按钮时...使用layui的更美地弹出信息,比如已经达到最后一张了,无法左移 页面设计 <!DOCTYPE html>
  • 颜色选择器使用

    2019-08-05 11:44:26
    把这个文件夹(里边有很多用不到的文件,如果感觉文件大的话,可以删除一部分,我把图片的文件夹删除了)上传到你的项目的静态资源文件夹中(一般放在static文件夹下),然后在你的html页面中引入js/css文件, ...
  • zbone-imgslide-master.zip

    2020-09-16 13:27:07
    仿照淘宝展示商品图片的左右轮播,当图片滑过,底层图片自动填充到父容器之中;使用JQuery将静态的HTML变得有灵魂;使用vue.js实现数据的双向绑定;...使用layui的更美地弹出信息,比如已经达到最后一张了,无法左移
  • 基于layui构建,简洁个人文章,个人图片相册,在线留言等类型博客网站静态模板。 资源结构:index、about、album、details、leacots、whisper.html和img,js,layui 导航栏有文章、微语、留言、相册、关于 ...
  • EAdmin极简社区 1.0.8.zip

    2019-05-27 13:25:08
    EAdmin极简社区是基于LayUI模板制作一套社区程序,后台支撑采用了ThinkPHP5框架。EAdmin极简社区 1.0.8 更新日志:2017-05-27针对个别空间安装出现两个3306进行了修正,并且增加了版主设置等插件;极简社区,意在...
  • 同一域名下自然是可以访问到静态图片的; > 但是,如果向外提供数据,就无法获取图片资源; > 比如我进行小程序设计时(不在一个域),接口数据中无法捕获图片资源,自然就无法正确使用 > 另外,如果涉及...
  • 以后台友情链接功能为例,增删改查、校验、图片上传等功能及相关页面,仅需12行代码完成最普通单表(友情链接页面) 2、官方JSTL模板。前台模板采用官方JSTL,不需要额外学习其他模板如FreeMarker、Smarty或...
  • http://laytpl.layui.com mozilla - nunjucks https://github.com/mozilla/nunjucks Juicer https://github.com/PaulGuo/Juicer dustjs http://akdubya.github.io/dustjs etpl http://ecomfe.github.io/etpl...

空空如也

空空如也

1 2
收藏数 21
精华内容 8
关键字:

layui的静态图片