Question

我在页面上为用户显示了一个可编辑的表格，他们可以按任意顺序拖放列，然后它将更新MYSQL数据库中的表格。第一行是位置顺序，第二行是条目的名称，第三行是描述。我希望在用户移动列时更新仓位顺序，当页面重新加载时会更新，但不是实时更新，这使得很难知道哪一个在哪里

我尝试用1-20直接在表格的左侧制作第二张表格，但无济于事，它要么距离太远，要么将我的另一张桌子推到下一行，一定缺少CSS魔术。

<div class='container'>
        <h3 class='text-center'>La Liga Picks</h3>
        <table class='table table-bordered'>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Definition</th>
            </tr>
            <tbody class='row_position'>
        <?php

        require('db_config.php');
        $tablename = $_SESSION['username'] . "_laliga";
        $_SESSION['tablename'] = $tablename;
        $sql = "SELECT * FROM $tablename ORDER BY position_order";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){

        ?>
            <tr  id="<?php echo $user['id'] ?>">
                <td><?php echo $user['position_order'] ?></td>
                <td><?php echo $user['title'] ?></td>
                <td><?php echo $user['description'] ?></td>
            </tr>
        <?php } ?>
        </tbody>
    </table>




<script type="text/javascript">
$( ".row_position" ).sortable({
    delay: 150,
    stop: function() {
        var selectedData = new Array();
        $('.row_position>tr').each(function() {
            selectedData.push($(this).attr("id"));
        });
        updateOrder(selectedData);
    }
});

function updateOrder(data) {
    $.ajax({
        url:"ajaxPro.php",
        type:'post',
        data:{position:data},
    })
}
</script>

与db对话的Ajax函数

require('db_config.php');
$tablename = $_SESSION['tablename'];


$position = $_POST['position'];

$i=1;
    foreach($position as $k=>$v){
    $sql = "Update $tablename SET position_order=".$i." WHERE id=".$v;
    $mysqli->query($sql);

    $i++;
}

?>

移动用户也无法移动表格条目，这是另一个问题，如果您看到快速修复的效果非常好，我正在讨论。

如何获得表格行以在移动时自动更新？

0 个答案: