jQuery UI 可排序的默认顺序答案

【问题标题】：Default order with jQuery UI SortablejQuery UI 可排序的默认顺序
【发布时间】：2017-10-15 20:43:09
【问题描述】：

我有以下问题。我想做接下来的事情。在我正在开发的网页中，当用户登录时，他必须排列一些变量，我需要保存他排列它们的顺序。使用此代码，我可以将每个项目的订单值设置为隐藏的表单输入，因此当用户按下“保存”时，这些值将保存在 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 中设置这些值，以便按照用户的方式排列项目。

感谢您的帮助。

【问题讨论】：

我建议在update 期间使用任何代码在 AJAX POST 中提交表单。这样，当用户进行更改时，数据库中的订单就会更新，而不仅仅是在他们提交表单时。这可能会解决您的用户刷新问题，因为 DB 值会有所不同，并且 PHP 应该在呈现页面时提取新值。
如果您不想保存任何更改（仅通过按钮），您可以对这些值进行 cookie，或者您可以在每次用户直接将其设置到数据库时 AJAX 位置，以临时表或内存、会话或类似的东西。
嗨。事实上，我需要保存更改。如果用户在其他场合登录页面，他需要在离开时查看值的顺序。

标签： jquery mysql jquery-ui jquery-ui-sortable

【解决方案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);
    });
});

【讨论】：