实现ssm加layui数据表格展示数据,搜索,编辑,分页(后台用pagehelper),排序,查看图片 ,点击查看大图(弹出层)
之前的方法查看大图有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>
就这么简单方便。
阅读更多- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
- 点击弹出框,实现可以搜索的ListView排序数据
- 超级表格从四个维度为您实现精细化的表格数据共享【点击查看】
- iOS - 关于点击小图片之后查看对应大图的实现
- 点击发送后图片查看大图的实现思路
- DataTables服务器端传入传出(接收与提交)的数据格式 搜索、排序和分页与后台数据的交互
- 基于JavaScript实现移动端点击图片查看大图点击大图隐藏
- SSM框架下用laypage和ajax实现分页和数据交互
- [置顶] Android 实现WebView点击图片查看大图列表及图片保存
- SSM+easyUI结合Mybatis-PageHelper实现分页功能
- EXTJS桌面显示窗口(左边:TREE,右边:PANEL),点击按钮弹出窗口编辑数据提交后台PHP。
- 弹出框PopupWindow,点击图片查看大图
- Android 利用JS 实现对网络图片添加点击事件 查看大图
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- jquery实现移动端点击图片查看大图特效
- 功能齐全的GridView!Asp.Net中GridView的自定义分页,带箭头的排序,鼠标高亮每一行,无数据时的提醒,点击Button弹出框!
- 基于JavaScript实现移动端点击图片查看大图点击大图隐藏
- JqGrid 学习笔记---实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据
- Android textView展示html图片,实现图文混排,点击查看大图片
- JS实现table表格数据排序功能(可支持动态数据+分页效果)