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

Question

我正在尝试将 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>

按收藏排序应该返回：

1. 乔的小屋
2. 妈妈的
3. 热狗摊
4. 弗里克弗拉克

排序应该返回：

1. 弗里克弗拉克
2. 妈妈的
3. 热狗摊
4. 乔的小屋

然后回到按距离排序：

1. 热狗摊
2. 乔的小屋
3. 弗里克弗拉克
4. 妈妈的

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

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

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

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

Answer 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'); });