使用layui接受数据和上传数据
- 前言
- layui的数据接收格式必须是一下格式(因为默认是这个格式)
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
}
- 前端
页面(页面可以用渲染的方法,具体可以看官方文档
<!--查找用户-->
<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>
- 后端
必须返回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;
}
}