JQuery UI保存排序列表

Question

我知道這個問題之前已經被問過，但是這些解決方案並沒有爲我工作。我正在嘗試將新的項目順序保存到數據庫。

我非常相當簡化它，但這是它的基本思想。我有一個嵌入了可排序列表的表單。

<form id="itemlist"> 
    <ul id="itemsort"> 
     <li id="Item_1">Item<input type="hidden" name="itemid[]" value="itemsRowID01"/></li> 
     <li id="Item_2">Item<input type="hidden" name="itemid[]" value="itemsRowID02"/></li> 
     <li id="Item_3">Item<input type="hidden" name="itemid[]" value="itemsRowID03"/></li> 
     <li id="Item_4">Item<input type="hidden" name="itemid[]" value="itemsRowID04"/></li> 
    </ul> 
</form> 

我有jQuery和JQuery用戶界面加載和下面的代碼使排序列表功能和崗位項ID和新的排序順序PHP腳本。 「編輯器」變量是一個公共變量，它在加載時可以正常工作。排序工作正常，但是當我重新排列列表時，帖子的neworder值似乎沒有改變。

//sorting feature 
    $("#itemsort").live('hover', function() { 
     $("#itemsort").sortable({ 
      opacity:.5, 
      update : function() {   

       var neworder = $('#itemsort').sortable('serialize'); 
       var inputs = serializePost('#itemlist'); 

       $.post("core/actions.php",{ 
        'order': editor, 
        'inputs': inputs, 
        'neworder': neworder},function(){ 

         alert("Order saved.", 1); 

       }); 
      } 
     }); 
    }); 

在actions.php ...

if(isset($_POST['order'])){ 

      //set a variable for each post 
      $batchid = $_POST['inputs']['itemid']; 

      parse_str($_POST['neworder'], $neworder); 

      //count the number of entries to be ordered 
      $count = count($batchid);   

      //use the count to create an incremental loop for each item to be updated. 
      $i=0; 
      while ($i <= $count) { 

    $query ="UPDATE {$_POST['order']} SET order=$neworder[item][$i] WHERE id=$batchid[$i]"; 
       ++$i; 
      } 
     } 

我不知道爲什麼我得到每個項目的順序不會改變。

任何想法？

-L

Answer 1

$("#list").live('hover', function() { 
     $("#list").sortable({ 

      update : function() { 

       var neworder = new Array(); 

       $('#list li').each(function() {  

        //get the id 
        var id = $(this).attr("id"); 
        //create an object 
        var obj = {}; 
        //insert the id into the object 
        obj[] = id; 
        //push the object into the array 
        neworder.push(obj); 

       }); 

       $.post("pagewhereyouuselist.php",{'neworder': neworder},function(data){}); 

      } 
     }); 
    }); 

然後在你的PHP文件，或在這個例子中 「pagewhereyouuselist.php」

$neworderarray = $_POST['neworder']; 
//loop through the list of ids and update your db 
foreach($neworderarray as $order=>$id){  
    //you prob jave a connection already i just added this as an example 
    $con = mysql_connect("host","username","password"); 

    if (!$con){ 
     die('Could not connect: ' . mysql_error()); 
    } 

    mysql_select_db("my_db", $con); 

    mysql_query("UPDATE table SET order = {$order} WHERE id = {$id}"); 
    mysql_close($con); 

} 

應該這樣做 我沒有測試它，因爲它是一個示例連接。我實際使用的實際腳本更具體到我的程序這是一個簡化的版本，以顯示概念

Answer 2

試試這個：

你的HTML領域

<form id="itemlist" method="POST"> 
    <ul id="itemsort"> 
     <li id="Item_1">Item 1<input type="hidden" name="itemid[]" value="itemsRowID01"/></li> 
     <li id="Item_2">Item 2<input type="hidden" name="itemid[]" value="itemsRowID02"/></li> 
     <li id="Item_3">Item 3<input type="hidden" name="itemid[]" value="itemsRowID03"/></li> 
     <li id="Item_4">Item 4<input type="hidden" name="itemid[]" value="itemsRowID04"/></li> 
    </ul> 
</form> 

JS發送訂單：

$("#itemsort").live('hover', function() { 
    $("#itemsort").sortable({ 
     update: function() {   
      var inputs = $('#itemlist').serialize(); 
      $.post("./jq-ui-test.php", inputs, alert("Order saved.")); 
     } 
    }); 
}); 

保存順序：

if(isset($_POST['itemid']) && is_array($_POST['itemid'])) { 
    foreach($_POST['itemid'] as $order => $item) { 
     $order = intval($order); 
     $item_esc = mysql_real_escape_string($item); 
     $sql_query = "UPDATE {$_POST['order']} SET order={$order} WHERE id = '{$item_esc}'"; 
    } 
} 

另外，如果你想要的啓動順序從1開始（而不是從0）變化$order = intval($order);到$order = intval($order) + 1;