Question

我想用MySQL对数据行进行排序，然后更改顺序并提交我使用jQueryUI.sortable使这些tr标签（行）可拖动但是当我提交表格时，其中一些没有改变顺序。

为什么呢？我试图搞清楚，我var_dump我提交的数据，我发现了一个问题： 我从原始订单移动的tr标签（行），不会传递给PHP，因此var_dump不会显示行ID。

为了便于理解，我在这里发布了我的代码：

HTML代码

<table>
    <thead>
        <tr>
            <th>Subject</th>
            <th>Content</th>
        </tr>
    </thead>
    <tbody id="sortable">
        <tr>
            <td>
                Hello World
                <input name="displayorder[]" type="hidden" value="1" />
            </td>
            <td>I come from Mars!</td>
        </tr>
        <tr>
            <td>
                Hello Mars
                <input name="displayorder[]" type="hidden" value="2" />
            </td>
            <td>I come from Jupiter!</td>
        </tr>
        <tr>
            <td>
                Hello StackOverflow
                <input name="displayorder[]" type="hidden" value="3" />
            </td>
            <td>I come from North Korea ...</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="2"><input type="submit" value="Submit!" />
        </tr>
    </tbody>
</table>

我省略了表单内容，因为它不重要

JavaScript（已加载可排序库）

$(document).ready(function() {
    $('#sortable').sortable({
        helper: fixHelper,
        axis: 'y',
        opacity: 0.6,
    }).disableSelection();
});

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

PHP

$displayorder = $_POST["displayorder"];
if($displayorder != "") {
    $order = 1;
    foreach($displayorder as $value) {
        mysql_query("UPDATE message SET displayorder=$order WHERE announcementid=$value");
        $order++;
    }
}

我不希望使用Ajax来执行此操作，因为我有几十个类似的页面来执行相同的任务提前谢谢。

Answer 1

好吧我决定每页编码。
现在代码：

的JavaScript

$(document).ready(function() {
    $('#sortable').sortable({
        helper: fixHelper,
        axis: 'y',
        opacity: 0.4,
        update: function(event, ui){
            var data = $(this).sortable('serialize');

            $.ajax({
                data: data,
                type: 'POST',
                url:  '/update.php?action=displayorder'
            });         
        },
    }).disableSelection();
});

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

PHP

foreach($_POST["displayorder"] as $i => $value) {
    mysql_query("UPDATE message SET displayorder=$i WHERE announcementid=$value");
    $i++;
}

jQueryUI.Sortable更新，不使用Ajax作为普通表单提交给PHP

1 个答案: