-
layui 自定义request_Layui上传自定义参数
2020-12-23 13:08:51html:选择多文件文件名大小状态操作开始上传在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;
}
-
golang layui toolbar 自定义
2019-08-26 12:09:50背景 根据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 }); ```
-
layui表格弹窗修改_layUI 实现自定义弹窗
2021-01-14 16:32:39描述的不是很清楚,放效果图,就明白了,上图放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要...序号文件名状态导入数据条数导入时间操作账号//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——使用自定义模块
2019-10-09 10:56:29一,layui中自定义模块: 二,在需要使用这个自定义模块的页面,写入口文件,加载自定义模块: =》这样index.jsp页面通过加载index.js加载了自定义的home模块。 ps:index.jsp页面其实可以不需要加载inde.... -
layui 表格字体_layui自定义字体图标图文教程
2021-02-06 23:34:31layui的图标取自于阿里巴巴的矢量图标库 Iconfont第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账号。第... -
layui 自定义排序_浅谈layui中table的sort排序
2021-01-13 18:51:21table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题。今天来谈谈table sort的那点事。预告一下... -
layui自定义模块实现下拉框,读取数据字典数据
2020-04-29 17:23:56项目中页面很多下拉框,都是...故使用layui自定义模块实现统一操作。 先看下效果: 项目情况 因为我项目使用的springboot+tymeleaf+layui,layui扩展用了layuimini. 直接上代码 项目结构如下: 1.新建dict... -
layui数据表格自定义复选框表头_layui表格checkbox选择全选样式及功能的实例
2020-12-22 16:29:39在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)... -
layui数据表格自定义复选框表头_解决LayUI数据表格复选框不居中显示的问题
2021-01-13 14:03:27count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":5,"count":5}]},"card":[{"des":"Quick BI 是一款专为云上用户和企业量身打造的新一代自助式智能BI服务平台,其简单易用的可视化操作和灵活... -
layui下拉框怎么获取自定义值_layui如何得到select值
2021-02-01 07:55:54layui得到select值的方法:...本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌电脑。推荐:《javascript基础教程》《layUI教程》layui得到select下拉框选中的值:引用layui插件,取得下拉框的值模板... -
layui tree 动态选中_Layui tree定制化(自定义增删改操作、选中变色)
2020-12-31 12:17:16Layui tree定制化(自定义增删改操作、选中变色)一、自定义增删改操作Layui tree自带的增删改操作,太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。1.添加自定义属性customOperate,需要修改源码。... -
Layui数据表格之自定义模板
2019-06-09 08:24:51开发工具与关键技术:VS、layui...数据表格模块作为一个大模块,它里面自然少不了各个大大小小的模板,自定义模板作为数据表格模块的成员之一,它的作用是对表格进行个性化操作。以达到自己所需要的效果。这里我通过... -
layui table 表格折叠自定义
2019-03-14 16:43:23列表横向滚动也能自适应根据截图操作,首页有联系方式 第一步: 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||"... -
layui 图片上传控件 自定义基础参数的获取
2019-07-11 15:27:54今天遇到的情况是,在表格中需要针对指定的产品进行缩略图片的替换操作 那么,我需要根据所赋值不同索引信息的 class进行数据获取与修改 在此,进行整理(截图展示),希望能帮到有需求的道友吧 -
怎么更换layui树级组件图标_layui-tree树插件,自定义多选操作
2020-12-20 11:13:56基于layui-tree源码,自定义了多选择节点方法/**@Name:layui.tree 树组件@Author:贤心@License:MIT*/layui.define('jquery', function(exports){"use strict";var $ = layui.$,hint = layui.hint();var enterSkin... -
layui table工具栏点击时间_layui table工具栏自定义【原创】
2021-01-27 04:25:26但是一般配置出来的按钮都是点击去执行一个指定操作没有后续,如何自己定义一个像导出那样的工具按钮呢,点击之后弹出对应的操作选择,选择一个后再进行对应的操作,下面直接上代码。table.init('demo',{limit:50,... -
Layui(六) 自定义——页面过期时间和token过期检测
2020-01-14 10:30:41页面一段时间未操作,跳转到登录页面 若页面token为空时,跳转到登录页面 过程: 其他页面的js引用: //这个文件是必要的 <script src="../layui/layui.js" charset="utf-8"></script> // 引入... -
layui下拉框怎么获取自定义值_手把手教你让Shopify主题拥有多个自定义模板
2020-12-24 21:36:21做过Shopify的卖家知道,Shopify里面的主题就像一个框架,你可在这个框架内填写...如果你既想保留80%页面宽,又想拥有100%的页面,又怎么操作呢?我们可以通过更改主题的代码来达到这样的目的;更改好之后,可以通过... -
LayUI数据表格 表单参数、可编辑自定义单元格、图片、操作
2020-08-07 16:23:28layui 数据表格 图片 操作按钮 图片 分页 接口 参数 -
layui按钮展开、_layui table 表格折叠自定义(这个思路可以适用所有table组件)...
2020-12-29 04:50:35image.png列表横向滚动也能自适应根据截图操作,首页有联系方式第一步:image.png添加图标并绑定事件第二步:image.png使用监听行工具事件拿到obj里面的tr对象第三步:image.png根据当前this对象给父级tr加一个统计... -
layui数据列表数据显示自定义格式。
2019-10-11 11:01:11若要将指定列的数据改为某个值,将时间日期格式化,int值类型展示中文值等操作 1、使用 templet属性,将该行数据,进行格式化操作即可。 例如:这里将日期数据格式化,返回一个string类型数据即可 cols: [[ {field... -
layui循环数据并渲染_Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据)...
2021-01-14 17:16:01具体开发中遇到的问题如下,数据表格的重新渲染或重新加载会导致当前操作的分页 或 配置被清空。我正在操作第5页,重新渲染后就回到了最原始第1页。需要达到的效果是:不调用接口,仅仅只是从table.cache["表ID"] ... -
layui table工具栏点击时间_layui中的table中toolbar自定义过程
2020-12-19 11:49:01layui的table默认表头工具栏右边有3个操作,分别是过滤字段、导出excel、打印功能。在js中代码添加toolbar即可实现上面的效果:table.render({elem:'#demo',height:420,url:'/demo/table/user/' /... -
改造layui-树(tree)组件支持添加、编辑、删除的自定义(弹框)操作
2019-08-20 10:51:15layui的tree组件可以开启节点操作(添加、编辑、删除),用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互,这样一个添加操作要走两...
-
Docker从入门到精通
-
产品团队管理经验一枚
-
100分钟定时关机,10分钟提醒程序
-
LoadRunner设置检查点的几种方法介绍
-
Lambda 函数式接口Predicate(基础)(练习)
-
产品团队管理经验一枚
-
基于线性光放大器的全光逻辑异或门理论分析
-
榕树网络的互连矩阵与模拟研究
-
02-27 windows下MySQL安装流程
-
数据库设计StepbyStep
-
基于电商业务的全链路数据中台落地方案(全渠道、全环节、全流程)
-
猫眼谐振腔在全外腔长氦氖激光器中的应用
-
MySQL 多实例安装 及配置主从复制实验环境
-
PPT大神之路高清教程
-
ubuntu下的apt-get内网本地源的搭建
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)
-
【硬核】一线Python程序员实战经验分享(1)
-
基于python的dango框架购物商城毕业设计毕设源代码使用教程
-
碳中和目标下A股先锋调研:钢铁行业加速碳达峰 多行业影响已现