一、layui表格渲染

  如果后台返回的实力类里面包含另一个实体类,那么需要使用如下方式取出相应的值

var tableResult = table.render({
elem: '#' + Server.tableId,
url: Feng.ctxPath + '/server/page',
page: true,
height: "full-158",
cellMinWidth: 100,
cols: Server.initColumn()
}); /**
* 初始化表格的列 这里需要使用templet自定义
*/
Server.initColumn = function () {
return [[
{type: 'checkbox'},
{field: 'id', sort: true, title: '编号'},
{field: 'projectId',hide:true, sort: true, title: '项目id'},
{field: 'project', sort: true, title: '所属项目',templet: function(data){
return data.project.projectName;
}},
{align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 200}
]];
};

二、layui动态渲染select

  如果需要显示默认的请选择需要在原始的select标签里面添加一个value=“” 的option  同时改option可以使select的 lay-verify="required" 必填属性生效

1.html部分

<select id="projectId" lay-verify="required" lay-filter="projectId" lay-search>
<option value="">请选择</option>
</select>

2.js部分

//加载项目
$.ajax({
type: 'POST',
url: Feng.ctxPath + "/problem/loadProject",
async:false,
success: function(res) {
var result = res;
if(null != result && ""!=result){
for(var i = 0; i < result.length; i++) {
$('#projectId').append(new Option(result[i].projectName, result[i].id)); }
}
}
});
//动态加载后需要重新渲染
form.render();

  

三、layui文件上传

1.html

<button type="button" class="layui-btn" id="upload">
<i class="layui-icon"></i>上传文件/图片
</button>

2.js

  layui 的多文件上传是不断的调用上传方法直至所有文件上传完毕

          var i=0;//上传成功个数
          var fileIdStr = "";//用来记录每次上传 之后方法的返回值


          upload.render({
elem: this,
url: Feng.ctxPath + '/form/form_view/upload',
method: 'POST',//调用方式
accept: 'file',
size: 51200,//上传文件大小限制(KB)实际使用过程中未生效
auto: true,//是否选中后自动上传
multiple: true,//是否允许多文件上传
drag: true,//是否允许拖拽上传
number: 5,//上传数量限制 实际使用过程中未生效
before: function(obj) { //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
layer.load(); //上传loading
                   //这里的data可以添加上传时额外的参数
//this.data={'storeId': storeId,'storeName':storeName};
},
choose: function(obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
obj.preview(function(index, file, result){
console.log("index"+index); //得到文件索引
console.log(file); //得到文件对象
console.log(result); //得到文件base64编码,比如图片
}); },
done: function(res, index, upload) {
if(res.code == 0) { //上传成功
i++;
fileIdStr += res.fileId + ",";
}
//this.error(index, upload);
//layer.closeAll('loading'); //关闭loading
},
allDone: function(obj){ //当文件全部被提交后,才触发
  console.log(obj.total); //得到总文件数
  console.log(obj.successful); //请求成功的文件数
  console.log(obj.aborted); //请求失败的文件数
  if(obj.total==i){
fileIdStr = fileIdStr.substr(0,fileIdStr.length-1);
$("input[name = '"+that.id+"']").val(fileIdStr);
layer.closeAll('loading');
Feng.success("全部上传成功!");
i = 0;
fileIdStr = "";
  }
  },
error: function(index, upload) {
Feng.error("上传失败!");
layer.closeAll('loading'); //关闭loading
}
});

3.java

 @BussinessLog(value = "上传文件")
@RequestMapping("/form_view/upload")
@ResponseBody
public Map<String,Object> upload( HttpServletRequest request) throws Exception{
Map<String,Object> resultMap=new HashMap<String, Object>();//返回值
Map<String,Object> Map=new HashMap<String, Object>();//与resultMap一起组成标准的layui上传文件返回参数 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;//获取前台传来的数据
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();//文件集合 //上传文件路径 该路径与工具上传路径 获取方式相同均在项目启动设置文件中进行设置
String path=finalDirPath+"/upload";
// 检查目录
File uploadDir = new File(path);
if (!uploadDir.isDirectory()) {
// 如果不存在,创建文件夹
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
} for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {//循环文件集合
SimpleDateFormat df2 = new SimpleDateFormat("yyyyMMddHHmmss");
String date=df2.format(new Date());
MultipartFile file=entity.getValue();
String filename=file.getOriginalFilename(); File filepath=new File(path,filename);
//判断路径是否存在,如果不存在就创建一个
if(!filepath.getParentFile().exists()){
filepath.getParentFile().mkdirs();
}
//重命名文件并保存
//原名
String fileStart = filename.substring(0,filename.lastIndexOf("."));
// 扩展名
String fileExt = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();//扩展名
Date date2=df2.parse(date);
//新的文件名
String newFileName=fileStart+"_"+date+"_"+new Random().nextInt(100)+"."+fileExt;
//将文件信息保存至 数据库
SysFileInfo sysFileInfo = new SysFileInfo();
sysFileInfo.setFileData(path+"/"+newFileName); sysFileInfoService.save(sysFileInfo); //将上传的文件保存到目标文件中
file.transferTo(new File(path+File.separator+newFileName));
        //标准的layui返回格式
resultMap.put("code",0);
resultMap.put("msg","success");
resultMap.put("fileId",sysFileInfo.getFileId());
Map.put("src",path);
resultMap.put("data",Map);
}
return resultMap;
}

  

  

  

layui使用记录的更多相关文章

  1. layui常见问题记录

    1.用js选中checkbox,没有效果 解决方式:加入 form.render(); 重新渲染表单 $(this).prop('checked', true); //在新版本的jquery中,如果是 ...

  2. layui 数据表格+分页+搜索+checkbox+缓存选中项数据

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...

  3. layui table 跨页记忆选择

    layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...

  4. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

  5. Layui引起的对前端的一次记录

    前言 首先会做这次记录,也是因为自己也是第一次去接触这个框架,以前总是听说,并没有去用过.这次出于实习的原因,去学习了一下Layui这个"面向后端开发者的框架".其次,此篇记录仅供 ...

  6. layui记录

    layui 官网 layui 独立版 layui mobile layui 社区

  7. layui框架学习记录

    自定义layui动态渲染的数据表格单元格样式 layui.use('table', function() { var table = layui.table; table.render({ elem: ...

  8. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  9. layui 单选框、复选框、下拉菜单 不显示问题 记录

    1. 如果是 ajax嵌套了 页面, 请确保  只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...

随机推荐

  1. February 4th, 2018 Week 6th Sunday

    Hope clouds observation. 心怀希望会蒙蔽双眼,影响判断. Almost every of us thinks we would be the master of our liv ...

  2. Instruments模板介绍(更新中...)

    第一章.Instruments(仪器)快速入门 Instruments可以用来收集关于一个或者多个系统进程的性能和行为的数据,并跟踪睡着时间产生的数据.它提供了好几个分析模板: Blank 任何类型都 ...

  3. LCA树链剖分

    LCA(Lowest Common Ancestor 最近公共祖先)定义如下:在一棵树中两个节点的LCA为这两个节点所有的公共祖先中深度最大的节点. 比如这棵树 结点5和6的LCA是2,12和7的LC ...

  4. linux 报错Mysql.pid 文件不存在导致service Mysqld start 失败

    Mysql.pid 文件不存在导致service Mysqld start 失败 1.  到提示报错的mysql.pid 不存在的目录下  使用 touch 命令创建mysql.pid文件.    t ...

  5. (一) 天猫精灵接入Home Assistant- hass对接天猫精灵

    1如何利用论坛的认证服务器对接天猫精灵 说起天猫精灵的接入,最早是由c1pher(25989406)大神通过开发自定义技能接入,后面qebabe大神进行了改进,可以直接通过HASS API读取hass ...

  6. centos 7部署openvpn easy-rsa 3.0部署方法

    yum install openvpn easy-rsa openssl-devel mkdir -p /etc/openvpn/easy-rsa/cp -p /usr/share/doc/easy- ...

  7. (转)Docker磁盘垃圾清理

    文章转自https://mp.weixin.qq.com/s/S8ZjGZF8oLC8c1JRnkE5yw?tdsourcetag=s_pctim_aiomsg 1.整体分析 对于Docker来说,存 ...

  8. 谈谈maven多模块

    记得在校的时候,通常用的比较多是动态web工程,动态web工程导入最多就是jar包,这些jar包需要自己手动复制粘贴放入lib目录下,然后build path,有的IDE会自动build path有的 ...

  9. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  10. PAT A1033 To Fill or Not to Fill (25 分)——贪心

    With highways available, driving a car from Hangzhou to any other city is easy. But since the tank c ...