javascript - jQuery sortColumns 插件 : How to sort correctly with rowspan

Question

关注这篇文章jQuery table sort (github 链接:https://github.com/padolsey/jQuery-Plugins/blob/master/sortElements/jquery.sortElements.js)，我成功地对列进行了排序，但是它在 rowspan 的情况下不起作用:例如，像这样的情况

 Grape      3,096,671M
            1,642,721M
 Apple      2,602,750M
            3,122,020M

当我点击第二列时，它尝试排序

 Apple      2,602,750M
            1,642,721M
 Grape      3,096,671M
            3,122,020M

(预期结果应该是它应该只在每个 rowspan 内排序

 Grape      1,642,721M
            3,096,671M
 Apple      2,602,750M
            3,122,020M

或

 Grape      3,096,671M
            1,642,721M
 Apple      3,122,020M
            2,602,750M

)

所以要么如您所见，这是不正确的，请任何 jQuery 专家帮助我解决此问题。这是我的代码

var inverse = false;
function sortColumn(index){
    index = index + 1;
    var table = jQuery('#resultsTable');
    table.find('td').filter(function(){
        return jQuery(this).index() == index;
    }).sortElements(function(a, b){
        a = convertToNum($(a).text());
        b = convertToNum($(b).text());

        return (
            isNaN(a) || isNaN(b) ?
            a > b : +a > +b
            ) ?
        inverse ? -1 : 1 :
        inverse ? 1 : -1;
    },function(){
        return this.parentNode;
    });
    inverse = !inverse;
}
function convertToNum(str){
    if(isNaN(str)){
        var holder = "";
        for(i=0; i<str.length; i++){                                
            if(!isNaN(str.charAt(i))){
                holder += str.charAt(i);
            }
        }
        return holder;
    }else{
        return str;
    }
}

问题:

1.如何使用 rowspan 对其进行排序。 ROWSPAN 的数量并不总是相同。上面的例子中 Grape 和 Apple 的行跨度都是 2，但情况并非总是如此。

2.谁能解释一下这个语法:

 return (
            isNaN(a) || isNaN(b) ?
            a > b : +a > +b
            ) ?
        inverse ? -1 : 1 :
        inverse ? 1 : -1;

所以我可以看到，如果 a 或 b 不是数字，则进行字符串比较，否则进行数字比较，但我不明白

inverse ? -1 : 1 :
inverse ? 1 : -1;

测试用例

<table id="resultsTable">
        <thead>
            <tr>
                <th>Fruit</th>
                <th onclick="sortColumn(1)">Quantity</th>
                <th onclick="sortColumn(2)">Rate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">Grape</td>
                <td>15</td>
                <td>5</td>
            </tr>
            <tr>
                <td>4</td>
                <td>2</td>
            </tr>
            <tr>
                <td>88</td>
                <td>1</td>
            </tr>
            <tr>                    
                <td>11</td>
                <td>3</td>
            </tr>
            <tr>
                <td rowspan="3">Melon</td>
                <td>21</td>
                <td>2</td>
            </tr>
            <tr>
                <td>2</td>
                <td>0</td>
            </tr>
            <tr>
                <td>35</td>
                <td>1</td>
            </tr>
            <tr>
                <td rowspan="6">Melon</td>
                <td>24</td>
                <td>5</td>
            </tr>
            <tr>
                <td>66</td>
                <td>2</td>
            </tr>
            <tr>
                <td>100</td>
                <td>4</td>
            </tr>
            <tr>
                <td>21</td>
                <td>1</td>
            </tr>
            <tr>
                <td>65</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>0</td>
            </tr>
        </tbody>
 <table>

Answer 1

代码工作的条件:

• 包含 td 和 rowspan 的列必须全部在表格的左侧
• 这些列中的所有td必须有一个rowspan，即使它是1
• 要排序的行组由这些列中的最右边组成(但可以轻松更改)

jsFiddle: http://jsfiddle.net/5GrAC/77/

var inverse = false;

function sortColumn(index) {
    var trs = $('#resultsTable > tbody > tr'),
        nbRowspans = trs.first().children('[rowspan]').length,
        offset = trs.first().children('[rowspan]').last().offset().left;

    var tds = trs.children('[rowspan]').each(function() {
        $(this).data('row', $(this).parent().index());
        $(this).data('column', $(this).index());
        $(this).data('offset', $(this).offset().left)
    }).each(function() {
        if($(this).data('offset') != offset)
            return;

        var rowMin = $(this).data('row'),
            rowMax = rowMin + parseInt($(this).attr('rowspan'));

        trs.slice(rowMin, rowMax).children().filter(function() {
            return $(this).index() == index + $(this).parent().children('[rowspan]').length - nbRowspans;
        }).sortElements(function(a, b) {
            a = convertToNum($(a).text());
            b = convertToNum($(b).text());

            return (
                isNaN(a) || isNaN(b) ?
                a > b : +a > +b
                ) ?
            inverse ? -1 : 1 :
            inverse ? 1 : -1;
        }, function() {
            return this.parentNode;
        });
    });

    var trs = $('#resultsTable > tbody > tr');
    tds.each(function() {
        if($(this).parent().index() != $(this).data('row'))
            $(this).insertBefore(trs.eq($(this).data('row')).children().eq($(this).data('column')));
    });

    inverse = !inverse;
}

快速解释:

• 使用rowspan查找所有td
• 保存这些td的位置，包括左偏移
• 这些 td 按其原始 offset 进行过滤，以仅与最右边的一起使用
• tr 与每个保留的 td 相关，使用想要的列排序
• 如有必要，所有具有rowspan 的td 最终将移回其原始位置

---

关于问题2，我只补全bartlaarhoven的回答，代码也可以这样写:

return (
        (isNaN(a) || isNaN(b) ? a > b : +a > +b) ? 1 : -1
    ) * (inverse ? -1 : 1);

您可以很容易地读到 inverse 用于反转结果。