Question

我有以下问题。我想做下一件事。在我正在开发的网页中，当用户被记录时，他必须安排一些变量，我需要保存他安排的顺序。使用此代码，我可以获取每个项目的订单值，将其设置为隐藏的表单输入，以便当用户按下＆＃34;保存＆＃34;那些有价值的东西保存在MySQL数据库中。直到这里工作正常：

$(document).ready(function() { $( function() {
    $( "#sortable" ).sortable( {
    placeholder: "ui-state-highlight",
    helper: 'clone',
    sort: function(e, ui) {
        $(ui.placeholder).html(Number($("#sortable > li:visible").index(ui.placeholder)) + 1);
    },
    update: function(event, ui) {
        var $lis = $(this).children('li');
        $lis.each(function() {
            var $li = $(this);
            var newVal = $(this).index() + 1;
            // $(this).children('.sortable-number').html(newVal);
            $(this).children('input').val(newVal);

        });
    } }
      );
    $( "#sortable" ).disableSelection();
       } ); } );

这是PHP的输出（每个项目看起来像这样）：

<li class="ui-state-default bookred"><input type="hidden" name="grammar1" value="<?php echo $grammar1 ?>"><a data-fancybox="" data-src="exercises/grammar-pronomen.php" href="javascript:;"><i class="fa fa-eye" aria-hidden="true"></i></a><a href="#" class="delete"><i class="fa fa-trash" aria-hidden="true"></i></a> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Pronomen</li>

当用户刷新网页时出现问题。他选择安排元素的顺序没有得到尊重。从MySQL获取值不是问题，问题是在UI中设置这些值以便按用户这样排列项目。

感谢您的帮助。

Answer 1

最后，我可以使用动态ID解决我的问题：

首先，我获取MySQL数据库中保存的值。这些值是每个元素的数字顺序。例如：grammar1 = 2，grammar2 = 4等，我需要按顺序排列这些元素。

$query = $DBcon->query("SELECT * FROM usuarios WHERE name='$master'");
if ($query->num_rows > 0) {
    // output data of each row
    while($row = $query->fetch_assoc()) {
        $grammar1 = $row["grammar1"];
        $grammar2 = $row["grammar2"];
        $grammar3 = $row["grammar3"];
        // and so on...
   }
}

如果该值不为0（0表示用户未选择该元素，因此无法打印），则该值将打印为ID，如下所示：

    <ul id="sortable">
        <?php if ($grammar1 != 0){ ?>
            <li class="ui-state-default" id="<?php echo $grammar8 ?>">Any content</li>
        <?php } ?>
</ul>

以下代码在用户保存时重新排列元素，并且可以正常工作！

$(document).ready(function() {
    var mylist = $('#sortable');
    var listitems = mylist.children('li').get();
    listitems.sort(function(a, b) {
        var compA = parseFloat($(a).attr('id'));
        var compB = parseFloat($(b).attr('id'));
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    });        
    $.each(listitems, function(idx, itm) {
        mylist.append(itm);
    });
});

使用jQuery UI排序的默认顺序

1 个答案: