用行分类动态排序HTML表
Dynamically sort HTML table with row categories
有许多很好的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插件:
http://jsfiddle.net/chambs/TRnP7var 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和Javascript进行客户端排序
- 使用Handontable在同一列中用纯文本和html对问题进行排序
- 如何移动/重新排序html表行
- 使用javascript/JQM对JSON对象进行排序并附加到html中
- 如何在javascript和/或jquery中对具有多列的HTML表进行排序
- 从 ajax 调用到 jquery UI 可排序列表构建 html
- 我可以用angularJS/Jquery / Javascript对静态html表进行排序吗?
- 功能性 HTML 表(排序、筛选、移动和切换列)
- 无法在jQuery上对我的html列表进行排序
- 如何使用Javascript对html内容进行排序(按作者排序,按日期排序等)
- 表过滤,排序,在html中使用jquery/javascript/css进行区分记录
- 排序 Jquery 返回的 HTML 元素
- 如何创建可排序、可过滤和可编辑的 html/javascript 表
- 在 JavaScript 或 jQuery 中对 HTML 内容进行排序
- 对 html 表中.txt中的字符串进行排序
- 当通过 Struts 填充表时,如何实现 HTML 表排序
- 如何使用 html 选择元素的值对 Shopify 液体中的集合进行排序
- 使用 Tinysort 按子属性对 HTML 列表进行排序
- 对 HTML 列表进行排序,然后对目标元素进行排序
- 对具有多词输入的 HTML 元素进行排序