商店管理中的类别管理
功能:从后台返回商品信息,动态生成删除按钮
dao层
@Repository public interface ProductCategoryDao { public List<ProductCategory> queryProductCategoryList(@Param( "shopId" ) long ShopId); }
SQL
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.shop.dao.ProductCategoryDao"> <!--public List<ProductCategory> queryProductCategoryList(int ShopId);--> <select id="queryProductCategoryList" parameterType="java.lang.Long" resultType="com.shop.bean.ProductCategory"> SELECT product_category_id, product_category_name, priority, create_time, shop_id FROM product_category WHERE shop_id=#{shopId} ORDER BY priority DESC </select> </mapper>
Service层
public interface ShopCategoryService { public List<ShopCategory>getShopCategoryList(ShopCategory shopCategoryCondition); }
impl
@Service public class ProductCategoryServiceImpl implements ProductCategoryService{ @Autowired ProductCategoryDao productCategoryDao; @Override public List<ProductCategory> getProductCategoryList(Long shopId) { return productCategoryDao.queryProductCategoryList( shopId ); } }
Controller层
@Controller @RequestMapping("/shopadmin") public class ProductCategoryController { @Autowired private ProductCategoryService productCategoryService; @RequestMapping(value="/getproductcategorylist", method= RequestMethod.GET) @ResponseBody public Map<String, Object> getProductCategoryList(HttpServletRequest request){ Map<String, Object> modelMap = new HashMap<>(); //Shop currentShop = (Shop) request.getSession().getAttribute( "currentShop" ); Shop currentShop = new Shop(); currentShop.setShopId(1L); List<ProductCategory> productCategoryList = null; if(currentShop != null && currentShop.getShopId() > 0){ productCategoryList = productCategoryService.getProductCategoryList( 1L ); modelMap.put( "productCategoryList", productCategoryList ); modelMap.put( "success", true ); } else{ modelMap.put( "errMsg", "没有商铺" ); modelMap.put( "success", true ); } return modelMap; } }
productcategorymanegement.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/productcategorymanegement.css"> </head> <body> <header class="bar bar-nav"> <h1 class="title">商品分类管理</h1> </header> <div class="content"> <div class="content-block"> <div class="row row-product-category"> <div class="col-40">商店名称</div> <div class="col-40">状态</div> <div class="col-20">操作</div> </div> <div class="category-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/productcategorymanegement.js' charset='utf-8'></script> </body> </html>
productcategorymanegement.js
$(function() { var shopId = 1; var listUrl = '/shopadmin/getproductcategorylist?shopId=' + shopId; var addUrl = '/myo2o/shop/addproductcategorys'; var deleteUrl = '/myo2o/shop/removeproductcategory'; getList(); function getList() { $.getJSON(listUrl, function(data) { if (data.success) { $('.category-wrap').html(''); var tempHtml = ''; //遍历procategorylist的列表 data.productCategoryList.map(function(item, index) { tempHtml += '' + '<div class="row row-product-category now">' + '<div class="col-33 product-category-name">' + item.productCategoryName + '</div>' + '<div class="col-33">' + item.priority + '</div>' + '<div class="col-33"><a href="#" class="button delete" data-id="' + item.productCategoryId + '">删除</a></div>' + '</div>'; }); //填进category-wrap控件里 $('.category-wrap').append(tempHtml); } }); } });
productcategorymanegement.css
.row-product-category { border: 1px solid #999; padding: .5rem; border-bottom: none; } .row-product-category:last-child { border-bottom: 1px solid #999; } .category-input { border: none; background-color: #eee; } .product-category-name { white-space: nowrap; overflow-x: scroll; }