假设我有一个这样的简单表:
unique ID | url | order
unique ID
像往常一样自动给出,url
是必须提交的东西。但是我怎样才能安排有序?
我希望用户能够url
按照他想要的顺序排列这些 s。
我怎样才能做到这一点?最后插入的项目始终具有最后一个订单号,如果我将订单号为 5 的项目移动到 1,则所有项目的订单号都会更改。我想在 JavaScript 中通过某种拖放来实现它,但现在这并不重要。
我遇到的问题是 PHP 方面。更改有序数字。
假设我有一个这样的简单表:
unique ID | url | order
unique ID
像往常一样自动给出,url
是必须提交的东西。但是我怎样才能安排有序?
我希望用户能够url
按照他想要的顺序排列这些 s。
我怎样才能做到这一点?最后插入的项目始终具有最后一个订单号,如果我将订单号为 5 的项目移动到 1,则所有项目的订单号都会更改。我想在 JavaScript 中通过某种拖放来实现它,但现在这并不重要。
我遇到的问题是 PHP 方面。更改有序数字。
你可以有一个下拉菜单或其他东西来决定显示数据的顺序是升序还是降序。然后在您的 SQL 查询中以ORDER BY url DESC
or结束ORDER BY url ASC
你可以很容易地在 jquery UI 中使用 sortable 来实现它,它会按顺序为你提供一个 id 数组,从那里它只是一个 $.post 到你的 php 页面的例子,它只是迭代数组(因此你知道顺序value) 更新行并设置新的订单值。
您在 jquery 中的停止函数看起来像:
stop: function(event, ui) {
var ids = [];
ui.item.parent().children().each(function(n, element) {
ids[ids.length] = element.id;
});
$.post("/somelocation", {
orderedids: ids.toString()
} );
}
我正是这样做的,而且效果很好。我对这样的界面使用 jQuery UI Sortable:
js:
$(document).ready(function(){
function renumberSortables(){
// Re-number the ordering i the list.
$("ul.sortable").each(function(){
$(this)
.find("li")
.each(function(index){
$(this).find("input.ordering").val(index);
});
});
}
$("ul.sortable").sortable({
opacity: 0.8,
stop: renumberSortables
});
}
html/php:
<ul class="sortable">
<?php foreach($sortables as $index => $sortable){ ?>
<li>
<input class="ordering" type="hidden" name="sortable[<?= $index ?>][ordering]" value="<?= $sortable.ordering ?>">
(Your stuff here…)
</li>
<?php } ?>
</ul>