之前的方法檢視大圖有bug現在換了個方法，修改後就可以了，有問題請留言

先上圖

整個頁面用的都是layui外掛。

頁面有資料展示（帶分頁），顯示圖片，檢視圖片大圖，編輯資料實時更新。搜尋功能帶分頁。

引入layui.css，layui.js 2個檔案，檔案自行到官網下載。

前端程式碼，整個頁面的前端程式碼就這麼點，很舒服有沒有。

要注意的是資料頁面和搜尋功能用的是同一個請求，搜尋的多帶一個keyword引數到後端進行判斷。

<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層 獲得所有資料 判斷比較隨意，編輯方法就不發了，

//後臺查詢所有商鋪資料
@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資料格式，資料有修改過了img的對不上 

    "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>

就這麼簡單方便。