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

  

  

  

 

posted @   清风随心  阅读(1916)  评论(1编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示