【问题标题】:Javascript: sorting objectsJavascript:对对象进行排序
【发布时间】:2011-06-21 16:03:13
【问题描述】:

当我碰壁时,我正在寻找一些关于如何完成此任务的想法。

我有一个表格,显示从 MySQL 数据库中提取的数据。该表以一行 13 个单元格的顺序排列,其中显示数据,然后是一个单元格的隐藏行。通过单击前一行的单元格索引 1 中的链接来切换隐藏行。像这样:

第 1 行:单击此单元格以显示第 2 行:另一个单元格:另一个单元格:ad nauseum 直到我们到达 13: 隐藏的第 2 行 第 3 行:单击此单元格以显示第 2 行:另一个单元格:另一个单元格:ad nauseum 直到我们到达 13: 隐藏的第 4 行 ...

所以我使用 jquery 拉出所有行,然后设置一个测试以确定它是显示行还是隐藏行,如果显示了,那么我将该行和下一行放入一个对象中,然后将该对象放入另一个对象,像这样:

//this function is for sorting the data in the table
$(".sort").click(function() { 

        //get what column we are sorting by
        var sortBy = $(this).attr('sortBy');

        //set the colnum to sort by 
        if (sortBy == "itemname") { 
            var sortCol = 1;
        } else if (sortBy == "priority") { 
            var sortCol = 2;
        } else if (sortBy == "livedate") { 
            var sortCol = 10;
        } else if (sortBy == "status") { 
            var sortCol = 11;
        } else if (sortBy == "designer") { 
            var sortCol = 12;
        } 

        //get the table data
        var tableData = getTableData("NO", "null", "YES", sortBy); 

        //get all the rows
        var tableRowArray = $("#productTableBody tr");

        //declare new table object
        var tableObj = new Object;
        var rowPackage = new Object;

        //loop through tableRowArray and put rows into packages of two, the main row and the hidden row
        for(var t=0; t<tableRowArray.length; t++) { 
            if($(tableRowArray[t]).children(":first").attr('class') == "colorCode") { 

                rowPackage[t] = $(tableRowArray[t]).children();
                rowPackage[t+1] = $(tableRowArray[t+1]).children();

                //dump rows into tableObj
                tableObj[t] = rowPackage;
            }

            //clean out rowPackage
            rowPackage = {};
        }


        var x=-2;
        for(thisRow in tableObj) {
            x = x+2;
            var sortItem = $(tableObj[thisRow][x][sortCol]).html();

                            //ack! -->getting stumped here

        }       
    });

我还收集了用户想要排序的列。然后我可以找到用户想要排序的单元格。我知道我需要提取该信息,放入数组并排序,但我想我对如何将排序后的数组应用回我的 tableObj 感到困惑,这样我就可以重写表格正文 HTML ......我被难倒的原因是一些要排序的数据将是相同的,例如如果由设计者排序,数据可能是这个{“a”,“b”,“c”,“c”,“a”,“a”,“ “a”},排序时将是 a、a、a、a、b、c、c,但由于有些是相同的,我无法返回并循环遍历对象并找到与第一项匹配的条目我的排序后的数组,有 4 个元素会匹配。那么如何确定对象中的哪个条目与排序列表中的第一个 a 匹配?

提前致谢。

【问题讨论】:

    标签: javascript arrays sorting object


    【解决方案1】:

    这是一个艰难的过程,但我想这辈子几乎没有什么是不可能的。

    我会这样(使用Underscore library

    var packs = [];
    // assuming you always have even number of tr's
    $("#productTableBody tr:odd").each(function(i, tr){
        packs.push( {main: tr, sub: tr.next()} ); 
        // tr.next() will be :even, so it's not yet selected
    
        // now detach rows from the table
        // note the order - next() wont work otherwise
        tr.next().remove();
        tr.remove();
    });
    
    var sortedPacks = _(packs).sortBy(function(pack){
        return $(pack.main).find('td:nth('+sortCol')').text();
    });
    
    // now in sortedPacks you have touples of rows sorted by "main" rows sortCol column
    // and you would probably want to restore the table now
    $.each(packs, function(i, pack){
        $("#productTableBody").append(pack.main).append(pack.sub);
    });
    

    代码可能无法完美反映您的情况,但我想您应该能够理解主要思想。

    【讨论】:

    • 仅供参考,正常的数组排序适用于此。您只需要比较来自两个不同行的单元格。
    • 谢谢,我需要整理一下你的代码(不好的双关语:D),让它适应我的情况......
    【解决方案2】:

    在这里得到你想要的东西并不是很容易,但这至少可以让你对数据进行排序。

    首先将您的数据收集到一个数组中,例如data,每一行可以由一个数组或一个对象表示。

    现在只需调用

    data.sort(function(a, b){
         // select the two values from a and b depending on the column to sort by
         a = a[colNr];
         b = b[colNr];
         return a == b ? 0 : a < b ? -1 : 1;
     });
    

    现在您可以根据排序后的数组轻松重建表。

    如果您在数据收集期间还添加了对数组/对象的行的引用,那么您现在可以从表中删除所有行,遍历 data 数组,然后将每个节点添加回表中。

    【讨论】:

    • 对拉取数据的数组进行排序不是问题,将其关联回拉取数据的行是因为存在重复值。
    • 这有什么问题?您可以轻松地将对 DOMElement 的引用添加到数组/对象,或者每次都简单地删除并重建表。
    猜你喜欢
    • 2011-10-04
    • 2021-08-19
    • 2018-08-18
    • 1970-01-01
    • 2011-11-16
    • 2018-03-18
    • 2011-05-12
    • 2013-07-15
    • 2022-06-17
    相关资源
    最近更新 更多