如何在資料庫mysql中保存jquery可排序連接串列？

嘿伙計們，我有兩個連接串列，但我不知道如何正確傳遞或獲取值

我有兩個清單

左側串列：我要添加的值是“0”，這意味著它處于非活動狀態

右串列：我要添加的值是“1”，這意味著它 也具有值位置

圖片了解更多詳情

這是我的 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（整數），

名稱（varchar），

active (varchar) number 1 表示活躍 number 2 表示不活躍，

位置（varchar）的位置等級

uj5u.com熱心網友回復：

考慮以下示例。

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

This is a basic example and your code will likely be different. This example also does not sanitize the inputs or protect again SQL Injection and should only be used as an basic example. Production code should use all the proper SQL techniques and best practices.

標籤：javascript php jQuery 阿贾克斯 jQuery-ui

上一篇：按下手風琴時切換一個元素的類

下一篇：tomcat執行緒和springboot中通過async注解啟動的執行緒有什么區別？