jquery可排序保存到数据库不能正常工作

Question

我试图将jquery可排序功能并入我的网站，并保存在数据库中的位置给我各种各样的头痛......我一直在为此奋斗3天现在，我似乎无法正确地完成这项工作。

就目前而言，它将位置保存到数据库中，但不保存您期望的顺序或位置。意思是，如果我将位置0中的项目移动到位置1，它将以不同的顺序在数据库中保存位置。看看一个真人版here。

这里是我的代码...

index.php文件：

<div id="container"> 
    <?php 
     require_once 'conn.php'; 
     $q = ' SELECT * FROM items WHERE groupId = 3 ORDER BY position '; 
     $result = mysqli_query($db, $q); 
     if ($result->num_rows > 0) { 
     while($items = $result->fetch_assoc()) { 
     ?> 
     <div id='sort_<?php echo$items['position'] ?>' class='items'> 
     <span>&#9776;</span> <?php echo$items['description'] ?> 
     </div> 
     <?php 
     } 
     } 
    ?> 
</div> 

js.js文件：

$("#container").sortable({ 
    opacity: 0.325, 
    tolerance: 'pointer', 
    cursor: 'move', 
    update: function(event, ui) { 
     var itId = 3; 
     var post = $(this).sortable('serialize'); 

     $.ajax({ 
     type: 'POST', 
     url: 'save.php', 
     data: {positions: post, id: itId }, 
     dataType: 'json', 
     cache: false, 
     success: function(output) { 
      // console.log('success -> ' + output); 
     }, 
     error: function(output) { 
      // console.log('fail -> ' + output); 
     } 
     }); 

    } 
}); 
$("#container").disableSelection(); 

save.php文件：

require_once('conn.php'); 

$itId = $_POST['id']; 
$orderArr = $_POST['positions']; 
$arr = array(); 
$orderArr = parse_str($orderArr, $arr); 
$combine = implode(', ', $arr['sort']); 

$getIds = "SELECT id FROM items WHERE groupId = '$itId' "; 
$result = mysqli_query($db, $getIds); 

foreach($arr['sort'] as $a) { 
    $row = $result->fetch_assoc(); 
    $sql = " UPDATE items 
      SET position = '$a' 
      WHERE id = '{$row['id']}' "; 
    mysqli_query($db, $sql); 
} 

echo json_encode(($arr['sort'])); 

任何人都可以请指出我要去哪里错了 这个？

预先感谢您。

塞尔

Answer 1

如果有人在这里的土地上，这里是我的工作的情况下...

注：我没有创建在index.php select函数准备语句。但你可能应该。

index.php文件：

<div id="container"> 
     <?php 
     require_once 'conn.php'; 
     $q = ' SELECT * FROM items WHERE groupId = 3 ORDER BY position '; 
      $result = mysqli_query($db, $q); 

     if ($result->num_rows > 0) { 

      while($items = $result->fetch_assoc()){ 
     ?> 
       <div id='sort_<?php echo $items['id'] ?>' class='items'> 
        <span>&#9776;</span> <?php echo $items['description'] ?> 
       </div> 
     <?php 
      } 
     } 
     ?> 
    </div> 

jQuery的排序文件：

var ul_sortable = $('#container'); 

    ul_sortable.sortable({ 
     opacity: 0.325, 
     tolerance: 'pointer', 
     cursor: 'move', 
     update: function(event, ui) { 
     var post = ul_sortable.sortable('serialize'); 

     $.ajax({ 
      type: 'POST', 
      url: 'save.php', 
      data: post, 
      dataType: 'json', 
      cache: false, 
      success: function(output) { 
       console.log('success -> ' + output); 
      }, 
      error: function(output) { 
       console.log('fail -> ' + output); 
      } 
     }); 

     } 
    }); 
    ul_sortable.disableSelection(); 

更新php文件：

$isNum = false; 

foreach($_POST['sort'] as $key => $value) { 
    if (ctype_digit($value)) { 
     $isNum = true; 
    } else { 
     $isNum = false; 
    } 
} 

if(isset($_POST) && $isNum == true){ 
    require_once('conn.php'); 
    $orderArr = $_POST['sort']; 
    $order = 0; 
    if ($stmt = $db->prepare(" UPDATE items SET position = ? WHERE id=? ")) { 
     foreach ($orderArr as $item) { 
      $stmt->bind_param("ii", $order, $item); 
      $stmt->execute(); 
      $order++; 
     } 
     $stmt->close(); 
    } 
    echo json_encode( $orderArr); 
    $db->close(); 
} 

Answer 2

更改您的JS代码：

{...} 
    tolerance: 'pointer', 
    cursor: 'move', 
// new LINE 
    items: '.items', // <---- this is the new line 
    update: function(event, ui) { 
     var itId = 3; 
     var post = $(this).sortable('serialize'); // it could be removed 
// new LINES start 
     var post={},count=0; 
     $(this).children('.items').each(function(){ 
     post[++count]=$(this).attr('id'); 
     }); 
// new LINES end 
     $.ajax({ 
{...} 

有了这个$.each循环您覆盖您var post -> serialize和定义自己的排序顺序。现在用PHP print_r($_POST["positions"]);看看你的$ _POST [“头寸”]，你有自己的头寸。