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/productcategorymanagement.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-33">类别</div> <div class="col-33">优先级</div> <div class="col-33">操作</div> </div> <div class="category-wrap"> </div> </div> <div class="content-block"> <div class="row"> <div class="col-50"> <a href="#" class="button button-big button-fill button-success" id="new">新增</a> </div> <div class="col-50"> <a href="#" class="button button-big button-fill" id="submit">提交</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/productcategorymanagement.js' charset='utf-8'></script> </body> </html>
productcategorymanegement.js
$(function() { var listUrl = '/o2o/shopadmin/getproductcategorylist'; var addUrl = '/o2o/shopadmin/addproductcategorys'; var deleteUrl = '/o2o/shopadmin/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); } }); } $('#new').click(function(){ var tempHtml = '<div class="row row-product-category temp">' + '<div class = "col-33"><input class="category-input category" type="text" placeholder="分类名"></div>' + '<div class = "col-33"><input class="category-input priority" type="number" placeholder="优先级"></div>' + '<div class="col-33"><a href="#" class="button delete">删除</a></div>' + '</div>'; $('.category-wrap').append(tempHtml); }); $('#submit').click(function() { var tempArr = $('.temp'); var productCategoryList = []; tempArr.map(function(index, item) { var tempObj = {}; tempObj.productCategoryName = $(item).find('.category').val(); tempObj.priority = $(item).find('.priority').val(); if (tempObj.productCategoryName && tempObj.priority) { productCategoryList.push(tempObj); } }); $.ajax({ url : addUrl, type : 'POST', data : JSON.stringify(productCategoryList), contentType : 'application/json', success : function(data) { if (data.success) { $.toast('提交成功！'); getList(); } else { $.toast('提交失败！'); } } }); }); });