layui使用记录
一、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部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //加载项目 $.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
1 2 3 | < button type="button" class="layui-btn" id="upload"> < i class="layui-icon"></ i >上传文件/图片 </ button > |
2.js
layui 的多文件上传是不断的调用上传方法直至所有文件上传完毕
var i=0;//上传成功个数
var fileIdStr = "";//用来记录每次上传 之后方法的返回值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <br><br> 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<br> //这里的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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @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; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版