Javascript 使用行类别动态排序HTML表

有很多漂亮的JS库可以使HTML表在客户端上动态地重新调用，但是我还没有找到一个可以处理分类行的库。这是一个小例子，我的意思是：

╔═══╦═════════╦═══════╦══════════════╗
║   ║  Name▾  ║  Zip  ║     Pet      ║
╠═══╬═════════╬═══════╬══════════════╣
║   ║ Alice   ║ 14124 ║ Squirrel     ║
║ A ║ Alfred  ║ 24601 ║ Meerkat      ║
║   ║ Anupam  ║ 91532 ║ Gila monster ║
╠═══╬═════════╬═══════╬══════════════╣
║   ║ Bernice ║ 03413 ║ Rock         ║
║ B ║ Boris   ║ 32610 ║ Fish         ║
║   ║ Betty   ║ 71011 ║ Elephant     ║
╚═══╩═════════╩═══════╩══════════════╝

是否有人编写了一个表格分类器，当表格按Zip或Pet列排序时，该分类器将自动拆分分类列（现在看起来是这样的：

╔═══╦═════════╦═══════╦══════════════╗
║   ║  Name   ║  Zip▾ ║     Pet      ║
╠═══╬═════════╬═══════╬══════════════╣
║ B ║ Bernice ║ 03413 ║ Rock         ║
║ A ║ Alice   ║ 14124 ║ Squirrel     ║
║ B ║ Boris   ║ 22310 ║ Fish         ║
║ A ║ Alfred  ║ 24601 ║ Meerkat      ║
║ B ║ Betty   ║ 71011 ║ Elephant     ║
║ A ║ Anupam  ║ 91032 ║ Gila monster ║
╚═══╩═════════╩═══════╩══════════════╝

)并在表按名称排序时重新合并它？如果做不到这一点，那么一个只知道如何在类别内进行排序的表格分拣机又如何呢？（这对于我想要排序的真实表是可以接受的，但显然不适用于这个玩具示例。）

---

如果有人有更好的想法，我也很乐意为这种情况提供更好的想法。

好的，我试着为你的问题编写一个代码。 这不是最好的办法，但似乎奏效了呵呵。 让我知道它是否对你有好处，如果是的话，你是否可以按照你想要的方式实施它

我将尝试改进它并将其转换为jQuery插件：

var字母='ABCDEFGHIJKLMNOPQRSTUVWXYZ'。拆分（“”）；
风险值数据=[
{姓名：'Alice'，邮编：'14124'，宠物：'Squirrel'}，
{姓名：'Alfred'，邮编：'24601'，宠物：'Meerkat'}，
{姓名：'Anupam'，邮编：'91532'，宠物：'Gila monster'}，
{姓名：'Bernice'，邮编：'03413'，宠物：'Rock'}，
{姓名：'Boris'，邮编：'32610'，宠物：'Fish'}，
{姓名：'Betty'，邮编：'71011'，宠物：'Elephant'}
];
var lastType=''；
函数getHeader（）{
var row=此[0]，
标题=[]；
for（第行中的var k）{
割台推压（k）；
}
返回头；
}
功能排序（标准）{
lastType=标准；
var c=标准| |“名称”；
返回此.sort（函数（a，b）{
返回a[c]>b[c]；
});
}
函数呈现（tbl，数据）{
tbl.empty（）；
var buffer=“”，
header=getHeader.call（数据）；
对于（变量i=0；i1）{
td.eq（0）.attr（'rowspan'，td.length）；
$（“.+l+”：gt（0）”，待定）；
}
}
}
sortBy.call（数据，'name'）；
渲染（$（'#tbl'），数据）；
$（文档）.on（'click'，'.sort'，函数（ev）{
变量类型=$（this）.data（'type'）；
排序呼叫（数据、类型）；
渲染（$（'#tbl'），数据）；
});

算法似乎是：1）删除分隔符（如果有），2）使用任何排序代码按所需列排序，3）检查排序列是否需要分隔符，如果需要，则逐行扫描以在所需位置添加分隔符。如果能使客户端的工作变得更简单，我可以更改HTML的生成方式，但是现在没有分隔行（但是，可能有“这是这个类别中的第一行”类标签-样式还没有完全确定），“类别”列有很多

，这使得咀嚼它足够痛苦，我希望有人已经为我写了它。这可能对这项任务来说有点过分了，但我知道如何处理动态分组。但是，它使用了不同的分组布局。我很确定，您可以在需要时拦截排序操作以删除分组。

var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

var data = [
    {name: 'Alice', zip: '14124', pet: 'Squirrel'},
    {name: 'Alfred', zip: '24601', pet: 'Meerkat'},
    {name: 'Anupam', zip: '91532', pet: 'Gila monster'},
    {name: 'Bernice', zip: '03413', pet: 'Rock'},
    {name: 'Boris', zip: '32610', pet: 'Fish'},
    {name: 'Betty', zip: '71011', pet: 'Elephant'}
];

var lastType = '';

function getHeader() {
    var row = this[0],
        header = [];
    for(var k in row) {
        header.push(k);
    }
    return header;
}

function sortBy(criteria) {
    lastType = criteria;
    var c = criteria || 'name';
    return this.sort(function(a, b) {
        return a[c] > b[c];
    });
}

function render(tbl, data) {
    tbl.empty();
    var buffer = "<tr><th class='letter'>&nbsp;&nbsp;</th>",
        header = getHeader.call(data);
    for(var i=0; i < header.length; i++) {
        buffer += "<th class='sort' data-type='"+header[i]+"'>"+header[i]+"</th>";
    }
    buffer += "</tr>";
    tbl.append(buffer);
    buffer = "";

    for(var i=0; i < data.length; i++) {
        var l = data[i].name.substr(0, 1);
        buffer += "<tr><td class='"+l+"'>" + l + "</td>";
        for(var j=0; j < header.length; j++) {
            var k = header[j];
            buffer += "<td>" + data[i][k] + "</td>";
        }
        buffer += "</tr>";
        tbl.append(buffer);
        buffer = "";
    }

    if(lastType === 'name') {
        merge(tbl);
    }

}

function merge(tbl) {
    for(var i=0; i < letters.length; i++) {
        var l = letters[i];
        var td = $('.' + l, tbl);
        if(td.length > 1) {
            td.eq(0).attr('rowspan', td.length);
            $('.' + l + ':gt(0)', tbl).remove();
        }
    }
}

sortBy.call(data, 'name');
render($('#tbl'), data);
$(document).on('click', '.sort', function(ev) {
    var type = $(this).data('type');
    sortBy.call(data, type);
    render($('#tbl'), data);
});