码迷,mamicode.com
首页 > 其他好文 > 详细

shop--9.商品类别--批量操作--删除类别(前端)

时间:2018-07-30 21:38:41      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:ddp   inpu   category   批量操作   app   pre   16px   item   OLE   

productcategorymanagement.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(‘提交失败!‘);
                }
            }
        });
    });
    
    /*删除数据库中商品类别*/
    $(‘.category-wrap‘).on(‘click‘, ‘.row-product-category.now .delete‘,
        function(e) {
            var target = e.currentTarget;
            $.confirm(‘确定么?‘, function() {
                $.ajax({
                    url : deleteUrl,
                    type : ‘POST‘,
                    data : {
                        productCategoryId : target.dataset.id,
                    },
                    dataType : ‘json‘,
                    success : function(data) {
                        if (data.success) {
                            $.toast(‘删除成功!‘);
                            getList();
                        } else {
                            $.toast(‘删除失败!‘);
                        }
                    }
                });
            });
        });
 
    /*删除新增的商品类别*/
    $(‘.category-wrap‘).on(‘click‘,‘.row-product-category.temp .delete‘,
        function(e) {
            console.log($(this).parent().parent());
            $(this).parent().parent().remove();
 
        });
});

 

shop--9.商品类别--批量操作--删除类别(前端)

标签:ddp   inpu   category   批量操作   app   pre   16px   item   OLE   

原文地址:https://www.cnblogs.com/windbag7/p/9392408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!