通过 AJAX 将JQuery拖放更改传递到文件

我一直在使用JQuery来重新排序页面上的表行，然后通过 AJAX 将这些更改传递给外部脚本。表行以特定的顺序从数据库中出来，该数据库有一个名为“Position”的字段，该字段带有一个数值字段，用于确定它在表中的位置。
总的来说，它可以正常工作，但是我不能正确地传递表行的ID来识别更改。假设表行的位置是1、2、3 -如果我进行第一次更改并将第3行向上拖动一个级别，我从脚本中得到的是position[] = 1、3、2（这是正确的）.然而，如果我然后拖动第1行到底部，它不会正确更新，似乎吐出随机数字.如果我有更多的行，更不正常的它变得.代码如下.
理想情况下，我所寻找的是能够说（例如）：表格行#1现在是行#5，并通过先前的位置2-5运行一个循环，使它们成为1-4。即，产品ID #672现在从位置1更新到位置5。产品ID #897是位置5，现在是位置4等。
任何帮助都将是惊人的！提前感谢你。

<!DOCTYPE html>  
<html>  
<head>  
    <title> Example of Dynamic Drag and Drop table rows</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <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>  
    <div class="container">  
        <h3 class="text-center"> Example of Dynamic Drag and Drop table rows</h3>  
        <table class="table table-bordered">  
            <tr>  
                <th>#</th>  
                <th>Name</th>  
                <th>Definition</th>  
            </tr>  
            <tbody class="row_position">  
                <tr id="1">  
                    <td>761</td>  
                    <td>John Smith</td>  
                    <td>Student</td>  
                </tr>  
                <tr id="2">  
                    <td>990</td>  
                    <td>Steve Williams</td>  
                    <td>Student</td>  
                </tr>
                <tr id="3">  
                    <td>108</td>  
                    <td>Jenny Peterson</td>  
                    <td>Student</td>  
                </tr>
                <tr id="4">  
                    <td>12</td>  
                    <td>Suzy Cato</td>  
                    <td>Student</td>  
                </tr>
                <tr id="5">  
                    <td>885</td>  
                    <td>Bob Jones</td>  
                    <td>Student</td>  
                </tr>
            </tbody>  
        </table>  
    </div> <!-- container / end -->  
</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:"AJAX SCRIPT HERE",  
            type:'post',  
            data:{position:data},  
            success:function(){  
                alert('your change successfully saved');  
            }  
        })  
    }  
</script>  
</html>

传递行值工作正常，但我很难将它们绑定到行的原始ID以有效地进行更改。同样，当我运行返回的所有表单项的循环时，我的 AJAX 值仅给出position[] = 1，2，3。

我不知道，你想收到的结果，我只是添加了索引到您的函数和 AJAX 脚本接收键值对象，其中键是position，值是id

$(function(){
        $( ".row_position" ).sortable({
            delay: 150,
            stop: function() {
                var selectedData = {};
                $('.row_position>tr').each(function(i) {
                    selectedData[i+1] = $(this).attr("id");
                });
                updateOrder(selectedData);
            }
        });

        function updateOrder(data) {
            console.log(data)
            // ...
        }
    })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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>

<div class="container">
    <h3 class="text-center"> Example of Dynamic Drag and Drop table rows</h3>
    <table class="table table-bordered">
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Definition</th>
        </tr>
        <tbody class="row_position">
        <tr id="1">
            <td>761</td>
            <td>John Smith</td>
            <td>Student</td>
        </tr>
        <tr id="2">
            <td>990</td>
            <td>Steve Williams</td>
            <td>Student</td>
        </tr>
        <tr id="3">
            <td>108</td>
            <td>Jenny Peterson</td>
            <td>Student</td>
        </tr>
        <tr id="4">
            <td>12</td>
            <td>Suzy Cato</td>
            <td>Student</td>
        </tr>
        <tr id="5">
            <td>885</td>
            <td>Bob Jones</td>
            <td>Student</td>
        </tr>
        </tbody>
    </table>
</div>

通过 AJAX 将JQuery拖放更改传递到文件

1条答案

相关问题

热门标签

最新问答