Javascript 如何对jquery数据表中的多个列进行分组

如何基于多列分组折叠和展开表

例如，我有这样的桌子

---------------------------------------------------------------
location   |   size   | cont_no |   price  |  depot  |  cond  |
---------------------------------------------------------------
   USA     |    XX    |   123   |    230   |   SED   |    LK  |
   USA     |    YY    |   343   |    330   |   ASD   |    HK  |
   UAE     |    XX    |   233   |    230   |   SED   |    LK  |
   IND     |    ZZ    |   123   |    230   |   SAD   |    FK  |
   IND     |    XX    |   213   |    430   |   ASD   |    KK  |
   IND     |    YY    |   433   |    870   |   GFD   |    FK  |
   USA     |    YY    |   865   |    230   |   SED   |    LK  |
   UAE     |    XX    |   976   |    430   |   SED   |    HK  |
   USA     |    ZZ    |   342   |    230   |   CCD   |    HK  |
   UAE     |    XX    |   132   |    445   |   SED   |    KK  |
   UAE     |    ZZ    |   064   |    323   |   YYD   |    LK  |
   IND     |    YY    |   452   |    130   |   ITG   |    HK  |
---------------------------------------------------------------

这就是我需要对上表进行分组的方式

  -------------------------------
    location |  XX  |  YY  |  ZZ  |
    -------------------------------
       UAE   |   3  |   0  |   1  |
       USA   |   1  |   2  |   1  |
       IND   |   1  |   2  |   1  |
    -------------------------------

我想根据位置和大小列进行分组，例如：美国有3个XX和0个YY和1个ZZ

然后，当我单击要展开的行时，我会显示3 XX、0 YY和1 ZZ其他四列contu__no、price、depot和cond

请有人帮助我或给我一些建议或链接供参考

---

谢谢

可以按照示例中所示的方式完成

诀窍是在将数据提供给数据表之前，对数据进行预处理，并使用JavaScript执行计算和分组。这取决于数据来自何处、静态表还是Ajax请求。如果在服务器上生成数据，也可以在服务器端完成

基本上，JSON格式的结果数据可以如下所示。这将简化对数据表中的子行的处理

[
   { 
      "location": "UAE",
      "XX": 2,
      "YY": 0,
      "ZZ": 1,
      "details": [
         ["UAE","XX","123","230","SED","LK"],
         // more records for the same location
      ]
   },
   // more locations
]

---

我想这就是你想要做的

检查以下问题和答案

JSFIDLE

---

jshiddle

您可以通过其他lib进行黑客攻击。这值得付出努力吗

或者您可以使用制表器。它具有多列分组

例如：

//将数据加载为json
var表格数据=[
{id:1，姓名：“比利·鲍勃”，年龄：“12”，性别：“男性”，身高：1，上校：“红色”，出生日期：，奶酪：1}，
{id:2，姓名：“玛丽·梅”，年龄：“1”，性别：“女性”，身高：2，上校：“蓝色”，出生日期：“1982年5月14日”，奶酪：真的}，
{id:3，姓名：“克里斯蒂娜·洛博斯基”，年龄：“42”，身高：0，上校：“绿色”，出生日期：“1982年5月22日”，奶酪：“真实”}，
{id:4，姓名：“Brendon Philips”，年龄：“125”，性别：“男性”，身高：1，上校：“橙色”，出生日期：“1980年8月1日”}，
{id:5，姓名：“Margret Marmajuke”，年龄：“16”，性别：“女性”，身高：5，上校：“黄色”，出生日期：“31/01/1999”}，
{id:6，姓名：“比利·鲍伯”，年龄：“12”，性别：“男性”，身高：1，上校：“红色”，出生日期：，奶酪：1}，
]
var table=新制表器（“示例表”{
高度：“311px”，
布局：“fitColumns”，
groupBy:函数（数据）{
返回data.gender+“-”+data.age；//按数据和年龄分组
},
自动列：对，
});    
table.setData（tableData）
这听起来像是使用两个不同的表以及根据用户交互隐藏/显示表和列更容易的方法