jQuery UIでのデフォルト注文

Question

私は以下の問題があります。私は次のことをしたい。私が開発しているウェブページでは、ユーザーがログに記録されているときに、いくつかの変数を手配しなければなりません。このコードでは、各項目の順序値を隠しフォーム入力に設定することができます。ユーザーが「保存」を押すと、その値が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から出力された（各項目は次のようになり）：ユーザーがWebページをリフレッシュすると

<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でない場合、値は、このようなIDとして印刷されている（0、ユーザがその要素を選択していないので、それが印刷されていないことを意味）：

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