layui表格分页以及菜单使用

layui表格分页以及菜单使用

本人是第一次写博客,写的不好不要喷我

1.首先引入layui对应的css和js文件

<link rel="stylesheet" th:href="@{/webjars/layui/2.4.5/css/layui.css}"  media="all">
<script type="text/javascript" th:src="@{/webjars/layui/2.4.5/layui.js}"></script>

2.第二部就把表格简历出来和响应的菜单建立出来

<table class="layui-table" id="filetab"  lay-filter="filetab">   </table>
<!--这里的菜单使用layui的模版简历的-->
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
	<!--这里绑定的事件对应js中的switch case 中的选项-->
		<button class="layui-btn layui-btn-sm" lay-event="copyFile">复制</button>
		<button class="layui-btn layui-btn-sm" lay-event="cutFile">剪切</button>
		<button class="layui-btn layui-btn-sm" lay-event="delFile">删除</button>
	</div>		
</script>

3.开始写我们的js,我下面的代码大部分都有注释,大家应该可以看懂吧

// 文件表格
layui.use('table', function() {

	var table = layui.table;

	table.render({
		//表格的id
		elem : '#filetab',
		url : 'queryFile',
		//开启工具栏
		toolbar : '#toolbarDemo',
		response : {
			//后台返回的数据名字
			dataName : 'data',
			//返回的总数
			countName : 'total'
		},
		//下面就是查询出来的数据的列名相对应
		cols : [ [ {
			type : 'checkbox',
			fixed : 'left'
		}, {
			field : 'fileName',
			width : 300,
			title : '文件名',
			sort : true
		}, {
			field : 'fileTime',
			width : 275,
			title : '测试时间'
		} ] ],
		page : true,//开启分页
		limit : '10',//默认页码
		limits : [ 10, 20, 30 ]//选择页码列表
	});
	// 头工具栏事件
	table.on('toolbar(filetab)', function(obj) {
		var checkStatus = table.checkStatus(obj.config.id); // 获取选中行状态
		switch (obj.event) {
		// 复制
		case 'copyFile':
			var trObjs = checkStatus.data; // 获取选中行数据
				//对选择数据进行校验
			if (trObjs.length != 0) {
				$.each(trObjs, function(index, obj) {
					$.get("copyFile", {
						filePath : $('#path').text(),
						fileName : JSON.stringify(obj.fileName)
								.replace(/\"/g, "")
					}, function(data) {
						if (data.flag == true) {
							layer.msg('复制成功!文件已经为您复制到桌面');
						}
					}, 'json');
				});
			} else {
				layer.msg('请至少选择一行数据');
			}
			break;
		// 剪切
		case 'cutFile':
			var trObjs = checkStatus.data; // 获取选中行数据
			console.log(trObjs);
				//对选择数据进行校验
			if (trObjs.length != 0) {
				layui.each(trObjs, function(index, obj) {

					$.get("cutFile", {
						filePath : $('#path').text(),
						fileName : JSON.stringify(obj.fileName).replace(/\"/g,
								"")
					}, function(data) {
						if (data.flag == true) {
							layer.msg('剪切成功!文件已经为您剪切到桌面');
							parent.layui.table.reload('filetab');
						}
					}, 'json');
				});
			} else {
				layer.msg('请至少选择一行数据');
			}
			break;
		case 'delFile':
			var trObjs = checkStatus.data; // 获取选中行数据
			console.log(trObjs);
			//对选择数据进行校验
			if (trObjs.length != 0) {
				layer.confirm('确定要删除数据吗', {
					btn : [ '确定', '取消' ]
				// 按钮
				}, function() {
					layui.each(trObjs, function(index, obj) {
						$.get("delFile", {
							filePath : $('#path').text(),
							fileName : JSON.stringify(obj.fileName).replace(/\"/g, "")
						}, function(data) {
							if (data.flag == true) {
								layer.msg('删除成功!!!');
								parent.layui.table.reload('filetab');
							}
						}, 'json');
					});
				}, function() {

				});
			} else {
				layer.msg('请至少选择一行数据');
			}
			break;
		}
		;
	});
});

有一个重点就是layui表格开启分页的两个默认参数page(页码数),limit(一页的容量)

4.后台数据的处理
这里我是查的D:\test文件夹下的文件
下面我主要从查找文件说
1).Controller层

@GetMapping("/queryFile")
	public Map<String, Object> queryFile(Integer page,Integer limit) {
		List<Map<String,Object>> files = dataUploadService.getFiles("D:\\test",page,limit);
		int fileCount = dataUploadService.findFileCount("D:\\test");
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("code", 0); //默认返回的code是0,所以必须要写
		map.put("msg", "");
		map.put("data", files);
		map.put("total", fileCount);
		return map;
	}

2).Service层

/**
	 * 查找文件夹下的文件
	 */
	public List<Map<String, Object>> getFiles(String path,Integer page,Integer limit) {
		List<Map<String, Object>> files = new ArrayList<Map<String, Object>>();
		File file = new File(path);
		if(file.exists()) {
			try {
				file.createNewFile();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		File[] tempList = file.listFiles();
		Map<String, Object> fileMap = null;
		for (int i = 0; i < tempList.length; i++) {
			if (tempList[i].isFile()) {
				fileMap = new HashMap<String, Object>();
				//tempList[i].toString()----全路径      (tempList[i].toString()).substring(8)----获得文件名称
				fileMap.put("fileName", (tempList[i].toString()).substring(8));
				// 操作文件的时间根据文件的名截取
				fileMap.put("fileTime", tempList[i].toString().substring(14, 24));
			}
			files.add(fileMap);
		}
		int pageNo=(page-1)*limit;   //每页的起始索引

		Integer sum = files.size(); //记录总数

		if (pageNo+limit > sum) {
			files = files.subList(pageNo,sum );
		 }else {
			 files = files.subList(pageNo,pageNo+limit);
		}
		return files;
	}
/**
	 * 查找list总长度
	 * @param path
	 * @return
	 */
	public int findFileCount(String path) {
		List<Map<String, Object>> files = new ArrayList<Map<String, Object>>();
		File file = new File(path);
		
		File[] tempList = file.listFiles();
		Map<String, Object> fileMap = null;
		for (int i = 0; i < tempList.length; i++) {
			if (tempList[i].isFile()) {
				fileMap = new HashMap<String, Object>();
				fileMap.put("fileName", tempList[i].toString());
				// 操作文件的时间根据文件的名截取
				fileMap.put("fileTime", tempList[i].toString().substring(14, 24));
			}
			files.add(fileMap);
		}
		return files.size();
	}

通过service层将查询出来的数据进行分页,之后在查询出来的总数返回给controller层,在controller层简历一个map返回给前端页面,map的键主要是和layui表格接收的相同,必填的为 状态码,数据的总数.
最后效果图: