精华内容
下载资源
问答
  • html:选择多文件文件名大小状态操作开始上传在upload中增加一个before,在before中添加参数before: function (obj) {this.data = {"BUSINESS_ID": getUrlParam("id"),"FLOW_ID": getUrlParam("flowId"),"FLOW_NODE_...

    参考官方文件上传代码,js中增加一个before处理参数问题。

    html:

    选择多文件

    文件名大小状态操作

    开始上传

    在upload中增加一个before,在before中添加参数

    before: function (obj) {

    this.data = {

    "BUSINESS_ID": getUrlParam("id"),

    "FLOW_ID": getUrlParam("flowId"),

    "FLOW_NODE_ID": getUrlParam("flowNodeID")

    }///携带额外的数据

    }

    以下为完整JS

    layui.config({

    base: '../../../layuiadmin/' //静态资源所在路径

    }).extend({

    index: 'lib/index' //主入口模块

    }).use(['index', 'form', 'layer', 'table', 'upload',], function () {

    var form = layui.form

    , $ = layui.jquery //由于layer弹层依赖jQuery,所以可以直接得到

    , table = layui.table

    , upload = layui.upload

    , router = layui.router();

    var Param = new Object();

    //多文件列表示例

    var demoListView = $('#demoList')

    , uploadListIns = upload.render({

    elem: '#fileList'

    , size: 102400 //限制文件大小,单位 KB

    , exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件

    , url: webroot + "/guarantee/upload/uploadFile?userid=123456"

    , accept: 'file'

    , multiple: true

    , auto: false

    , bindAction: '#fileListAction'

    // , data: JSON.stringify(Param)

    , choose: function (obj) {

    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

    //读取本地文件

    obj.preview(function (index, file, result) {

    var tr = $(['

    '

    , '

    ' + file.name + ''

    , '

    ' + (file.size / 1014).toFixed(1) + 'kb'

    , '

    等待上传'

    , '

    '

    , '重传'

    , '删除'

    , '

    '

    , '

    '].join(''));

    //单个重传

    tr.find('.demo-reload').on('click', function () {

    obj.upload(index, file);

    });

    //删除

    tr.find('.demo-delete').on('click', function () {

    delete files[index]; //删除对应的文件

    tr.remove();

    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选

    });

    demoListView.append(tr);

    });

    }

    , before: function (obj) {

    this.data = {

    "BUSINESS_ID": getUrlParam("id"),

    "FLOW_ID": getUrlParam("flowId"),

    "FLOW_NODE_ID": getUrlParam("flowNodeID")

    }///携带额外的数据

    }

    , done: function (res, index, upload) {

    if (res.code == 0) { //上传成功

    var tr = demoListView.find('tr#upload-' + index)

    , tds = tr.children();

    tds.eq(2).html('上传成功');

    tds.eq(3).html(''); //清空操作

    return delete this.files[index]; //删除文件队列已经上传成功的文件

    }

    this.error(index, upload);

    }

    ,

    error: function (index, upload) {

    var tr = demoListView.find('tr#upload-' + index)

    , tds = tr.children();

    tds.eq(2).html('上传失败');

    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传

    }

    })

    ;

    //文件列表

    table.render({

    elem: '#test'

    , url: '/file/getAll'

    , cellMinWidth: 200

    , cols: [[

    {field: 'id', width: '5%', title: 'ID', sort: true}

    , {field: 'name', width: '20%', title: '文件名'}

    , {field: 'host', width: '20%', title: 'Host'}

    , {field: 'path', width: '35%', title: '路径', sort: true}

    , {field: 'operating', width: '20%', title: '操作'}

    ]]

    });

    table.on('radio(test)', function (obj) {

    tableCheck = obj.data;

    });

    //监听事件

    table.on('tool(test)', function (obj) {

    var data = obj.data; //获得当前行数据

    var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if (layEvent === 'detail') { //查看

    //do somehing

    } else if (layEvent === 'delete') { //删除

    layer.confirm('真的删除行么', function (index) {

    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存

    layer.close(index);

    //向服务端发送删除指令

    });

    } else if (layEvent === 'update') { //编辑

    //do something

    //同步更新缓存对应的值

    obj.update({

    username: '123'

    , title: 'xxx'

    });

    }

    });

    //监听行单击事件

    table.on('row(test)', function (obj) {

    //console.log(obj.tr) //得到当前行元素对象

    //console.log(obj.data) //得到当前行数据

    //obj.del(); //删除当前行

    //obj.update(fields) //修改当前行数据

    });

    //监听行双击事件

    table.on('rowDouble(test)', function (obj) {

    //obj 同上

    //layer.msg(obj.data.host+'/'+obj.data.path);

    var index = obj.data.path.lastIndexOf(".");

    //获取后缀

    var ext = obj.data.path.substr(index + 1);

    var isImg = isAssetTypeAnImage(ext);

    var isDoc = isDocFunc(ext);

    var url = "";

    //是否是图片

    if (isImg) {

    url = obj.data.host + '/' + obj.data.path;

    } else if (isDoc) {

    url = '/doc/preview?path=' + obj.data.host + '/' + obj.data.path

    } else {

    layer.msg("无法预览");

    }

    layer.open({

    type: 2,

    area: ['700px', '450px'],

    fixed: false, //不固定

    maxmin: true,

    content: url

    });

    });

    /**

    * 判断文件是否可直接预览

    * @param ext

    * @returns {boolean}

    */

    function isAssetTypeAnImage(ext) {

    return [

    'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff', 'txt'].indexOf(ext.toLowerCase()) !== -1;

    }

    /**

    * 是否是文档格式

    * @param ext

    * @returns {boolean}

    */

    function isDocFunc(ext) {

    return [

    'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].indexOf(ext.toLowerCase()) !== -1;

    }

    });

    后台接受参数:

    @PostMapping("/uploadFile")

    @ResponseBody

    publicReturnMessage upload(@RequestParam("file") MultipartFile[] file, HttpServletRequest request) {

    String BUSINESS_ID = request.getParameter("BUSINESS_ID");

    String FLOW_ID = request.getParameter("FLOW_ID");

    String FLOW_NODE_ID = request.getParameter("FLOW_NODE_ID");

    ReturnMessage returnMessage = newReturnMessage("0", "文件上传成功");

    StringBuffer str = newStringBuffer();

    for(MultipartFile files : file) {

    if(files.isEmpty()) {

    return null;

    }

    String fileName = files.getOriginalFilename();

    logger.info("上传文件,文件名:"+ fileName + ",文件大小:"+ files.getSize());

    File dest = newFile(filePath+ fileName);

    try{

    files.transferTo(dest);

    str.append("文件"+ fileName + "上传成功");

    String id = UUID.randomUUID().toString().replaceAll("-", "");

    String serverid = UUID.randomUUID().toString().replaceAll("-", "") + files.getContentType();

    String itemID = request.getAttribute("item_id").toString();

    Date uploadTime = newjava.sql.Date(System.currentTimeMillis());

    String flowNodeID = request.getAttribute("flow_node_id").toString();

    String user_id = request.getAttribute("user_id").toString();

    String user_name = request.getAttribute("user_name").toString();

    GuarItemFile guarItemFile = newGuarItemFile(id, "1", itemID, "项目附件", fileName, "", serverid, serverid + FileUtil.getExtensionName(fileName), uploadTime, flowNodeID, FileUtil.getExtensionName(fileName), user_id, user_name);

    guarItemFileService.addGuarItemFile(guarItemFile);

    logger.info("文件"+ fileName + "上传成功");

    } catch(IOException e) {

    str.append("文件"+ fileName + "上传失败");

    logger.info(e.getMessage());

    //LOGGER.error(e.toString(), e);}

    returnMessage.setMsg(str.toString());

    }

    returnreturnMessage;

    }

    展开全文
  • 背景 根据user.is_admin 不同自定义身份和相应操作, 功能如下 solution

    背景

    根据user.is_admin 不同自定义身份和相应操作,
    功能如下
    在这里插入图片描述

    solution

    <script type="text/html" id="barDemo">
        {{"{{# if (d.is_admin=== 0) { }}"}}
        <a class="layui-btn layui-btn-xs" lay-event="edit">升级权限</a>
        {{"{{# } else { }}"}}
        <a class="layui-btn layui-btn-xs" lay-event="edit">降低权限</a>
        {{"{{# } }}"}}
    </script>
    
    
    <script>
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,url:"/user/list"
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                ,cols: [[
                    {field:'id', title: 'ID', sort: true}
                    ,{field:'name', title: '名称'} //width 支持:数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度,layui 2.2.1 新增
                    ,{field:'create_time', title: '创建时间', sort: true}
                    ,{field:'update_time', title: '最近登录', sort: true}
                    ,{field: "is_admin", title: '身份', sort: true,
                        templet:function (d) {
                            if (d.is_admin==1){
                                return "管理员"
                            }else {
                                return "普通用户"
                            }
    
                        }
                    }
    
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150
    
                }
                ]]
                ,page: true
            });
            ```
    
    展开全文
  • 描述的不是很清楚,放效果图,就明白了,上图放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要...序号文件名状态导入数据条数导入时间操作账号//js代码func...

    需求描述:点击表格中的数据,弹出一张具体信息表。描述的不是很清楚,放效果图,就明白了,上图

    放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要展示的信息。很明白吧!ha٩(๑>◡

    代码:

    //html代码

    #impTable{

    display: none;

    }

    id="tableImp">

    序号文件名状态导入数据条数导入时间操作账号

    //js代码function impNum(examId) {

    var impTable = $('#impTable')

    var url = rootPath + '/vraxx/batch/findDetail';

    var data = CommnUtil.ajax(url, {

    examId: examId

    }, "json");

    if (data!=''&& data!=null ){

    for (var i = 0; i < data.length; i++) {

    var tv = "

    " +

    '

    '+i+1+'' +

    '

    ' + data[i].fileName + '' +

    '

    ' + data[i].tempStatus + '' +

    '

    ' + data[i].num + ' ' +

    '

    ' + data[i].createDate + '' +

    '

    ' + data[i].createName + '' +

    '

    '

    $('#tableImp tbody').append(tv);

    }

    var index= layer.open({

    type:1,

    title:'XX详情',

    btn: ['返回'],

    area: ['50%', '50%'],

    content: impTable,

    end:function () {

    layer.close(index);

    var prevDataPath = $("#topli li:last-child").prev();

    var prevDataPathVal = $(prevDataPath).attr("data-path");

    loadListView("AAAA", "BBBB", "0", "", prevDataPathVal);

    }

    });

    } else{

    layer.msg("未导入");

    }

    }

    总结:要注意的两点在html中编辑好弹出层的展示内容impTable   ajax数据返回回来的时候拼接到table的body

    展开全文
  • layui自定义tab主页简单操作

    千次阅读 2018-07-23 18:46:44
    一:layui资源,官网下载引入 二:直接上代码,我写的只为入门观看啊,大神就别批了,有些样式我直接改了,样式其实并不是什么大问题 .layui-layout-admin .layui-footer{height: 0px;} .layui-layout-admin ....

    一:layui资源,官网下载引入

    二:直接上代码,我写的只为入门观看啊,大神就别批了,有些样式我直接改了,样式其实并不是什么大问题

    .layui-layout-admin .layui-footer{height: 0px;}

    .layui-layout-admin .layui-body{bottom: 0px;}

    这两个样式是把那个底部固定栏给弄掉的,如果不弄掉也可以去除,代码很简单,很容易看懂的

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>layui后台框架整理+tab页动态操作</title>
        <link rel="stylesheet" href="source/layui/css/layui.css">
        <style>
            .zduu-darkblue {
                background-color: rgba(10, 162, 27, 0.57);
            }
    
            .zduu-darkblue li {
                background-color: rgba(10, 162, 27, 0.57);
            }
    
            .layui-nav-tree .layui-nav-item a {
                color: white;
            }
    
            .wh100 {
                width: 100%;
                height: 100%;
            }
    
            .layui-body {
                overflow: visible;
            }
    
            .layui-tab-title li.layui-this {
                font-weight: 700;
                background-color: #93D1FF;
                color: white;
            }
    
            .layui-tab {
                margin: 0px;
            }
    
            .tab-active {
            }
    
            .tab-close {
                position: absolute;
                right: 2px;
                top: -8px;
                display: inline;
                opacity: 0.2;
            }
    
            .tab-close:hover {
                opacity: 1;
            }
    
            .layui-icon {
                font-size: 10px;
            }
    
            .layui-tab-title li {
                min-width: 50px;
            }
    
            .layui-layout-admin .layui-footer{height: 0px;}
            .layui-layout-admin .layui-body{bottom: 0px;}
        </style>
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">layui框架整理</div>
            <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 zduu-darkblue">
            <div class="layui-side-scroll">
                <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:;" class="tab-active" lay-id="1" lay-url="pages/main.jsp"
                                   title="一">一</a></dd>
                            <dd><a href="javascript:;" class="tab-active" lay-id="2" lay-url="pages/main.jsp"
                                   title="二">二</a></dd>
                            <dd><a href="javascript:;" class="tab-active" lay-id="3" lay-url="pages/main.jsp"
                                   title="三">三</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" class="tab-active" lay-id="4" lay-url="pages/main.jsp"
                           title="四">四</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" class="tab-active" lay-id="5" lay-url="pages/main.jsp"
                           title="五">五</a></li>
                </ul>
            </div>
        </div>
    
        <div class="layui-body">
            <div style="">
                <div class="layui-tab" lay-filter="tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="0">主页</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <iframe src="index.jsp" frameborder="0" class="wh100"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="source/layui/layui.all.js"></script>
    <script>
        var $ = layui.$, element = layui.element;
        var method = {
            tabAdd: function (url, name, id) {
                element.tabAdd('tab', {
                    title: name + '<a href="javascript:;" class="tab-close"><i class="layui-icon layui-icon-close"></i></a>',
                    content: '<iframe class="wh100" frameborder="0" src="' + url + '"></iframe>',
                    id: id
                });
                //为关闭按钮绑定事件
                $('.tab-close').click(function () {
                    method.tabDelete($(this).parent('li').attr('lay-id'));
                });
                //新增tab后,改变选中tab
                method.tabChange(id);
            },
            tabChange: function (id) {
                element.tabChange('tab', id); // 'tab'为layui-tab所在div的lay-fiilter
            },
            tabDelete: function (id) {
                element.tabDelete('tab', id); // 'tab'为layui-tab所在div的lay-fiilter
            }
        }
        //绑定点击事件
        $('.tab-active').click(function () {
            //获取属性值
            var id = $(this).attr('lay-id'), name = $(this).attr('title'), url = $(this).attr('lay-url');
            console.log(id + "--" + name + "--" + url);
            //    判断是否已打开
            if (checkTab(id)) {
                method.tabChange(id);
            } else {
                method.tabAdd(url, name, id);
            }
        })
    
        function checkTab(id) {
            var lis = $('.layui-tab-title li:gt(0)'), //获取到除主页的tab
                open = false; //用于判断是否已打开
            layui.each(lis, function (index, li) {
                if ($(li).attr('lay-id') == id) {//说明已打开
                    open = true;  //此处不能直接return
                }
            })
            return open;
        }
    </script>
    </body>
    </html>
    展开全文
  • 一,layui自定义模块: 二,在需要使用这个自定义模块的页面,写入口文件,加载自定义模块: =》这样index.jsp页面通过加载index.js加载了自定义的home模块。 ps:index.jsp页面其实可以不需要加载inde....
  • layui的图标取自于阿里巴巴的矢量图标库 Iconfont第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账号。第...
  • table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题。今天来谈谈table sort的那点事。预告一下...
  • 项目中页面很多下拉框,都是...故使用layui自定义模块实现统一操作。 先看下效果: 项目情况 因为我项目使用的springboot+tymeleaf+layuilayui扩展用了layuimini. 直接上代码 项目结构如下: 1.新建dict...
  • 在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)...
  • count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":5,"count":5}]},"card":[{"des":"Quick BI 是一款专为云上用户和企业量身打造的新一代自助式智能BI服务平台,其简单易用的可视化操作和灵活...
  • layui得到select值的方法:...本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌电脑。推荐:《javascript基础教程》《layUI教程》layui得到select下拉框选中的值:引用layui插件,取得下拉框的值模板...
  • Layui tree定制化(自定义增删改操作、选中变色)一、自定义增删改操作Layui tree自带的增删改操作,太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。1.添加自定义属性customOperate,需要修改源码。...
  • Layui数据表格之自定义模板

    千次阅读 2019-06-09 08:24:51
    开发工具与关键技术:VS、layui...数据表格模块作为一个大模块,它里面自然少不了各个大大小小的模板,自定义模板作为数据表格模块的成员之一,它的作用是对表格进行个性化操作。以达到自己所需要的效果。这里我通过...
  • 列表横向滚动也能自适应根据截图操作,首页有联系方式 第一步: image.png 添加图标并绑定事件 第二步: image.png 使用监听行工具事件拿到obj里面的tr对象 第三步: image.png 根据当前this对象...
  • layui导出Excel表格自定义文件名称

    千次阅读 2020-07-07 13:52:46
    预备操作 1.找到 /layui/lay/modules/table.js文件 2.搜索exportFile,找到d.exportFile=function(e,t,i) 修改为 d.exportFile=function(e,t,i,name) 3.搜索table_,找到s.download=(l.title||“table_”+(l.index||"...
  • 今天遇到的情况是,在表格中需要针对指定的产品进行缩略图片的替换操作 那么,我需要根据所赋值不同索引信息的 class进行数据获取与修改 在此,进行整理(截图展示),希望能帮到有需求的道友吧
  • 基于layui-tree源码,自定义了多选择节点方法/**@Name:layui.tree 树组件@Author:贤心@License:MIT*/layui.define('jquery', function(exports){"use strict";var $ = layui.$,hint = layui.hint();var enterSkin...
  • 但是一般配置出来的按钮都是点击去执行一个指定操作没有后续,如何自己定义一个像导出那样的工具按钮呢,点击之后弹出对应的操作选择,选择一个后再进行对应的操作,下面直接上代码。table.init('demo',{limit:50,...
  • 页面一段时间未操作,跳转到登录页面 若页面token为空时,跳转到登录页面 过程: 其他页面的js引用: //这个文件是必要的 <script src="../layui/layui.js" charset="utf-8"></script> // 引入...
  • 做过Shopify的卖家知道,Shopify里面的主题就像一个框架,你可在这个框架内填写...如果你既想保留80%页面宽,又想拥有100%的页面,又怎么操作呢?我们可以通过更改主题的代码来达到这样的目的;更改好之后,可以通过...
  • layui 数据表格 图片 操作按钮 图片 分页 接口 参数
  • image.png列表横向滚动也能自适应根据截图操作,首页有联系方式第一步:image.png添加图标并绑定事件第二步:image.png使用监听行工具事件拿到obj里面的tr对象第三步:image.png根据当前this对象给父级tr加一个统计...
  • 若要将指定列的数据改为某个值,将时间日期格式化,int值类型展示中文值等操作 1、使用 templet属性,将该行数据,进行格式化操作即可。 例如:这里将日期数据格式化,返回一个string类型数据即可 cols: [[ {field...
  • 具体开发中遇到的问题如下,数据表格的重新渲染或重新加载会导致当前操作的分页 或 配置被清空。我正在操作第5页,重新渲染后就回到了最原始第1页。需要达到的效果是:不调用接口,仅仅只是从table.cache["表ID"] ...
  • layui的table默认表头工具栏右边有3个操作,分别是过滤字段、导出excel、打印功能。在js中代码添加toolbar即可实现上面的效果:table.render({elem:'#demo',height:420,url:'/demo/table/user/' /...
  • layui的tree组件可以开启节点操作(添加、编辑、删除),用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互,这样一个添加操作要走两...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 154
精华内容 61
关键字:

layui操作自定义