如何在数据库 mysql 中保存 jquery 可排序连接列表？

Question

嘿伙计们，我有两个连接列表，我不知道如何正确传递或获取值

我有两个列表

左侧列表：我要添加的值是“0”，这意味着它处于非活动状态

右列表：我要添加的值是“1”，这意味着它也处于活动状态，值为 position

图片了解更多详情

这是我的 HTML 代码：

<h5>inactive fruit</h5>
<ul id="sortable1" class="connectedSortable">

        <?php foreach($rows as $row){
                        if($row['active'] === '0'){ ?> 
        
            <li class="ui-state-default"><?php echo $row['name']?></li>
        
        <?php   }}?>
</ul>


<h5>Active Market</h5>
<ul id="sortable2" class="connectedSortable">

    <?php foreach($rows as $row){
                        if($row['active'] === '1'){ ?> 
        
            <li class="ui-state-default"><?php echo $row['name']?></li>
        
        <?php   }}?>
</ul>

这是js代码：

  <script>
   $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
        }).disableSelection();
   } );
  </script>

我想用 ajax 来做

数据库结构为：

ID（整数），

名称（可变字符），

active (varchar) 数字 1 表示活动 数字 2 表示不活动，

位置等级的位置（varchar）

Answer 1

考虑以下示例。

 jQuery(function($) { function sendData(api, data) { $.post(api, data, function(results) { console.log(results); }); } $(".connectedSortable").sortable({ connectWith: ".connectedSortable", update: function(event, ui) { // This event is triggered when the user stopped sorting and the DOM position has changed. var inactive = $("#sortable1").sortable("serialize"); var active = $("#sortable2").sortable("serialize"); console.log(inactive, active); sendData("updateFruit.php", { inactive: inactive, active: active }); } }).disableSelection(); });

 .column { margin: 0; padding: 0; width: 200px; text-align: center; float: left; }.column h5 { padding: 0.4em; margin: : 0; }.column ul { margin: 0; padding: 0; list-style: none; }.column ul li { padding: 0.4em; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <div class="column ui-widget"> <h5>Inactive fruit</h5> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default" id="fruit-1">Mango</li> <li class="ui-state-default" id="fruit-2">Orange</li> <li class="ui-state-default" id="fruit-3">Kewi</li> </ul> </div> <div class="column ui-widget"> <h5>Active Market</h5> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-default" id="fruit-4">Banana</li> </ul> </div>

这使用了几个不同的选项：

• https://api.jqueryui.com/sortable/#event-update
• https://api.jqueryui.com/sortable/#method-serialize
• https://api.jquery.com/jquery.post/

您的 PHP 脚本必须处理发布的数据。 就像是：

<?php

$active = array();
$inactive = array();

if(isset($_POST['active'])){
  $active = json_decode($_POST['active']);
}
if(isset($_POST['active'])){
  $inactive = json_decode($_POST['inactive']);
}

$rows = array();
$count = 0;

foreach($active as $name){
  array_push($rows, array(
    "name" => $name,
    "active" => 1,
    "position": $count++
  ));
}

$count = 0;

foreach($inactive as $name){
  array_push($rows, array(
    "name" => $name,
    "active" => 0,
    "position" => $count++
  ));
}

// Connect to MySQL DB, stored to $mysqli
// Generate Update Code, either unique Statements or one large statement
foreach($rows as $row){
  $mysqli->query("UPDATE fruits SET active = {$row.active}, position = {$row.position} WHERE name = '{$row.name}';);
}

$mysqli->close();
?>

参考：

• https://www.php.net/manual/en/function.json-decode.php
• https://www.php.net/manual/en/control-structures.foreach.php

这是一个基本示例，您的代码可能会有所不同。 此示例也不清理输入或再次保护 SQL 注入，应仅用作基本示例。 生产代码应使用所有正确的 SQL 技术和最佳实践。