Question

我有以下代码用于从数据库获取数据并使用jquery ui元素对可拖动列表进行排序。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background-color:#CCC;}
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

<?php
$con=mysqli_connect("localhost","root","","db_name");

if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$user_id = $_SESSION['user_id'];

$result = mysqli_query($con,"SELECT * FROM users WHERE user_id = '$user_id'");

echo "<ul id='sortable'>";

while($row = mysqli_fetch_array($result))
  {
  echo "<li class='ui-state-default'>" . $row['Name'] . ' ' . $row['UserName'] . $row['sort'] ."</li>";
  }

echo "</ul>";

mysqli_close($con);
?>

这是我的数据库表结构

Table Name = users
Columns = user_id, Name, UserName, Password, sort

示例结果

user_id     Name    UserName   Password   sort
1           AAA     aa         ***        1
2           BBB     bb         ***        2
3           CCC     cc         ***        3
4           DDD     dd         ***        4

我要问的是，我可以使用jquery draggable属性重新排序列表项，但如果重新排序列表项，如何将sort号码保存到数据库。？

Answer 1

jQuery UI sortable有一个停止回调，当你停止移动sortable时会调用它。它还具有序列化功能，您可以将它们组合使用，将您的可排序顺序发送到更新数据库的过程。您可以像这样使用它：

要使用serialize，您需要修改DOM中的可排序元素，使其包含对user_id的引用。例如。

<li class="ui-state-default" id="id_<?php echo $row['user_id'] ?>">...</li>

然后，当您序列化sortable时，它将构建一个参数列表。您不必使用id属性来引用您的数据，请阅读有关serialize method here的更多信息。但下面是如何使用id属性

进行操作的示例

var $sortable = $( "#sortable" );

$sortable.sortable({
    stop: function ( event, ui ) {
        // parameters will be a string "id[]=1&id[]=3&id[]=10"...etc
        var parameters = $sortable.sortable( "serialize" );

        // send new sort data to process
        $.post("/sort/my/data.php?"+parameters);
    }
});

然后，您需要一个接收此数据并更新数据库的进程。我会把大部分内容留给你，但这是一个很小的例子。

<?php
// Store user IDs in array. E.g. array(0 => "1", 1 => "3", 2 => "10"....)
$userIds = $_POST['id'];

// Connect to your database
$conn = mysqli_connect("localhost","root","","db_name");

foreach ($userIds as $key => $userId) {
    $sequence = $key + 1;
    $stmt = $conn->prepare("UPDATE users SET sort = $sequence WHERE user_id = ?");
    $stmt->bind_param("i", (int) $userId);
    $stmt->execute();
}

$stmt->close();

jquery draggable list position保存到数据库

1 个答案: