使用php将排序首选项保存到mysql,拖放

ruarlubt  于 2021-06-21  发布在  Mysql
关注(0)|答案(2)|浏览(342)

我使用jquery为用户提供一个可重新排列的项目列表。这样地:
列表的图像
下面是简单的html:

<ul class="sortable">
      <li>Item 1<i class="sorthandle"></i></li>
      <li>Item 2<i class="sorthandle"></i></li>          
      </ul>

拖放功能非常有效。下一步是将用户的排序首选项保存到数据库中。我计划在数据库中添加一个“priority”列,其中包含一个表示用户首选排序顺序的整数。那么我的问题就解决了 Order by 'priority' ASC .
我想我需要生成一个当前在拖放屏幕上显示的排序顺序数组,然后将这些值保存到数据库记录中。但是作为一个javascript新手,我需要一些帮助。
我的javascript

<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>

通过php生成拖放列表:

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

}
vhipe2zx

vhipe2zx1#

我不需要再写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();

          } 

    } 

}
eagi6jfj

eagi6jfj2#

首先,javascript需要id,而不仅仅是名称。您可以简单地将它们放在一个数据属性中(我还去掉了不必要的变量赋值,并使用串联构建了字符串)

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

然后可以在javascript中提取这个数据属性并创建一个数组。您可能需要考虑何时保存设置。最简单的方法是提供一个按钮。也可以在sortable update事件上执行此操作(例如,在“删除”元素之后)。但这是有风险的,可能会使服务器过载。
要在单击按钮时触发ajax post,请将此代码放在 $(function() { . 它将lambda函数绑定到 click id为的dom元素的事件 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 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']` .

相关问题