Question

我尝试通过PHP拖放进行一些重新排序，并通过this tutorial进行一些ajax进行重新排序。

我为我的需要设置了文件，但没有任何反应。在我的index.php上更改与我的MySQL

相同的内容

 $sql = "SELECT * FROM channels ORDER BY channel_number";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){


        ?>
            <tr  id="<?php echo $user['id'] ?>">
                <td><?php echo $user['channel_number'] ?></td>
                <td><?php echo $user['title'] ?></td>

            </tr>
        <?php } ?>

这是index.php中的Java脚本：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<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},
            success:function(){
                alert('your change successfully saved');

            }
        })
    }
</script>
</html>

这是我要更改的ajaxPro.php：

require('db_config.php');


$position = $_POST['position'];


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


    $i++;
}

这是MySQL

当我尝试重新排序时，只想更改字段channel_number，但什么都没发生。我的错误在哪里

Answer 1

我已经更改了一些代码，并打开了一些日志，但是仍然有问题。如果任何人都可以协助将会很高兴。在这里：

index.php

<div class="container">
    <h3 class="text-center">Dynamic Drag and Drop table rows in PHP Mysql - ItSolutionStuff.com</h3>
    <table id="myTable" class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">#</th>
            <th scope="col">Name</th>
        </tr>
        </thead>
        <tbody  class="row_position">
        <?php
        require('db_config.php');
        $sql = "SELECT * FROM channels ORDER BY channel_number";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){
            ?>
            <tr  id="<?php echo $user['id'] ?>"> <!-- data-channel-number="<?php echo $user['channel_number'] ?>">-->
                <td><?php echo $user['id'] ?></td>
                <td class="index"><?php echo $user['channel_number'] ?></td>
                <td><?php echo $user['title'] ?></td>

            </tr>
        <?php } ?>
        </tbody>
    </table>
</div> <!-- container / end -->
</body>


<!--<script type="text/javascript">
    $( ".row_position" ).sortable({
        delay: 150,
        stop: function() {

            //console.log(chArray);

        }
    });



</script>-->
<script>
    var fixHelperModified = function(e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function(index) {
                $(this).width($originals.eq(index).width())
            });
            return $helper;
        },
        updateIndex = function(e, ui) {
            $('td.index', ui.item.parent()).each(function (i) {
                $(this).text(i+1);
            });
        };



    $("#myTable tbody").sortable({
        distance: 5,
        //delay: 100,
        opacity: 0.6,
        cursor: 'move',
        helper: fixHelperModified,
        update: function() {
            var chArray = [];
            $('.row_position>tr').each(function() {
                chArray.push({
                    chid : $(this).attr("id"),
                    chnumber : $(this).closest('tr').find('td.index').text()
                });
            });
            console.log(chArray);

            // console.log(data);
            $.ajax({
                url:"ajaxPro.php",
                type:'post',
                data:{position:chArray},
                success:function(data){
                    console.log(data);
                    //alert('your change successfully saved');


                },
                error: function (error) {
                    // console.log(error);

                }
            })

        },
        stop: updateIndex
    }).disableSelection();
</script>
</html>

ajaxPro.php

error_reporting(1);

require('db_config.php');


$data = $_POST['position'];
echo $data;

//$i=1;

foreach($data as $d){

    echo $d['chnumber'];
    $sql = "Update channels SET channel_number=".$d['chnumber']." WHERE id=".$d['chid'];
    $mysqli->query($sql);




}

在浏览器中看起来一切都已更改（如果我将chanel从位置4移到位置2，它将在屏幕上更改为位置2，但是数组chnumber中的位置仍然是4，我不知道如何改变这个。

这是一些照片。 1st order when you load page

Reorder when move channel from pos:4 to pos:2

And here is console log

动态拖放表行

1 个答案: