Question

我使用JQuery为我的用户提供可重新排列的项目列表。像这样：

这是简单的HTML：

Order by 'priority' ASC

拖放功能非常有用。下一步是将用户的排序首选项保存到数据库。我计划添加一个＆＃34;优先级＆＃34;列到我的数据库，它将包含一个表示用户首选排序顺序的整数。然后我的查询将<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $(".sortable").sortable({ connectWith: ".sortable", handle: '.handle' }).disableSelection(); }); </script>。

我认为我需要生成当前在拖放屏幕上显示的排序顺序数组，然后将这些值保存到数据库记录中。但作为一个JavaScript新手，我需要一些帮助。

我的JavaScript

while ($row = mysqli_fetch_array($result)){
  $playlistname = $row['name'];
  $id = $row['id'];
  echo "<li>$playlistname<i class='handle fa fa-bars'></i></li>";

}

通过PHP生成拖放列表：

_ToastNotifier.Hide(notification);

Answer 1

首先，JavaScript需要ID，而不仅仅是名称。你可以简单地将它们放在一个数据属性中（我也摆脱了不必要的变量赋值并用串联构建了字符串）

echo '<li data-id="' . $row['id'] . '">' . $row['name'] . '<i class="handle fa fa-bars"></i></li>';

然后，您可以在JavaScript中提取此数据属性并创建一个数组。您可能想要考虑保存设置的时间。最简单的方法是提供一个按钮。您也可以在sortable update事件上执行此操作（例如，在“删除”元素之后）。但这有风险，可能会使服务器过载。

要在按钮单击时触发AJAX POST，请将此代码放在$(function() {中。它绑定DOM元素的click事件上的lambda函数，其ID为save，f.ex。 <button id="save">save order</button>

// bind a callback to the button click
$('#save').on('click', function () {
    // array where we store the IDs
    var ids = [];
    // loop through the <li> and extract data-id
    $('.sortable li').each(function() {
        ids.push($(this).data('id'));
    });

    // AJAX POST the array to a PHP script
    $.post('/savescript.php', {'ids[]': ids});
});

然后，您可以访问$_POST['ids']中的数据。

Answer 2

我能够在不编写任何JavaScript的情况下完成此任务。 PHP工作得很好！

PHP - 获取值

<?php
$sql = "SELECT name, id FROM playlists WHERE userid = 'XX' AND active = 1 ORDER BY priority ASC";
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$result = mysqli_query($conn,$sql);

 ?>
<form action="" method="POST">

<div class="container">
      <ul class="sortable">

        <?php
          while ($row = mysqli_fetch_array($result)){ /* FETCH ARRAY */
          $playlistname = $row['name'];
          $id = $row['id'];
          echo "<li>$playlistname<i class='handle fa fa-bars'><input type='hidden' name='sort[]' value='$id' /></i></li>";
          }
        ?>

        </ul>
</div>
<center><button name="submit" id="sortsavebutton" type="SUBMIT" value="submit" action="POST">Save</button></center><br>
</form>

保存/提交处理

if (isset($_POST['submit'])){
    $rearrange = $_POST['sort'];
    $count = count($rearrange);
    $sort = 0;
    for($i=0;$i<$count;$i++){

        if(!empty($rearrange[$i])){ 

        $id = mysqli_real_escape_string($conn,$rearrange[$i]); /* ESCAPE STRINGS */
    $priority = $sort++;
    $stmt = $conn->prepare("UPDATE playlists SET priority=? WHERE id = ?");
    $stmt->bind_param("ii", $priority, $id);
    $stmt->execute();

          } 

    } 

}

使用PHP保存排序首选项到MySQL，拖放

2 个答案: