0

jQuery の並べ替え可能なリストを使用してデータベースを更新する例は多数あります。これには、リストをシリアル化し、そのシーケンスidに基づいてデータベースを更新することが含まれます。id

問題は、データベースへの挿入と更新の両方にjQueryのソート可能な接続リストを使用したいということです。2 つのリストがあります。

ソースリスト:

<ul id="admin_news_all">
    <li id="2588" class="ui-draggable">
    <li id="2678" class="ui-draggable">
    <li id="2680" class="ui-draggable">
    <li id="2690" class="ui-draggable">
    <li id="2692" class="ui-draggable">
    <li id="2694" class="ui-draggable">
    <li id="2696" class="ui-draggable">
    <li id="2698" class="ui-draggable">
    <li iid="2696" class="ui-draggable">
    <li id="2704" class="ui-draggable">
</ul>

対象リスト:

<ul id="news_box_top" class="ui-sortable">
    <li class="ui-draggable" style="display: list-item; id="2686"">
    <li class="ui-draggable" style="display: list-item; id="2496"">
</ul>

jQuery を次のように初期化しました。

$("#news_box_top").sortable()
$("#admin_news_all li").draggable({
    helper: "clone",
    revert: "invalid",
    connectToSortable:'#news_box_top'
});

buttonここで、アイテムをソース リストからターゲット リストに移動し、要素をクリックしてデータベースを変更 (挿入操作と更新操作の両方) したいと考えています。

対象データベース：MySql

id int(12), position int(2)
4

1 に答える 1

0

まず、2番目のリストは次のようにする必要があると思います:

<ul id="news_box_top" class="ui-sortable">
  <li class="ui-draggable" id="2686" style="display: list-item; ">
  <li class="ui-draggable" id="2496" style="display: list-item; ">
</ul>

次に、データベースを更新する方法を知っていると仮定します。並べ替えられた id の配列を作成する手を与えるだけです。

ids = [];
$('#news_box_top li.ui-draggable').toArray().forEach( function (el) {
  // Here I assume the element has an id
  ids.push( $(el).attr('id') );
});
于 2012-12-09T00:54:22.663 に答える