多分类商品表格重复渲染问题排查及修复请求

问题根源 #

你的代码存在三个核心问题导致重复渲染：

• 商品行插入目标错误：每次请求成功后都选择全局最后一个.inventory_products_lines_head，导致多个分类的商品都被插入到同一个表格里。
• 重复插入商品行：代码中连续执行了clone.insertAfter($injectAfter)和$('.inventory_products_lines_values').closest('div').after(clone)，同一条商品行会被插入两次。
• 表格容器创建顺序颠倒：先插入商品行，再创建分类表格容器，导致商品行不属于任何分类容器，后续新容器又会重复关联旧商品。

修正方案 #

调整逻辑顺序：先创建当前分类的独立表格容器，再将商品行插入到该容器内部的头部之后，同时删除重复插入的代码。

修正后的JavaScript代码 #

categories_id.forEach(function(category_id) {
  $.ajax({
    type: 'GET',
    url: 'ajax-tab.php' + '?rand=' + new Date().getTime() + '&ajax=true&controller=AdminInventory&action=searchProductsByCategory&token=' + token + '&search_category_id=' + category_id,
    cache: false,
    dataType: "json",
    success: function(data) {
      // 1. 先克隆分类表格容器并添加分类名称
      let inventoryProductsBlock = $('#default_inventory_products .inventory_products_block').clone(true);
      inventoryProductsBlock.find('.search_category_name').append('<h2>' + data.category_name + '</h2>');
      // 将新容器插入到目标位置
      $('#inventory_products').after(inventoryProductsBlock);
      
      // 2. 获取当前分类容器内的表头，作为商品行插入的目标
      let $injectAfter = inventoryProductsBlock.find('.inventory_products_lines_head');
      
      // 3. 遍历商品，插入到当前分类的表头之后
      $.each(data.products, function(key, val) {
        let status = val.active == 1 
          ? '<i style="color: #72C279;" class="icon-check"></i>' 
          : '<i style="color: #E08F95;" class="icon-remove"></i>';
        
        let clone = $('.inventory_products_lines.inventory_products_lines_values').last().clone();
        clone.find('.id_product_attribute').html('<input name="id_product_attribute[]" id="inventory_id_product_attribute" type="hidden" value="0" />');
        clone.find('.now_quantity').html('<input type="hidden" name="now_quantity[]" id="now_quantity" value="' + val.quantity + '"><span>' + val.quantity + '</span>').attr('data-quantity', val.quantity);
        clone.find(".brand").html('<span>' + val.manufacturer_name + '</span>');
        clone.find(".name").html('<span>' + val.name + '</span>');
        clone.find(".status").html(status);
        clone.find(".wholesale_price").html('<input name="wholesale_price[]" id="wholesale_price" type="hidden" value="' + val.wholesale_price + '" /><span>' + val.formatted_wholesale_price + '</span>');
        clone.find(".price").html('<input name="price[]" id="price" type="hidden" value="' + val.price + '" /><span>' + val.formatted_price + '</span>');
        clone.find('.id_product').html('<input name="id_product[]" id="inventory_id_product" type="hidden" value="' + val.id_product + '" />');
        
        // 只插入一次到当前分类的表头后面
        clone.removeClass('hidden').insertAfter($injectAfter);
        // 更新当前插入目标为刚插入的行，保证商品按顺序排列
        $injectAfter = clone;
      });
      
      // 4. 为当前分类的商品行编号
      inventoryProductsBlock.find('.inventory_products_lines_result').each(function(i) {
        $(this).find('div:first').text((i + 1) + ".");
      });
    }
  });
});

关键修改点 #

1. 先创建分类容器：请求成功后先克隆并插入当前分类的表格容器，确保商品行有独立的归属。
2. 锁定插入目标：使用当前分类容器内的表头作为插入起点，避免跨分类插入。
3. 删除重复插入代码：移除$('.inventory_products_lines_values').closest('div').after(clone)，避免同一商品行重复出现。
4. 更新插入目标：每次插入商品行后，将$injectAfter更新为当前行，保证商品按顺序排列。
5. 独立编号：只对当前分类容器内的商品行编号，避免全局编号混乱。

验证效果 #

现在选择多个分类时，每个分类会生成独立的表格，商品只会出现在对应分类的表格中，不会出现重复渲染的问题。

内容的提问来源于stack exchange，提问作者RUS DESIGN