【问题标题】:Sending and deleting records to database with a drag and drop table使用拖放表向数据库发送和删除记录
【发布时间】:2015-09-16 02:30:40
【问题描述】:

我有三个数据库表。

-付费

-部分支付

-欧斯

当有人注册帐户时,我将他们的 user_id、姓名等发送到我的“Owes”数据库表中,然后将他们的姓名输出到我在“Owes”列中的拖放表中。到目前为止,如果我将任何人的姓名移至任何其他类别(付费/部分付费),我不确定如何从 Owes 数据库中删除该记录并将名称插入新的数据库表中,以便更改是永久性的。

真正让我失望的是如何使用拖放表来完成。我不确定如何应用逻辑,即当将某些内容放入该列时会删除过去的记录并将新记录添加到该特定表中,或者如何在没有提交按钮或页面重新加载的情况下进行更改。

我有什么方法可以做到这一点,我该如何构建它?

PHP

<?php
//Payment Section

    $con = mysqli_connect("localhost", "root", "", "db");
    $paid_run = mysqli_query($con,"SELECT * FROM paid ORDER BY id DESC");
    $partially_paid_run = mysqli_query($con,"SELECT * FROM partial_payment ORDER BY id DESC");
    $owes_run = mysqli_query($con,"SELECT * FROM owes ORDER BY id DESC");
    $paid_numrows = mysqli_num_rows($paid_run);
    $partially_paid_numrows = mysqli_num_rows($partially_paid_run);
    $owes_numrows = mysqli_num_rows($owes_run);

        if($paid_numrows > 0){
            while($row = mysqli_fetch_assoc($paid_run)){
                $paid_id = $row['user_id'];
                $paid_name = $row['name'];
            }
        }

    if($partially_paid_numrows > 0){
            while($row = mysqli_fetch_assoc($partially_paid_run)){
                $partially_paid_id = $row['user_id'];
                $partially_paid_name = $row['name'];
                $partially_paid_amount = $row['payment'];
            }
        }

    if($owes_numrows > 0){
            while($row = mysqli_fetch_assoc($owes_run)){
                $owes_id = $row['user_id'];
                $owes_name = $row['name'];
            }
        }
?>  
$(function() {
    $( "#paid, #partially_paid, #owes" ).sortable({
      connectWith: ".tdPayment",
      remove: function(e, ui) {
        var $this = $(this);
        var childs = $this.find('div');
        if (childs.length === 0) {
           $this.text("Nothing");
        }
      },
      receive: function(e, ui) {
        $(this).contents().filter(function() {
            return this.nodeType == 3; //Node.TEXT_NODE
         }).remove();
      },
    }).disableSelection();
  });

表格

<table class="paymentTable" id="dragTable">
        <tr>
            <th class="thPayment">Paid</th>
            <th class="thPayment">Partially Paid</th>
            <th class="thPayment">Owes</th>
        </tr>
        <tr>
            <td class="tdPayment" id="paid">
                            <div>
            <?php
                if ($paid_name == true) {
                    echo $paid_name;
                } else {
                    echo "No one has paid";
                }
            ?>
                            </div>
            </td>
            <td class="tdPayment" id="partially_paid">
            <div>
            <?php 
                if ($partially_paid__name == true) {
                    echo $partially_paid__name . " - " . $partially_paid_amount;
                } else {
                    echo "No one has made a partial payment";
                }
            ?>  
            </div>
            </td>
            <td class="tdPayment" id="owes">
            <div>
            <?php
                if ($owes_name == true) {
                    echo $owes_name;
                } else {
                    echo "Everyone has paid something";
                }
            ?>  
            </div>
            </td>
        </tr>
    </table>

【问题讨论】:

    标签: javascript php ajax mysqli drag-and-drop


    【解决方案1】:

    以下是有关如何执行此操作的粗略大纲。我会推荐使用 jQuery,这是一个 JavaScript 库,其中有很多有用的东西。

    1. 使用jQuerydraggabledroppable实现拖放部分。可以在here 找到一个不错的指南。
    2. 编写一个 PHP 页面,以您希望的方式更新数据库。
    3. 当某物被丢弃时,使用 jQuery 调用该页面。这可以使用Ajax 来完成。

    第 3 部分的说明

    我建议查看可放置文档中的 photo manager 以获得类似内容的完整工作示例。

    为此,您需要设置 HTML,使其具有一些类名和一些数据属性:

    <h1>Owes</h1>
    <div class="bin" data-bin-id="1">
      <div class="user" data-user-id="5">Eva</a>
      <div class="user" data-user-id="8">Anna</a>
    </div>
    
    <h1>Partially paid</h1>
    <div class="bin" data-bin-id="2">
      <div class="user" data-user-id="2">Tom</a>
      ...
    </div>
    
    ...
    

    然后我们需要实现一些 javascript 来处理当用户丢东西时调用 PHP:

    jQuery(".bin").droppable({
      accept: ".user",
      drop: function( event, ui ) {
    
        //Get the ID of the bin the user was dropped into.
        var intBinID = jQuery(this).attr("data-bin-id");
    
        //Get the ID of the user that was dropped.
        var intUserID = ui.droppable.attr("data-user-id");
    
        //Make an ajax call to the PHP page.
        jQuery.ajax("update.php?binid=" + intBinID + "&userid=" + intUserID);
    
      }
    });
    

    此外,您可能希望 update.php 返回一些内容,让 JavaScript 知道它是否有效,如果失败则中止删除。

    免责声明:因为我没有设置这个项目的所有部分,所以我没有测试这个代码。

    【讨论】:

    • 我已经完成了第 1 步,第 2 步我可以很容易地完成。我只是不知道如何将我对拖放表所做的操作集成到更新数据库中。我不确定如果我将某人的名字从 Owes 移到 Paid 列,脚本将如何识别该名称进入该列,然后该列如何代表我实际希望它代表的内容。
    • 感谢您给了我一个好的开始。这有助于一堆。我有一个问题。当将通过 while 循环从我的数据库中输出名称时,如何分配数据用户 ID。一天我可以有 5 个名字,然后 5 个人可以注册,然后我就有 10 个。这些名字不会是静态代码。
    • 您必须使用 PHP 生成 HTML 代码。为用户查询数据库,然后循环遍历结果并执行echo '&lt;div class="user" data-user-id="' . $row['id'] . '"&gt;' . $row['name'] . '&lt;/div&gt;'; 之类的操作。 Here 是关于 MySQLi 的一个很好的介绍,可以帮助您做到这一点。
    • 知道了...我不知道 Jquery 是否可以做到这一点。我已经为 user_id 分配了一个变量。 $paid_id = $row['user_id']; ... 我感谢您的帮助。我会试试看效果如何!
    【解决方案2】:

    一个更简单的方法是创建一个独立的用户表来保存所有用户。然后,在一个单独的表格中,就像您已经拥有的表格一样,您只需保留该用户的 ID(可能还有一些与他欠多少或已经支付多少有关的信息)。 这样,当您必须插入或更新有关用户状态的任何信息时,您只需从这些表中插入/删除用户的 Id。

    有关用户的信息将始终安全并保存在其自己的表中。

    【讨论】:

    • 这就是我现在正在做的事情。我有一个单独的用户表,然后我只将 user_id 发送到其他三个单独的数据库表。我只是不知道如何使用拖放方法来做到这一点。
    • 还应该补充一点,最好不要为他们的付款状态保留三个单独的表,但其中一个包含一个名为 PAYMENT_STATUS 的列,您将其设置为 1 用于欠款, 2 部分支付和3 支付或类似的东西。这意味着您只需制作一个UPDATE,而不是制作一个DELETE 和一个INSERT
    • 你知道我如何使用拖放表来完成这项工作吗?
    • 通过网页中的拖放表格,您只需执行 ajax post 即可更新数据库信息。进行更改后,您进行最终选择以获取拖放表的新列表以显示给用户。
    猜你喜欢
    • 1970-01-01
    • 2021-04-21
    • 2014-06-11
    • 2013-09-21
    • 1970-01-01
    • 1970-01-01
    • 2018-04-18
    • 2020-12-06
    • 1970-01-01
    相关资源
    最近更新 更多