一、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部分
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
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 upload( HttpServletRequest request) throws Exception{
Map resultMap=new HashMap();//返回值
Map Map=new HashMap();//与resultMap一起组成标准的layui上传文件返回参数
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;//获取前台传来的数据
Map fileMap = multipartRequest.getFileMap();//文件集合
//上传文件路径 该路径与工具上传路径 获取方式相同均在项目启动设置文件中进行设置
String path=finalDirPath+"/upload";
// 检查目录
File uploadDir = new File(path);
if (!uploadDir.isDirectory()) {
// 如果不存在，创建文件夹
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
}
for (Map.Entry 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;
}