0

应用程序 您有一个项目列表1 到 n 并且您希望用户排名。每个项目都有一个截止日期。项目 1 的截止日期最近，项目 n 的截止日期最晚。您希望用户在项目的到期日期到期之前按照他们想要的排名顺序对项目进行排名/排序。您不希望用户能够在到期日期过后对项目进行排名/排序，但您仍然希望显示所有项目及其排序的排名。

要将到期项目与逾期项目分开，请将它们加载到两个单独的表中。

--到期项目表：顶部表仅包含用户可以通过排序进行排名的到期项目。顺序按降序排列。（排名顺序是下面 jsFiddle 示例中的可见数字）

--过期项目表：底部的表包含用户无法再排序的过期项目。一旦项目过期并进入此表，它就会保留先前保存的排名。该顺序是按项目顺序向上计数的......与到期日顺序升序相同。

示例假设您有一个包含十个项目的列表，您希望用户对其进行排名。在任何项目过期之前，您将只有项目到期表显示如下：http: //jsfiddle.net/jpl1618/DdShg/您列出了 1-10 和到期日升序的项目（到期日未显示） . 屏幕上显示的数字是降序排列的排名。

项目到期表中的排名始终按降序排列，以便用户可以将项目上移至更高的置信度或下移至更低的置信度。排名计数将始终与项目计数匹配，但它们从相反开始。例如，项目 1 将从排名位置 10（顶部）和排名位置 1（底部）的项目 10 开始。

一旦项目过期，底部表格将显示并保存这些过期项目。假设用户对项目进行了分类，保存了它们，其中一半逾期了。您可能会像这样显示表格http://jsfiddle.net/jpl1618/Y4tjJ/请注意，底部表格按顺序包含项目 1 到 5。这是因为底部表格按项目顺序升序对它们进行排序，这与到期日升序相同。另请注意，用户已将项目 4 和 5 排序到 10 和 6 的排名位置。当重新排列项目到期表时，不能再使用这些排名位置。

过期项目示例在这里 jsfiddle.net/jpl1618/Y4tjJ/ 我应该能够将项目 8（在位置 5）上移一个到位置 7，这会将项目 10（在位置 7）下移到位置 5。所以你会有结果：

item 9 => rank 9
item 6 => rank 8
item 8 => rank 7
item 10 => rank 5
item 7 => rank 4

或者我应该能够将项目 8 一直移动到位置 9 的顶部，这会将项目 9、6、10 向下移动一个位置。然后你会有：

item 8 => rank 9
item 9 => rank 8
item 6 => rank 7
item 10 => rank 5
item 7 => rank 4

请注意，无论项目顺序如何，排名顺序都保持相同的降序。

问题如何更改当前的 JS 代码以允许用户对项目到期表中的项目进行排名/排序，该表中包含按降序排列的加载排名位置？在示例中，排名顺序应始终显示 9、8、7、5、4，但项目可以移动到这些位置。

count = 5
countL = 5

L stands for locked

另一个小问题：为什么点击排序时表格行会切换颜色？单击一行时，如何使该行不闪烁为另一种颜色？

4

1 回答 1

0

我认为鉴于 n 是一个很小的数字，我们可以假设 O(n^2) 解决方案是可以的。

因此，您可以使用 map 函数构建索引映射：

var myIndexMap = actualyUserdSortedArray.map( function (x) { 
                           return originalArray.indexOf(x); 
                 } );

然后，一旦您构建了此索引映射，您就可以使用此映射以用户定义的顺序访问您的数组 originalArray：

 var ithItem =  originalArray[myIndexMap[i]];

基于这个想法，我修改了你的小提琴，你可以在这里看到：http: //jsfiddle.net/Y4tjJ/3/ 我添加了第一行来显示当前的映射数组，这是在每次订单更改时重新构建的。

编辑：鉴于您所寻求的行为的相对复杂性，我宁愿采用一种更加面向代码的方式来实现这一点。您需要为每个项目处理 4 个信息：id (1-n)、isLocked(true/false)、dueDate(Date)、userOrder(1-c 其中 c 是非锁定计数)。然后上面的列表是 AllItems.filter(function(x) { return x.isLocked } ) .sort(function(a,b) { return (a.userOrder - b.userOrder) } ); 下面的列表是 AllItems.filter(function(x) { return ! x.isLocked } );

因为事情很快就会变得更复杂：从某种永久存储（localStorage 或服务器文件）加载列表后，如果使用简单 js 对象的 JSON 可能会更简单。
然后你将有 3 个事件需要处理。1）你必须不时检查未锁定是否已过。如果过去了，则将所有 <已过去的 userOrder 的 userOrder 增加一。
2) 必须有某种方式在项目过去之前“使用”项目，否则用户没有兴趣对项目进行排序。如果现在使用项目，则应将其设置为锁定。userOrder 的更新与 1) 相同。3）然后您必须处理已排序的更改事件，以更新已解锁项目的 usedOrder 。

祝你好运。

于 2013-07-15T21:27:15.800 回答