layui使用记录

佚名 7年前 (2019-04-16) 随笔 1269人围观抢沙发百度已收录

一、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}
        ]];
    };

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

二、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;
    }