使用行类别动态分类HTML表格 [英] Dynamically sort HTML table with row categories
问题描述
有许多好的JS库可以在客户端动态地使用HTML表格，但是我一直无法找到一个处理被分类的行。这里是我表意的一个小例子：
There are any number of nice JS libraries to make HTML tables dynamically resortable on the client, but I haven't been able to find one that handles rows that are categorized. Here's a small example of the kind of table I mean:
╔═══╦═════════╦═══════╦══════════════╗
║ ║ 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列上排序时，它会自动拆分分类列表（现在它看起来像这样）：
Has anyone written a table sorter that will automatically split up the categorization column when the table is sorted on the Zip or Pet columns (so now it looks like this:
╔═══╦═════════╦═══════╦══════════════╗
║ ║ 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 ║
╚═══╩═════════╩═══════╩══════════════╝
）并重新合并它再次在表上排序时名称？否则，如何知道如何仅在类别中对进行排序，只留下类别的顺序？ （对于我想要排序的真正表格，这是可以接受的，但显然不适用于此玩具示例。）
) and re-merge it again when the table is sorted on Name? Failing that, how about a table sorter that knows how to sort only within the categories, leaving the order of categories alone? (This is acceptable for the real table that I want to sort, though obviously not for this toy example.)
我也很乐意为这种情况采取更好的构思，如果任何人有一个。
I will also be happy to take Better Ideas for this situation, if anyone's got one.
推荐答案
好的，我试图为您的问题做一个代码。
它不是最好的办法，但它似乎工作嘿嘿。
让我知道它对你是否有好处，如果是的话，如果你愿意以你想要的方式实现它。
Alright, I tried to make a code for your problem. Its not the best way to do it, but it seems it worked hehe. Let me know if it is good for you, and if so, if you are fine to implement it the way you want.
我会尽力改善它并将其转换为jQuery插件：
I will try to improve it and transform it to a jQuery plugin:
http：/ /jsfiddle.net/chambs/TRnP7
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'> </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);
});
这篇关于使用行类别动态分类HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
