jQuery sortColumns插件：如何使用rowspan正确排序 [英] jQuery sortColumns plugin: How to sort correctly with rowspan

查看：83
本文介绍了jQuery sortColumns插件：如何使用rowspan正确排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

继此发布 jQuery表格排序（github链接： https://github.com/padolsey/jQuery-Plugins/blob/master/sortElements/jquery .sortElements.js ），我成功地对列进行了排序，但是在rowspan情况下它不起作用：例如，像这样的情况

 葡萄309667.1M 
 1,642,721M 
苹果2,602,750M 
 3,122,020M

当我点击第二栏时，它会尝试对

 进行排序Apple 2,602,750M 
 1,642,721M 
葡萄3,096,671M 
 3,122,020M

（预计结果应该是它应该只在每个行内排序 

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

或

 葡萄309667.1M 
 1,642,721M 
苹果3,122,020M 
 2,602,750M 
  
 
 
 
 
 
 
 $你可以看到不正确，请任何jQuery大师帮我解决这个问题。这是我的代码
  var inverse = false; 
函数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; 
} 
函数convertToNum（str）{
 if（isNaN（str））{
 var holder =; （i = 0; i  if（！isNaN（str.charAt（i）））{
持有者+ = str.charAt（i） ; 
} 
} 
回报持有者; 
} else {
 return str; 
 
 
  
 问题： 
 
 
 
 1.我如何用rowspan排序？  ROWSPAN的数量并不总是相同。上面的葡萄和苹果的例子都有2的行距，但情况并非总是如此。 
 
 
 
 2.可以解释这个语法：
 $ b $ pre $  return（
 isNaN（a）|| isNaN（b）
a> b：+ a> + b 
）？ 
逆？ -1：1：
逆？ 1：-1;

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

 逆？ -1：1：
逆？ 1：-1;

测试用例

 < table id =resultsTable> 
< thead> 
< tr> 
< th>水果< /> 
< th onclick =sortColumn（1）>数量< / th> 
< th onclick =sortColumn（2）> Rate< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td rowspan =4>葡萄< / 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>甜瓜< / 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>甜瓜< / 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>


解决方案

代码工作的条件：




  • 包含 td 的列与 rowspan 必须全部位于表格的左侧

  • 这些列中的所有 td s 必须具有 rowspan ，即使它是1

  • 要排序的行组是使用这些行中最右边的行列（但可以轻松更改）



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

  var inverse = false; 
 
函数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 
）？
逆？-1：1：
逆？ 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 s

  • 保存这些 td 的位置，包括左偏移

  • 这些 td s被其原始偏移过滤，只能用于最右边的元素

  • tr s与每个保存的 td 相关，均使用通缉栏进行排序

  • 所有<$ code> td s with rowspan 最终会在必要时移回原来的位置





关于问题2，我只会说bartlaarhoven的回答，代码也可以写成如下形式：

  return（
（isNaN（a）|| isNaN（b）？a> b：+ a> + b）？ 1：-1 
）*（inverse？-1：1）;

您可以轻松阅读 inverse 以反转结果。


Following this post jQuery table sort (github link: https://github.com/padolsey/jQuery-Plugins/blob/master/sortElements/jquery.sortElements.js), I am successfully sort columns, however it does not work in the case of rowspan: For example, case like this

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

When I click on the second column, it try to sort 

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

(Expected result should be that it should only sort within each rowspan

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

or

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

)

so either which as you can see is not correct, please any jQuery guru help me fix this problem. Here is my code

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;
    }
}

Question:

1.How do I sort this with rowspan. THE NUMBER OF ROWSPAN IS NOT ALWAYS THE SAME. The above example both Grape and Apple have rowspan of 2, but this is not always the case.

2.Can any explain this syntax:

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

So I can see that if either a or b is not a number, then do string comparison otherwise do number comparison, but I dont understand the

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

Test cases

<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>

解决方案

Conditions for the code to work:

  • Columns containing tds with rowspan must all be on the left of the table
  • All the tds in these columns must have a rowspan, even if it's 1
  • The groups of rows to sort are made with the rightmost of these columns (but it can easily be changed)

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;
}

Quick explanations:

  • Finding all tds with rowspan
  • Positions of these tds are saved, including left offset
  • These tds are filtered by their original offset to work only with the rightmost ones
  • trs related to each kept td are sorted using the wanted column
  • All tds with rowspan are finally moved back to their original position if necessary

About question 2, I will only complete bartlaarhoven's answer by saying, the code can also be written like the following:

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

You can easily read that inverse is used to inverse the result.

这篇关于jQuery sortColumns插件：如何使用rowspan正确排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆