shop--7.店鋪編輯和列表--店鋪列表展示 前端
阿新 • • 發佈:2018-04-21
ops 通過 ets AR operation initial tle hand 路由
shoplist.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>商店列表</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link rel="stylesheet" href="../resources/css/shop/shoplist.css"> </head> <body> <header class="bar bar-nav"> <h1 class="title">商店列表</h1> </header> <div class="content"> <div class="content-block"> <p>你好,<span id="user-name"></span> <a href="/shopadmin/shopoperation">增加店鋪</a> </p> <div class="row row-shop"> <div class="col-40">商店名稱</div> <div class="col-40">狀態</div> <div class="col-20">操作</div> </div> <div class="shop-wrap"> </div> </div> <div class="content-block"> <div class="row"> <div class="col-50"> <a href="" id="log-out" class="button button-big button-fill button-danger">退出系統</a> </div> <div class="col-50"> <a href="/shop/changepsw" class="button button-big button-fill button-success">修改密碼</a> </div> </div> </div> </div> <script type=‘text/javascript‘ src=‘//g.alicdn.com/sj/lib/zepto/zepto.min.js‘ charset=‘utf-8‘></script> <script type=‘text/javascript‘ src=‘//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js‘ charset=‘utf-8‘></script> <script type=‘text/javascript‘ src=‘//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js‘ charset=‘utf-8‘></script> <script type=‘text/javascript‘ src=‘../resources/js/shop/shoplist.js‘ charset=‘utf-8‘></script> </body> </html>
在其中需要嵌入的shoplist.js用來進行店鋪信息查詢與顯示
$(function(){ getlist(); function getlist(e){ $.ajax({ url:‘/shopadmin/getshoplist‘, type:‘get‘, dataType:"json", success:function(data){ if(data.success){ handleList(data.shopList); handleUser(data.user); } } }); //顯示用戶名 function handleUser(data){ $(‘#user-name‘).text(data.name); } //顯示傳回來的用戶名下的店鋪列表 function handleList(data){ var html = ‘‘; data.map(function(item, index){ html += ‘<div class="row row-shop"><div class="col-40">‘ + item.shopName +‘</div><div class="col-40">‘+ shopStatus(item.status) +‘</div><div class="col-20">‘ + goShop(item.status, item.shopId) + ‘</div></div>‘; }); $(‘.shop-wrap‘).html(html); } function shopStatus(data){ if(data == 0){ return ‘審核中‘; } else if(data == -1){ return ‘店鋪非法‘; } else if(data == 1){ return ‘審核通過‘; } } //進入店鋪管理頁面,一個超鏈接 function goShop(status, id){ if(status == 1){ return ‘<a href="/shopadmin/shopmanagement?shopId=‘ + id + ‘">進入</a>‘; } else{ return ‘‘; } } } });
還有shoplist.css
.row-shop { border: 1px solid #999; padding: .5rem; border-bottom: none; } .row-shop:last-child { border-bottom: 1px solid #999; } .shop-name { white-space: nowrap; overflow-x: scroll; } .shop-wrap a { }
路由
//進行店鋪列表顯示的轉發 @RequestMapping("/shoplist") public String shoplist(){ //返回顯示店鋪註冊的頁面 return "shop/shoplist"; }
shop--7.店鋪編輯和列表--店鋪列表展示 前端