您的位置:首页 > 产品设计 > UI/UE

实现ssm加layui数据表格展示数据,搜索,编辑,分页(后台用pagehelper),排序,查看图片 ,点击查看大图(弹出层)

2018-06-19 15:08 1511 查看

之前的方法查看大图有bug现在换了个方法,修改后就可以了,有问题请留言

先上图

整个页面用的都是layui插件。

页面有数据展示(带分页),显示图片,查看图片大图,编辑数据实时更新。搜索功能带分页。

引入layui.css,layui.js 2个文件,文件自行到官网下载。

前端代码,整个页面的前端代码就这么点,很舒服有没有。

要注意的是数据页面和搜索功能用的是同一个请求,搜索的多带一个keyword参数到后端进行判断。

[code]<script type="text/javascript">
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#LAY_table_user1'
, url: '/getAllCar'
, width: 1800
, cols: [[
{field: 'id', title: "ID", width: 50}
, {field: 'appId', title: '会员账号', width: 110}
, {field: 'name', title: '姓名'}
, {field: 'phone', title: '手机号码'}
, {field: 'idCard', title: '身份证号码'}
, {field: 'idImgFront', title: '身份证正面照片', templet: '<div><img src="{{d.idImgFront}}"></div>'}
, {field: 'idImgRever', title: '身份证反面照片', templet: '<div><img src="{{d.idImgRever}}"></div>'}
, {field: 'driverCadImg', title: '驾驶证照片', templet: '<div><img src="{{d.driverCadImg}}"></div>'}
, {field: 'status', title: '状态码', templet: '#statusShow'}
, {field: 'createTime', title: '申请时间', templet: '#createTime'}
, {fixed: 'right', align: 'center', toolbar: '#barDemo1', templet: "#test"}
]]
, id: 'tcsq'
, page: true
, done: function () {
hoverOpenImg();//显示大图
}
});

//查看大图
function hoverOpenImg() {
$('td img').on('click', function () {
var attr = "<img src='" + $(this).attr('src') + "'>";
layer.open({
type: 1,
area: ['800px', '600px'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true, //点击遮罩关闭
content: attr
});
})
}

var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload');

table.reload('testReload', {
where: {
keyword: demoReload.val()
}
});
}
};

//搜索框 绑定click点击事件
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});

//监听工具条
table.on('tool(useruv)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
layer.prompt({
formType: 2
, title: '修改状态码[0:等待审核],[1:审核成功],[2:审核失败]'
, value: data.status
}, function (value, index) {
EidtUv(data, value, index, obj);
});
}
});

//编辑方法
function EidtUv(data, value, index, obj) {
$.ajax({
url: "/updateStatus",
type: "post",
data: {"appId": data.appId, "status": value},
dataType: "json",
success: function (data) {
if (status == 0) {
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
status: value
});
layer.msg("修改成功", {icon: 6});
} else {
layer.msg("修改失败", {icon: 5});
}
}
});
}
});

</script>

前端代码多看看就懂了。把请求的url和字段换成自己的就行了,编辑方法绑定一个事件发送ajax请求就ok啦。

要开启分页只需要page:true就行,默认1limit10 ,field对应数据库字段,title对应表头,也可以在里面设置样式

主要看后端,controller层 获得所有数据 判断比较随意,编辑方法就不发了,

[code]//后台查询所有商铺数据
@RequestMapping("/getAllStore")
@ResponseBody
public Map<String, Object> getAllStore(int page, @RequestParam(value = "limit") int pageSize, @RequestParam(value = "keyword", required = false) String appId, HttpSession session) {
User user = (User) session.getAttribute("CURRENT_USER");
//判断用户是否登录
if (user == null) {
HashMap<String, Object> resultMap = new HashMap<>();
resultMap.put("msg", "用户未登录,请先登录");
return resultMap;
}
//如果前端没给appID就执行搜索所有(分页)
if (appId == null) {
HashMap<String, Object> resultMap = new HashMap<>();
//放入分页参数进行查询
PageInfo<Store> store = storeService.getStore(page, pageSize);
resultMap.put("code", 0);
resultMap.put("msg", "");
resultMap.put("count", store.getTotal());
resultMap.put("data", store.getList());
return resultMap;
//由于layui接口返回值有固定格式,所以用map返回固定格式参数
}
//如果前端给了appID就执行模糊搜索(分页)
HashMap<String, Object> searchMap = new HashMap<>();
//将3个参数传入dao进行查询
PageInfo<Store> phoneByLike = storeService.getPhoneByLike(page, pageSize, appId);
searchMap.put("code", 0);
searchMap.put("msg", "");
searchMap.put("count", phoneByLike.getTotal());
searchMap.put("data", phoneByLike.getList());
return searchMap;
}

先来看看getAllStore的参数和返回值,返回值有固定要求,详细看官方API 

[code]public Map<String, Object> getAllStore(int page, @RequestParam(value = "limit") int pageSize, @RequestParam(value = "keyword", required = false) String appId, HttpSession session) {

 

先说参数,pageSize,因为前端传来的叫limit我这边用@requestParam注解指定了以下。page和pageSize用来分页的详细看service层,

 

@requestParam(value="keword",required=false)String appId 这个参数是给搜索框用的,之前说了搜索和数据用的是同一个controller方法,keword对应前端 table.reload方法里面的参数,required=false 为是否必填 否,有了这个注解就省事了,判断一下keword也就是appId是否为空就好了。有传appId和没传appId走的是不同的service。详细看service。

我返回的json数据格式,数据有修改过了img的对不上 

[code]    "msg": "",
"code": 0,
"data": [
{
"id": 49,
"appId": "187",
"name": "发福",
"phone": "18988887777",
"email": "123456789@qq.com",
"idNumber": "123456789011223344",
"idImgFront": "http://localhost:8080/upload/d0e7f1e5713b4ceca1b497c6484eee63.jpg",
"idImgRever": "http://localhost:8080/upload/43d04e126a824a439c06a8846c5888c8.jpg",
"storeName": "隔壁老王",
"storeImage": "http://localhost:8080/upload/2360fd571d094742a0ee7161d7655f4a.jpg",
"storeAdd": "深圳",
"status": 0,
"createTime": 1529381280000
},
{
"id": 50,
"appId": "11111",
"name": "2222",
"phone": "33333",
"email": "123456789@qq.com",
"idNumber": "123456789011223344",
"idImgFront": "http://localhost:8080/upload/765e25c53ef14639bb75cbca64f2bb47.jpg",
"idImgRever": "http://localhost:8080/upload/f932c4e251f042dcb725b2d7bc090bb7.jpg",
"storeName": "3123213",
"storeImage": "http://localhost:8080/upload/495ff6862ec24f23a5668b1301b9b312.jpg",
"storeAdd": "布吉",
"status": 0,
"createTime": 1529375272000
},    ...省略

service层的getStore方法,也就是没有appId走的这个 pageInfo,没用过的自行百度。

[code]@Override
public PageInfo<Store> getStore(int page, int pageSize) {
PageHelper.startPage(page, pageSize);
List<Store> store = storeMapper.getStore();
PageInfo<Store> storePageInfo = new PageInfo<>(store);
return storePageInfo;
}

service层的 getPhoneByLike方法 有appId走的这个方法。多了个appId参数。

[code] @Override
public PageInfo<Store> getPhoneByLike(int page, int pageSize,String appId) {
PageHelper.startPage(page,pageSize);
List<Store> likeStore = storeMapper.getLikeStore(appId);
PageInfo<Store> storePageInfo = new PageInfo<>(likeStore);
return storePageInfo;

}

dao层 getstore方法 我加了个状态码排序,根据自行需要,layui也有这个功能但是只能在当前页排序,下一页的数据不变。所以还是自行排序吧

[code]  List<Store> getStore();
[code] <select id="getStore" resultMap="BaseResultMap">
SELECT *
FROM store
ORDER BY status ASC
</select>

dao层的 getLikeStore方法 ,模糊查询,select * 

[code] List<Store> getLikeStore(String appId);
[code] <select id="getLikeStore" resultMap="BaseResultMap" parameterType="string">
SELECT *
from store
WHERE app_id LIKE CONCAT('%',#{appId},'%')
ORDER BY status ASC
</select>

就这么简单方便。

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐