我有一个HTML列表,我想让用户能够通过拖放重新排序,然后将他们的更改提交到数据库。
我对所有数据库内容感到满意,但我正在努力使用Javascript / JQuery。
我目前有jQuery UI Sortable工作正常(所以其他并通过拖放重新排序元素),但我不知道怎么去获取新的订单SUBMIT。
有人可以帮忙吗?如果您需要更多信息,请说明。谢谢!
答案 0 :(得分:6)
通过AJAX调用将该数据发送到您的应用程序,例如
$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
axis: 'x',
update: function(event, ui){
var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
$.ajax({
url: '/events/update-tab-order',
data: data,
type: 'POST',
mode: 'abort'
});
}
});
唯一棘手的部分是您必须以groupname_identifier
的格式在列表项上指定ID。例如:
<div id="TabContainer">
<ul>
<li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
<li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
...etc
</ul>
...tab content goes here
</div>
然后,当您的应用程序收到POST数据时,它将是一个如下所示的数组:
$_POST['MyTabs']
array(
0 => '123',
1 => '124'
)
答案 1 :(得分:1)
看看@ serialize(),我没有明确的提交按钮就做了同样的事情,但是使用mootools直接通过ajax注入了订单。
<script language="javascript">
<!--
window.addEvent('domready', function() {
var thisSortables = new Sortables($('list'), {
constrain: true,
clone: true,
revert: true,
onStart: function() {
$('confirm').set('html', '');
},
onComplete: function() {
this.serialize(function(el, index) {
var updateOrderRequest = new Request.HTML({
url: '../module/tools/admgn/dbsorter.php',
method: 'post',
data: {'itemID': el.id.replace("item_",""), 'new_pos':(index+1)}
}).send();
});
$('confirm').set('html', 'Reihenfolge erfolgreich gespeichert.');
}
});
});
-->
</script>
也许你会明白如何让它发挥作用。
答案 2 :(得分:1)
由于<UL>
和<OL>
不是表单元素,因此您无法通过post方法,我希望您可以通过此方法完成
http://quasipartikel.at/multiselect_next/
将所有选项设为选中状态,并将可用部分隐藏为隐藏