layUi Table+文件上传 示例 与问题记录

文件上传：

 

//表头
        var cols = [ //表头
            {type: 'numbers', title: 'XXX', align: "center"}
            , {field: 'XXX', title: 'XXX', sort: true, align: "center"}
            , {field: 'XXX', title: 'XXX', sort: true, align: "center"}
            , {field: 'XXX', title: 'XXX', sort: true, align: "center"}
            , { field: 'XXX', title: 'XXX', sort: true, align: "center",templet: function (d) {
                    return d.XXX== null ? '' : '****';
                }
            }
            , {field:'caozuo', title: '操作',totalRow:true, width: 260, align: "center",templet:function (res) {
            	return colShow_DATA_Do(res);
               }
            }
        ];
        
        var height = $(window).height(), width = $(window).width();
        //执行一个 table 实例
        doTableInit(table, '#demo', height - 20, '/XXX/XXX', '#toolbarDemo', false, [], cols, "XXXTable", true);



function doTableInit(table, tableId, height, url, toolbar, totalRowFlag, defaultToolbar, cols, id, pageFlag){
		table.render({
		    elem: tableId
		    ,height: height
		    ,url: url //数据接口
		    ,toolbar: toolbar
		    ,totalRow: totalRowFlag //开启合计行
		    ,defaultToolbar: defaultToolbar
		  	,cellMinWidth: 60 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [cols]
		  	,id: id
		  	,page: pageFlag //开启分页
		  	,limit:20
		  });
	}


function colShow_DATA_Do(data) {
        var result = "";
        result+= '删除';
        return result;
    }

文件上传初始化

upload.render({
            elem: '#uploadXXX'
            ,url: '/XXX/XXX'
            ,accept: 'file'
            ,method: 'post'  //可选项。HTTP类型，默认post
         	  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
         		    layer.load(); //上传loading
         	  }
            ,done: function(res){
          	  layer.closeAll('loading'); //关闭loading
          	  layer.msg(res.msg); 
          	  //table.reload('XXXTable');
          	  tableDoReload();
            }
          });

在上传完成之后，调用table.reload('XXXTable');方法后，点击上传按钮没有反应...

测试发现是经过reload后这个上传按钮没有加载对于的js

修改：

将table.reload('XXXTable');用tableDoReload();代替

function tableDoReload(){
	   table.reload('XXXTable');
	   upload.render({
           elem: '#uploadXXX'
           ,url: '/XXX/XXX'
           ,accept: 'file'
           ,method: 'post'  //可选项。HTTP类型，默认post
        	  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
        		    layer.load(); //上传loading
        	  }
           ,done: function(res){
         	  layer.closeAll('loading'); //关闭loading
         	  layer.msg(res.msg); 
         	  table.reload('XXXTable');
           }
         });
   }

（每次reload后都重新调用一下upload.render方法）

 

public void uploadExcel() {
		 UploadFile uploadFile= getFile();
		 String fileName=uploadFile.getOriginalFileName();
		 File file=uploadFile.getFile(); 
		 ExcelReader reader = ExcelUtil.getReader(file);
		 List> readAll = reader.readAll();
		 Map result = serverService.doUploadServerAdd(readAll);
		 .
		 .
		 .
}
	 

后台使用的是jfinal,
readAll使用的是hutool工具包 cn.hutool.poi.excel.ExcelReader.readAll()
后台获取到上传文件并用工具包中的readAll()获取到文件内容然后对文件内容进行操作