layui 表格上传数据以及接受数据

使用layui接受数据和上传数据

1. 前言

• layui的数据接收格式必须是一下格式(因为默认是这个格式)

  {
	  "code": 0,
	  "msg": "",
	  "count": 1000,
	  "data": [{}, {}] 
  } 

2. 前端
   页面(页面可以用渲染的方法，具体可以看官方文档

<!--查找用户-->
	<div class="selU">
		<div class="layui-item" style="padding: 20px 0px 15px 430px;">
			<div class="layui-input-inline">
				<input type="text" name="userName" id="userName" required
					lay-verify="required" placeholder="请输入用户名" autocomplete="off"
					class="layui-input">
			</div>
			<button type="button" class="layui-btn" data-type="reload">查询</button>
		</div>
		<table class="layui-table" id="table3"></table>
	</div>
 

js代码

用官方文档说的就是先获取点击事件然后在激活重载，重载在用where：{key:value}发送数据给后端，然后把回传的数据自动渲染。(render是渲染)

```javascript
  <script type="text/javascript">
	// 查找用户
	layui.use('table', function() {
		var table = layui.table;
		// 第一个实例
		table.render({
			elem : '#table3',
			url : ' http://localhost/pages/admin/searchUser',
			height : 312,
			method : 'post',
			id : 'testReload',
			page : true,
			cols : [ [
					{
						field : 'd.user.uid',
						title : 'ID',
						width : 80,
						sort : true,
						fixed : 'left',
						templet : function(d) {
							return '<span style="color: #c00;">' + d.user.uid
									+ '</span>'
						}
					},
					{
						field : 'd.user.username',
						title : '用户名',
						width : 80,
						templet : function(d) {
							return '<span style="color: #c00;">'
									+ d.user.username + '</span>'
						}
					},
					{
						field : 'sex',
						title : '性别',
						width : 80,
						sort : true,
						templet : function(d) {
							return '<span style="color: #c00;">' + d.user.sex
									+ '</span>'
						}
					},
					{
						field : 'fname',
						title : '爱好',
						width : 80,
						templet : function(d) {
							return '<span style="color: #c00;">' + d.fav
									+ '</span>'
						}
					},
					{
						field : 'comm',
						title : '备注',
						width : 177,
						templet : function(d) {
							return '<span style="color: #c00;">' + d.user.comm
									+ '</span>'
						}
					} ] ]

		});
		var $ = layui.$, active = {
			reload : function() {
				var demoReload = $('#userName').val();
				// 执行重载
				table.reload('testReload', {
					page : {
						curr : 1
					// 重新从第 1 页开始
					},
					where : {
						"name" : demoReload
					}
				}, 'data');
			}
		};
		$('.selU .layui-item .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
</script>

4. 后端
   必须返回json格式的数据，而且返回的数据要按照默认的格式

@RequestMapping("searchUser")
	@ResponseBody
	public void searchUser(HttpServletRequest req, HttpServletResponse res,String name) throws IOException {
		// 获取用户信息
		List<User> user;
		if (name == "") {
			user = adminServiceImpl.selUser();
		} else {
			user = adminServiceImpl.selUserByName(name);
		}
		// 将用户添加进Users
		List<Users> users = new ArrayList<Users>();
		if (user == null) {
			/*return null;*/
		}
		for (User u : user) {
			// 获取用户的爱好
			List<Fav> selFavByUid = adminServiceImpl.selFavByUid(u.getUid());
			Users u2 = new Users();
			u2.setUser(u);
			u2.setFav(selFavByUid);
			users.add(u2);
		}
		Layui data = Layui.data(users.size(), users);
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(data);
		PrintWriter writer = res.getWriter();
		writer.write(result);
		writer.flush();
		writer.close();
	}

Layui 类封装输出的格式 然后用commons-fileupload包内的ObjectMapper类的writeValueAsString(data)把map数组转为json格式数据

public class Layui  extends HashMap<String, Object> {

    public static Layui data(Integer count,List<?> data){
        Layui r = new Layui();
        r.put("code", 0);
        r.put("msg", "");
        r.put("count", count);
        r.put("data", data);
        return r;
    }
}