jQuery + PHP + MySQL：用 2 个表格拖动 'n' Drop

Posted 2023-05-09

【中文标题】jQuery + PHP + MySQL：用 2 个表格拖动 \'n\' Drop

【英文标题】：jQuery + PHP + MySQL: Drag 'n' Drop with 2 tablesjQuery + PHP + MySQL：用 2 个表格拖动 'n' Drop

【发布时间】：2016-02-23 14:24:59

【问题描述】：

重点：

我有两张并排的桌子。 一个是填充数据（在这种情况下，一个表格填充了团队中所有工作人员的姓名）。 另一个是空的。现在，我想将名称（行）拖放到另一个表中，在放置上，它会触发对数据库的插入-查询。

此外，第一个表中的名称（填充了数据）始终保持不变（因为名称列表永远不会改变）。

所以，一个小计划：

用来自数据库的数据填充的表（拖动）

空表（drop）

一个名字被从第一个表拖到第二个，当被删除时，一个插入查询被发送到数据库。刷新页面时，仍会在第二个表中看到删除的名称。

哦，还有一个可以选择实现的功能：如果我将第二个表中的名称拖回第一个表，该名称应该会消失（因此会从数据库中的表中删除记录）。拖放应该可以双向使用。

我已经拥有的代码，但不知何故无法正常工作：

            $(document).ready(function() 
                var $tabs = $('#EmptyTable')
                $("tbody.t_sortable").sortable(
                    connectWith: ".t_sortable",
                    items: "> tr:not(:first)",
                    appendTo: $tabs,
                    helper:"clone",
                    zIndex: 999990
                ).disableSelection();

                var $tab_items = $(".nav-tabs > li", $tabs).droppable(
                    accept: ".t_sortable tr",
                    hoverClass: "ui-state-hover",
                    drop: function( event, ui )  
                <?
                  mysql_query("INSERT INTO emptyTable_team (name) values (<datafromfirsttable>)");
?>
             return false; 
                    
                );
            );

【参考方案1】：

您不能将 php 函数插入 javascript。

PHP 是一种脚本语言，它告诉您的网络服务器如何处理请求，例如更新数据库或呈现 html。但是一旦处理了请求，PHP 脚本就会停止，所有变量都会被卸载，等等。

您在 PHP 中编写的脚本是告诉 Apache 在页面加载时运行该查询一次。

您要做的是在 drop 函数中调用 $.ajax。 jQuery 的 ajax 函数可以将数据 POST 到一个 url，此时您通过将数据插入数据库来处理请求。

Javascript：

$(document).ready(function() 
  var $tabs = $('#EmptyTable');
  $("tbody.t_sortable").sortable(
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  ).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable(
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) 
      var rowData;
      // looping through the cell of each row
      for (var i = 0; i < $("td",this).length; i++) 
        // Get the name of the column
        // I don't know your HTML so I can't make a selector for this
        var colName = $("selector-for-header-column").text(); 
        // Using square brackets to access an object property by string variable, 
        // and selecting the text in this cell for the dropped row.
        rowData[colName] = $("td",this).eq(i).text(); 
      
      // Now we have an object whose property names are the table headers, 
      // and the data in each property is the text in each cell of the dropped row.
      $.ajax(
        type: "POST",
        url: "/insertTeamMember.php",
        data: rowData,
        success: function (data) 
          // Log the return from the ajax endpoint, this will help you debug!
          console.log(data);
        
      );
    
  );
);

插入TeamMember.php：

<?PHP
$dbcO = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$q = "INSERT INTO emptyTable_team (name) values ( ? )";
$stmt = $dbcO->stmt_init();
$stmt->prepare($q);
$stmt->bind_param('s', $_POST['name']);
$stmt->execute();
$stmt->close();
?>

我使用prepared statement 作为防止mysql 注入的简单方法。强烈建议不要将用户输入直接插入到查询字符串中。用户输入是来自客户端的所有数据。

【讨论】：

您好，感谢您的回答！我只是想知道：var colName = $("selector-for-header-column").text() 是什么意思：您能更具体地了解 colName 吗？尝试使用示例后：拖放确实有效，但拖放时的所有功能都不起作用。

我不知道你的 html 结构是什么，所以我不能告诉你要写什么选择器。 Here 是使用 $() 选择元素时使用的选择器函数的文档

我们将使用同步按钮而不是使用 drop 将内容放入数据库。感谢您的反应，我相信，有了更多的知识，您的方法也应该有效！