实现ssm+layui数据表格展示数据，搜索，编辑，分页，排序

先上图

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>
<style>
    #tb {
        float: left;
        margin-left: 50px;
        margin-top: 50px;
    }

    .layui-table-cell {
        height: 32px;
        line-height: 32px;
    }

    .layui-table-tips-main {
        max-height: 300px;
    }
</style>

<body>
<!--layui数据表格-->
<div id="tb">
    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    </script>
</div>

<script src="layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#LAY_table_user'
            , url: '/getAllStore'
            , width: 1800
            , cols: [[
                {type: 'numbers', title: "序号"}
                , {field: 'appId', width: 120, title: 'appID'}
                , {field: 'name', width: 120, title: '姓名'}
                , {field: 'phone', width: 120, title: '手机号码'}
                , {field: 'email', width: 120, title: '邮箱'}
                , {field: 'idNumber', width: 180, title: '身份证号码'}
                , {
                    field: 'storeImage',
                    width: 130,
                    title: '身份证正面照片',
                    templet: '<div><img src="{{d.idImgFront}}"></div>'
                }
                , {
                    field: 'storeImage',
                    width: 130,
                    title: '身份证反面照片',
                    templet: '<div><img src="{{d.idImgRever}}"></div>'
                }
                , {field: 'storeName', width: 183, title: '工商户名称'}
                , {field: 'storeImage', width: 120, title: '营业执照照片', templet: '<div><img src="{{d.storeImage}}"></div>'}
                , {field: 'storeAdd', width: 130, title: '营业执照所在地'}
                , {field: 'status', width: 80, title: '状态码'}
                , {fixed: 'right', width: 248, align: 'center', toolbar: '#barDemo'}
            ]]
            , id: 'testReload'
            , page: true
        });


        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>
</body>
</html>

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

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

这里有一个bug ,field 参数3个都是storeImage，我这边必须是storeImage才能点击查看大图，你们搞的时候要注意看看。

               ,}field: 'storeImage',
                    width: 130,
                    title: '身份证正面照片',
                    templet: '<div><img src="{{d.idImgFront}}"></div>'
                }
                , {
                    field: 'storeImage',
                    width: 130,
                    title: '身份证反面照片',
                    templet: '<div><img src="{{d.idImgRever}}"></div>'
                }

主要看后端，controller层获得所有数据，编辑方法就不发了，

//后台查询所有商铺数据
@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

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数据格式

    "msg": "",
    "code": 0,
    "data": [
        {
            "id": 49,
            "appId": "187",
            "name": "发福",
            "phone": "18988887777",
            "email": "[email protected]",
            "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": "[email protected]",
            "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，没用过的自行百度。

@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参数。

 @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也有这个功能但是只能在当前页排序，下一页的数据不变。所以还是自行排序吧

  List<Store> getStore();

 <select id="getStore" resultMap="BaseResultMap">
        SELECT *
        FROM store
        ORDER BY status ASC
    </select>

dao层的 getLikeStore方法，模糊查询，select * ，呵呵又偷懒了

 List<Store> getLikeStore(String appId);

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

就这么简单方便。

实现ssm+layui数据表格展示数据，搜索，编辑，分页，排序

猜你喜欢