个人中心
gpt4 book ai didi

php - 动态拖放表格行

转载 作者：行者123 更新时间：2023-11-29 15:43:15 27 4
gpt4 key购买 nike

我尝试使用 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 screenshot 1

当我尝试重新排序时，只想更改字段channel_number，但没有任何进展。我的错误在哪里

最佳答案

我更改了一些代码，并打开了一些日志，但仍然有问题。如果有人可以提供帮助将会很高兴。这是:

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

关于php - 动态拖放表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57354900/

27 4 0
文章推荐： javascript - 解析 JSON 响应
文章推荐： android - 从 Materialdrawer 中删除左边距
文章推荐： android - 如何使用 RxAndroid 将流正确拆分为 4 个操作？
文章推荐： MySql 在命令行中正确连接，但无法连接远程
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com