如何对 table 的行进行分组（按 "Quantity" 单元格）？

Question

我认为这是一个常见问题，但我不知道有什么明显的解决方案。

我有 table 件商品要订购（即销售清单）。此 table 中的一列是“数量”。是否有工具（库或其他工具）可以自动对记录（行）进行分组，并增加单元格“数量”？

简而言之，我希望 table 将此（行 ID、名称、价格）转换为：

3, Red ball, 3 pieces, $ 5
3, Red ball, 3 pieces, $ 5
3, Red ball, 3 pieces, $ 5

进入此（名称、数量、价格）：

Red ball, 3 pieces, $ 5

问题详情如下... 为什么我需要这个？我将 table 的每个位置（行）存储在服务器上。但是由于“数量”列，我必须在新模型中创建新记录，我在其中为每个项目创建重复记录。例如，字符串(name, quantity, price):

Red ball, 3 pieces, $ 5

复制到另一个模型为（行 ID、名称、价格）：

3, Red ball, 3 pieces, $ 5
3, Red ball, 3 pieces, $ 5
3, Red ball, 3 pieces, $ 5

这样做是为了能够处理这些记录（例如，计算它们的数量，link 到其他记录等）。但是一切都破坏了“数量”列，如果它不存在，那么我就不必在我的应用程序的不同模型中复制任何东西，我只会显示相同的记录，并且已经“一些 ADDON/LIB/PLUGIN/SNIPPET 我问的YOU ABOUT”会显示 table 并自动将相同的行归为一组，在客户端 (JS) 的“数量”列中计算它们的数量。请原谅我描述我的问题，我认为问题的第一部分就足够了......

我目前正在使用 TABULATOR (JS) tables，一个非常酷的工具，但我还没有发现它有这样的内置功能......

来自服务器的数据格式：

 var tabledata = [
    
    {
        order_item_id:6,
        name:'red ball',
        price:5,
        
     },

    {
        order_item_id:7,
        name:'red ball',
        price:5,
        
     },

    {
        order_item_id:8,
        name:'red ball',
        price:5,
        
     },

     ]

Answer 1

const tabledata = [{
  order_item_id: 5,
  name: 'blue ball',
  price: 3,
}, {
  order_item_id: 6,
  name: 'red ball',
  price: 5,
}, {
  order_item_id: 7,
  name: 'red ball',
  price: 5,
}, {
  order_item_id: 8,
  name: 'red ball',
  price: 5,
}, {
  order_item_id: 9,
  name: 'blue ball',
  price: 3,
}, {
  order_item_id: 10,
  name: 'blue ball',
  price: 3,
}, {
  order_item_id: 11,
  name: 'red ball',
  price: 5,
}, {
  order_item_id: 12,
  name: 'yellow ball',
  price: 15,
}]

const grouped = tabledata.reduce((acc, item) => {
  /*
   * check whether the accumulator already contains a product with the same name
   * (if it does, return its index otherwise return -1)
   */
  const index = acc.findIndex(_item => _item.name === item.name);

  if (index > -1) {
    /*
     * if the product is already present, increase its quantity by 1
     */
    acc[index].quantity = acc[index].quantity + 1;
  } else {
    /*
     * if the product is not present, add it to the accumulator array
     */
    acc.push({
      name: item.name,
      unit_price: item.price,
      quantity: 1
    });
  }

  return acc;
}, []);

console.log('### TABLEDATA:\n', tabledata);
console.log('### GROUPED:\n', grouped);

如何对 table 的行进行分组（按 "Quantity" 单元格）？

How can I group the rows of a table (by the "Quantity" cell)?

javascript

datatable

datatables

tabulator