實現ssm加layui資料表格展示資料,搜尋,編輯,分頁(後臺用pagehelper),排序,檢視圖片 ,點選檢視大圖(彈出層)
之前的方法檢視大圖有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>
就這麼簡單方便。
相關推薦
jQuery彈出層_點選自身以外地方關閉彈出層
<html> <style> .hide{display:none;} </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script ty
實現ssm加layui資料表格展示資料,搜尋,編輯,分頁(後臺用pagehelper),排序,檢視圖片 ,點選檢視大圖(彈出層)
之前的方法檢視大圖有bug現在換了個方法,修改後就可以了,有問題請留言 先上圖 整個頁面用的都是layui外掛。 頁面有資料展示(帶分頁),顯示圖片,檢視圖片大圖,編輯資料實時更新。搜尋功能帶分頁。 引入layui.css,layui.js 2個檔案,檔案自行到官網下
解決session過期跳轉到登錄頁並跳出iframe框架(或者layui彈出層)
ref 界面 func ESS pre 這不 session ram 用戶 當用戶長時間停留在管理界面沒有操作,等到session過期後,進行了操作,那麽只是iframe跳轉到login頁面,這不是我們想要的結果。解決方法:在login頁面加一個邏輯判斷: <scr
layui(彈出層)
lse 屬性 彈層 標題欄 彈出層 frame 重復 gin normal 首先引入文件 layui.css jquery.min.js layui.js 彈出層 data-method 後面的屬性控制是什麽彈窗,在js中寫方法 <div class="site
bootstrap中的模態框(modal,彈出層)
bootstrap中的模態框(modal),不同於Tooltips,模態框以彈出對話方塊的形式出現,具有最小和最實用的功能集。務必將模態框的 HTML 程式碼放在文件的最高層級內(也就是說,儘量作為 body 標籤的直接子元素),以避免其他元件影響模態框的展現或功能。 預
layui內建模組(layer彈出層)
前面我們已經對layui前端框架的頁面元素進行了簡單的學習,但是作為一個可用的程式,僅僅是長的好看,並沒有那個什麼用;在好看的同時還需要實用和酷炫,實用就需要實現我們方便的和後端進行
window.open()方法(彈出層)
1, 最基本的彈出視窗程式碼 window.open('page.html');2, 經過設定後的彈出視窗 window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, to
jquery實現點選縮圖在彈出層顯示原圖功能
場景:列表頁展示圖片,縮圖。點選圖片,在當前頁面,用1個視窗,展示對應的大圖或者原圖。 之前採用jquery外掛imgbox,有問題,廢棄。 又下載了一個zoomify,放大的,不符合要求。點選檢視“大圖”,只是放大的功能,而不是展示原圖的url。 原圖的url和縮圖的url是不同的
layer.confirm點選第一個按鈕關閉彈出框
layer.confirm彈出框,當你點選第一個按鈕的時候,這個彈出層不會關閉,也是給一些小夥伴帶來了一些困擾,下面分享兩個解決方案: ①可以將第一個按鈕的回撥函式傳一個index,然後使用layer.close("index")就可以點選第一個按鈕的時候關閉彈出框了,程式碼如下: ②
解決RecyclerView實現聊天介面,但點選下面的EditText後彈出的輸入法會遮蓋RecyclerView內容的方法
學習Android也將近4個年頭了,一直想寫點自己所學的內容來幫助後來人,為網際網路奉獻自己的一份力量,也算自己的積累。但是之前由於自己的惰性一直沒有下筆,那就從今天這一篇開始吧! 我們做Android開發經常會有做即時聊天的需求,產品經理不管做啥APP,都要塞個IM,那
android 點選 頭像對應的 底部彈出框拍照,相簿取消 簡單實現
標準 看完這個帖子一定看看這個, 兩個結合 , 實現 拍照 相簿 回撥 主頁面佈局 這裡對應的就是一個點選事件 實現 , <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and
android點選EditText軟鍵盤不彈出的問題
今天踩了一個坑,坑是這樣的,一個for迴圈,然後inflate一個佈局,把這個佈局動態的新增到一個linearlayout,佈局程式碼如下:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:
vue-cli 單頁面手機應用input點選手機端虛擬鍵盤彈出蓋住input
在用vue-cli腳手架搭建手機H5頁面應用的時候,其中一頁中部有input,底部有position:absolute;bottom:0的元素, 當點選input框時在安卓手機上出現了: 1 虛擬鍵盤彈出蓋住input 2 底部定位的元素被擠上來 網路上很多關
iOS xcode textField 點選後虛擬鍵盤沒有彈出的問題
我的是xcode7.2版本,點選textField後虛擬鍵盤沒有彈出,提示:Can't find keyplane that supports type 4 for keyboard iPhone-Portrait-NumberPad; using 3876877096_Portrait_iPhone-Sim
HTML-通過點選網頁上的文字彈出QQ新增好友頁面
在網上參考了部分方法,綜合了一下。 發現有2中方式: 第一種是不能直接彈出新增介面的,只能彈出網頁,再通過網頁中的新增好友才能新增: 彈出的網頁是這樣的(我是寫成在新的網頁中開啟) 現在看實現的程式碼: <html> <
如何使點選超連結後瀏覽器彈出下載框
如果下載的資源和伺服器是同域的,那麼只要在a標籤中新增download屬性即可。 <a href="http://127.0.0.1:8000/a.jpg" download="a.jpg"
使用layer 實現點選 顯示大圖
由於開發時需要用到點選時顯示大圖的功能 遇到百度到一個比較好用的方法,適用程度比較高 廢話不多說,直接貼程式碼 #html部分 <div class="imgview"><img src=""https://avatar.csdn.net/B/7/0/1_qq_3187
使用layer 實現點選 顯示大圖
由於開發時需要用到點選時顯示大圖的功能 遇到百度到一個比較好用的方法,適用程度比較高 廢話不多說,直接貼程式碼 #html部分 <div class="imgview"><img src=""https://avatar.csdn.net/B/7/0/
大三筆記(layui彈出層完成資料更改後重載表格)
過載本級表格: layer.confirm('真的刪除行麼', function(index){ deleterow(data.student_id);//邏輯操作 layer.msg("刪除成功");//提示 obj.del(); /
Layui Layer在open彈出層中非同步載入資料和form表單radio、checkbox、select不渲染,不可點選的解決辦法
我們知道在使用layui的form表單元素中的radio、checkbox、select控制元件時需要使用layui.use([“form”])載入form表單模組,並使用時form.render()函式進行渲染。 而layer.open呼叫時的是靜態h