duanbinren8906 2019-08-05 08:37
浏览 35

动态拖放表行

I try to make some reorder with drag and drop with PHP and some ajax with this tutorial.

I set up my files for my needs but nothing going on. On my index.php just change this thing that equal to my 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 } ?>

Here is Java script in index.php:

<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>

Here is and ajaxPro.php that i change:

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++;
}

And here is MySQL screenshot 1

When I try to reorder, just want to change field channel_number but nothing goings-on. Where is my mistake

  • 写回答

1条回答 默认 最新

  • doukan3504 2019-08-06 09:36
    关注

    I've change some code, and turn on some log, but still have problem. If anyone can assist will be so happy. Here it is:

    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);




}

    It's look good in browser everything is changed (if i move chanel from possition 4 to position 2 it's change on the screen to position 2, but in array chnumber is still 4, and i don't know how to change this.

    Here is some pics. 1st order when you load page

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

    And here is console log

    评论

报告相同问题？

悬赏问题

  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本