ajax、jquery 可排序,订单更新
ajax, jquery sortable, order updates
我想要实现的是更新数据库中幻灯片的顺序,方法是更改概览中的 'order' 输入值(每一行都有自己的输入),
或通过拖动行。
所以我首先修复了这个输入,并将 ajax 请求放在一个函数中。此函数需要行本身和新订单值,请参阅 ajax_order(row, newval);.
然后我使行可排序并添加了一个更新:函数:
$( ".rows-container" ).sortable();
$(".rows-container").sortable({
update: function( ) {
$('.rows-container').children().each(function(i, el){
ajax_order($(this), i + 1);
$(this).find('.overview-number').val(i+1);
});
}
});
现在我正在遍历行,并使用索引作为新的订单号。它工作正常,但每次拖动 1 行时,它都会更新所有行.. 即使一行实际上留在原地。
另外,如果保存了 30 张幻灯片(其中一些可能被标记为不活动),它可能不是很有效。这样做的好方法是什么?对一些提示感到满意
更新:
当我将它添加到函数中时,它会在我开始拖动时为我提供当前(旧)顺序,还有 1 个额外的 console.log 'undefined'.. 所以现在我有 5 console.logs 并且实际只有 4 行。如果我们不需要跟踪旧订单或使用 start:
将是一件好事
start: function(event, ui) {
$('.rows-container').children().each(function(i, el){
console.log($(this).find('.overview-number').val());
});
},
更新:
所以我整晚都在费解xD zzzZZzz。一直在添加 php 函数并再次删除,添加存储旧顺序 + 索引和狗屎的 JS 对象。在开始和停止中尝试使用不同类型的数组:
它变得一团糟,所以我决定在纸上写下一些场景.. 并且认为一个好的方法是跟踪最后使用的 'order'。这是结果
$( ".rows-container" ).sortable();
$(".rows-container").sortable({
update: function() {
var last_val = 0;//used to compare with the next row and determine it's value
//if the next row has lower value as the one before, it needs to become higher value
//note that the view always gets loaded on order ASC
$('.rows-container').children().each(function(i){
//the current row's order
var current = parseInt($(this).find('.overview-number').val());
if(i == 0 || current > last_val){
if(current < last_val+5){ //row doesnt need update, yee!!!!
last_val = current;
//makes sure the values dont add up too much, when the difference gets too big
}else{
current = last_val+1;
ajax_order($(this), current);
$(this).find('.overview-number').val(current);
last_val = current;
}
//if the next row has lower value as the one before, it needs to become higher value
}else if(current <= last_val){
current = last_val+1;
ajax_order($(this), current);
$(this).find('.overview-number').val(current);
last_val = current;
}
});
},
});
像火车一样运行...但是如您所见,其中有一些重复,即运行 ajax 的部分。我试图将它放入该对象的函数中并保持 'last_value' 和 'current' 可用,但还没有成功。
您可以将开始和结束位置传递给您的后端服务,然后在服务器上调整该范围内的记录。这样效率会更高:
var initialPos, finalPos;
$("#sortable")
.sortable()
.on("sortstart", function( event, ui ) {
initialPos = ui.item.index() + 1; // when using a 1-based index
//console.log("Item started at position", initialPos);
})
.on("sortupdate", function( event, ui ) {
finalPos = ui.item.index() + 1; // when using a 1-based index
console.log(ui.item.attr('id'), "moved from position", initialPos, "to", finalPos);
// call ajax function here, passing in initialPos & finalPos
// server will need to re-order values for all elements between (and including) initialPos & finalPos
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
<li id="itm1">Item 1</li>
<li id="itm2">Item 2</li>
<li id="itm3">Item 3</li>
<li id="itm4">Item 4</li>
<li id="itm5">Item 5</li>
</ul>
我想要实现的是更新数据库中幻灯片的顺序,方法是更改概览中的 'order' 输入值(每一行都有自己的输入), 或通过拖动行。
所以我首先修复了这个输入,并将 ajax 请求放在一个函数中。此函数需要行本身和新订单值,请参阅 ajax_order(row, newval);.
然后我使行可排序并添加了一个更新:函数:
$( ".rows-container" ).sortable();
$(".rows-container").sortable({
update: function( ) {
$('.rows-container').children().each(function(i, el){
ajax_order($(this), i + 1);
$(this).find('.overview-number').val(i+1);
});
}
});
现在我正在遍历行,并使用索引作为新的订单号。它工作正常,但每次拖动 1 行时,它都会更新所有行.. 即使一行实际上留在原地。
另外,如果保存了 30 张幻灯片(其中一些可能被标记为不活动),它可能不是很有效。这样做的好方法是什么?对一些提示感到满意
更新:
当我将它添加到函数中时,它会在我开始拖动时为我提供当前(旧)顺序,还有 1 个额外的 console.log 'undefined'.. 所以现在我有 5 console.logs 并且实际只有 4 行。如果我们不需要跟踪旧订单或使用 start:
将是一件好事start: function(event, ui) {
$('.rows-container').children().each(function(i, el){
console.log($(this).find('.overview-number').val());
});
},
更新:
所以我整晚都在费解xD zzzZZzz。一直在添加 php 函数并再次删除,添加存储旧顺序 + 索引和狗屎的 JS 对象。在开始和停止中尝试使用不同类型的数组:
它变得一团糟,所以我决定在纸上写下一些场景.. 并且认为一个好的方法是跟踪最后使用的 'order'。这是结果
$( ".rows-container" ).sortable();
$(".rows-container").sortable({
update: function() {
var last_val = 0;//used to compare with the next row and determine it's value
//if the next row has lower value as the one before, it needs to become higher value
//note that the view always gets loaded on order ASC
$('.rows-container').children().each(function(i){
//the current row's order
var current = parseInt($(this).find('.overview-number').val());
if(i == 0 || current > last_val){
if(current < last_val+5){ //row doesnt need update, yee!!!!
last_val = current;
//makes sure the values dont add up too much, when the difference gets too big
}else{
current = last_val+1;
ajax_order($(this), current);
$(this).find('.overview-number').val(current);
last_val = current;
}
//if the next row has lower value as the one before, it needs to become higher value
}else if(current <= last_val){
current = last_val+1;
ajax_order($(this), current);
$(this).find('.overview-number').val(current);
last_val = current;
}
});
},
});
像火车一样运行...但是如您所见,其中有一些重复,即运行 ajax 的部分。我试图将它放入该对象的函数中并保持 'last_value' 和 'current' 可用,但还没有成功。
您可以将开始和结束位置传递给您的后端服务,然后在服务器上调整该范围内的记录。这样效率会更高:
var initialPos, finalPos;
$("#sortable")
.sortable()
.on("sortstart", function( event, ui ) {
initialPos = ui.item.index() + 1; // when using a 1-based index
//console.log("Item started at position", initialPos);
})
.on("sortupdate", function( event, ui ) {
finalPos = ui.item.index() + 1; // when using a 1-based index
console.log(ui.item.attr('id'), "moved from position", initialPos, "to", finalPos);
// call ajax function here, passing in initialPos & finalPos
// server will need to re-order values for all elements between (and including) initialPos & finalPos
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
<li id="itm1">Item 1</li>
<li id="itm2">Item 2</li>
<li id="itm3">Item 3</li>
<li id="itm4">Item 4</li>
<li id="itm5">Item 5</li>
</ul>