按单元格中的名称对表格进行排序 [英] Sort a table by the name in a cell

问题描述

我有一个包含文件夹的表格.我添加了一个上下文菜单，他们可以在其中移动一行到另一个文件夹.我的代码可以正确更改所选行的单元格，但是现在需要重新使用我的表，以便该行显示在新文件夹中.

I have a table that is organized with folders. I have added a context menu where they can move a row to a different folder. I have the code working to change the cells of the selected row correctly but now need to resort my table so the row will show in the new folder.

var sort = $("#hiddenresult tr.events").sort(function (a, b) {
     return ($(a).text().toLowerCase() == $(b).text().toLowerCase()) ? 0 :     ($(a).text().toLowerCase() < $(b).text().toLowerCase() ? -1 : 1);
                                        });
$('#hiddenresult').html(sort);

我有上面的代码，该代码按第一个单元格对表格进行排序.有没有办法让它按类选择要排序的单元格?我尝试了$(a).find('td.folderName') ...，但是在这里继续查找很慢，并且没有出现错误，但表未排序.该行在表中的前一位置显示，并带有新的文件夹名称.我尝试了$(a 'td.folderName')，但是编译器不喜欢该代码.

I have the above code which sorts the table by the first cell. Is there a way to get this to select a cell by class to sort on? I tried $(a).find('td.folderName')... but reading on here find is slow and I didn't get an error with it but the table didn't sort. The row showed up in the table in the previous position with the new folder name. I tried $(a 'td.folderName') but the compiler didn't like that code.

http://jsfiddle.net/qDZXh 显示的是一个简单的表格，用于显示我要查找的内容，尝试对第三列(文件夹名称)进行排序

http://jsfiddle.net/qDZXh shows is simple table to show what I am looking for, trying to sort on the 3rd column (folder name)

推荐答案

排序本身并不像浏览器在每次更改时重新呈现表那样慢.我建议将表从DOM中拉出，对其进行排序，然后将其放回原处，以便浏览器仅将其呈现一次.

The sorting itself isn't as slow as the browser re-rendering the table every time something changes. I recommend pulling the table out of the DOM, sorting it, then putting it back in place so the browser only renders it once.

var trs = $('#hiddenresult tbody tr.events').detach();
trs.sort(function(a, b) {
     var atxt = $(a).find('td.folderName').text().toLowerCase();
     var btxt = $(b).find('td.folderName').text().toLowerCase();
     return (atxt >= btxt) - (atxt <= btxt);
});
$('#hiddenresult tbody').append(trs);

提琴: http://jsfiddle.net/qDZXh/2/

分离和附加将使表闪烁或在表排序时消失.或者，您可以使用.clone(true)复制tbody及其所有事件等，然后最后使用.replaceWith换出它们.

detaching and appending will make the table flicker or disappear while the table is sorting. Alternatively you can use .clone(true) to copy the tbody with all of its events etc, then use .replaceWith at the end to swap them out.

这篇关于按单元格中的名称对表格进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！