应用 您有一个项目 1到n的列表,您希望用户排名他们n到1.每个项目都有截止日期。第1项具有最近的到期日,项目n为最近到期日。您希望用户在项目截止日期过去之前按期望的排名顺序对项目进行排序/排序。您不希望用户在截止日期过后对项目进行排名/排序,但您仍希望显示所有排序等级的项目。
要将项目到期的项目分开,请将它们加载到两个单独的表格中。
- 项目到期表:顶部表格仅包含用户可按排序排名的到期项目。订单按等级顺序降序加载。 (排名顺序是下面jsFiddle示例中的可见数字)
- 项目过期表:底部表格包含用户无法再排序的项目。一旦一个项目过期并进入该表,它将保留先前保存的等级。订单按项目顺序向上计数......与到期日期顺序递增相同。
示例假设您有一个列表,其中包含您希望用户排名的十个项目。在任何项目过期之前,您将只有这样的项目到期日显示如下:http://jsfiddle.net/jpl1618/DdShg/您有列出的项目1-10和截止日期(截止日期未显示)。屏幕上显示的数字是降序排名。
项目到期表中的排名始终按降序排列,以便用户可以将项目向上移动到更大的置信度或降低到更低的置信度。排名计数将始终与项目计数匹配,但它们从对立面开始。例如,第1项将从排名位置10(在顶部)开始,第10项在排名位置1(在底部)开始。
一旦物品过期,底部表格将显示并保留那些过期物品。假设用户对项目进行了排序,保存了这些项目,其中一半已经过期。您可能将表格显示为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
另一个小问题:为什么表格行在点击下排序时会切换颜色?单击一行时,如何让行不闪烁到另一种颜色?
答案 0 :(得分: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。