Tinysort 按多个属性排序（多于1个）

Posted 2023-05-09

【中文标题】Tinysort 按多个属性排序（多于1个）

【英文标题】：Tinysort sort by multiple attributes (more than 1)

【发布时间】：2011-11-24 15:56:31

【问题描述】：

我正在尝试将 tinysort 用作我使用 jquery mobile 构建的移动应用程序的一部分。我的应用查找用户位置附近的位置，我希望能够快速对结果进行排序，而不必花时间重新查询数据库。

所以，我想要做的是能够使用 tinysort 根据用户在该区域是否有最喜欢的地方然后按距离重新排序结果，另外我希望能够按属性排序“去过那里”，如果用户标记了他们去过某个地方。

这就是我想做的： 按收藏排序：

$("ul#places>li").tsort('',(order:"desc",attr:"myfav",order:"asc",attr:"dist"));

按去过那里排序：

$("ul#places>li").tsort('',(order:"desc",attr:"beenthere",order:"asc",attr:"dist"));

默认排序：//这很简单，没有问题：

$("ul#places>li").tsort('',order:"desc",attr:"dist");

使用默认列表顺序，例如：

<ul id="places">
  <li myfav="0" beenthere="0" dist=".02">Hot Dog Stand</li>
  <li myfav="1" beenthere="0" dist=".08">Joe's Shack</li>
  <li myfav="0" beenthere="1" dist=".10">Frick frack</li>
  <li myfav="1" beenthere="1" dist=".15">Mama's</li>
</ul>

按收藏排序应该返回：

乔的小屋 妈妈的 热狗摊 弗里克弗拉克

排序应该返回：

弗里克弗拉克 妈妈的 热狗摊 乔的小屋

然后回到按距离排序：

热狗摊 乔的小屋 弗里克弗拉克 妈妈的

我在上面对 tsort 的调用无法与多个属性选择器一起使用，或者我的语法错误，或者您无法根据多个条件进行排序。

感谢任何关于我如何使用 tsort 或其他解决方案完成此任务的想法！

【参考方案1】：

我知道 Mottie 的解决方案有效，但它似乎有点复杂......调用 tsort 两次对我有用：

listOfItems.tsort(data:sorter, order:direction)
            .tsort(data: sorterAlt, order:direction)

在你的情况下，它会是（如果'' 只是指选定的项目，你可以删除它们）：

$("ul#places>li").tsort(order:"desc",attr:"myfav")
                  .tsort(order:"asc",attr:"dist")
$("ul#places>li").tsort(order:"desc",attr:"beenthere")
                  .tsort(order:"asc",attr:"dist")

按照 Mottie 的建议，还可以为 html5 使用 data-attrname 样式。您始终可以在 tsort 中使用 data: attrname。

希望它仍然可以帮助您或其他人！

【参考方案2】：

您上面的结果实际上是按“asc”而不是“desc”排序的。无论哪种方式，我都不认为 TinySort 内置了多个属性排序，所以下一个最好的办法就是组合你想要排序的属性。

由于距离是默认排序，我认为最好将它与来自其他属性的数字值结合起来。例如，myfav 属性设置为“1”，表示它是真的（我假设这是真的，但这似乎是你的意图）。如果我把这个放在距离的前面，它的值最终会高于零的错误值 - 这与您想要的排序方向相反，所以我将真实值指定为“0”而不是“1”和一个假值是“9”而不是“0”。我知道这听起来令人困惑，但请检查一下：

按喜好排序：

Location         fav been dist  combined
1. Joe's Shack    1    0   .08    0.08
2. Mama's         1    1   .15    0.15
3. Hot Dog Stand  0    0   .02    9.02
4. Frick frack    0    1   .10    9.10

按去过那里排序：

Location         fav been dist  combined
1. Frick frack    0    1   .10    0.10
2. Mama's         1    1   .15    0.15
3. Hot Dog Stand  0    0   .02    9.02
4. Joe's Shack    1    0   .08    9.08

我希望说明清楚...无论如何，这是一个demo，我在其中进行了排序顺序切换，以及我使用的代码：

var list = $("ul#places>li"),
    sortit = function(el, att)
        $(el).toggleClass('desc');
        var combo,
            order = $(el).is('.desc') ? 'desc' : 'asc';
        // make combo attribute
        if (att !== 'dist') 
            list.each(function()
                // attr value = 1 means true, so assign it as a zero
                // attr value = 0 means false, so assign it as a nine
                // these numbers + distance, makes sure the lower
                // values are sorted first
                combo = $(this).attr(att) === '1' ? '0' : '9';
                $(this).attr('combo', combo + $(this).attr('dist'));

            );
            att = 'combo';
        
        list.tsort('',(order:order,attr:att));
    ;

// Sort by favorite:
$('button:contains(Fav)').click(function() sortit(this, 'myfav'); );

// Sort by favorite:
$('button:contains(Been)').click(function() sortit(this, 'beenthere'); );

// Sort by default
$('button:contains(Dist)').click(function()sortit(this, 'dist'); );

【讨论】：

哦，我忘了提，最好使用以data- 开头的属性以更符合HTML5 规范，因此请使用data-myfav、data-beenthere 和data-dist你现在所拥有的。

很好的解决方案 - 谢谢！我所做的唯一调整是我添加了 999 而不是 9，因为距离以英里为单位，所以我想确保它总是正确排序。我还删除了排序顺序的切换。