php - jqueryでhtmlテーブルを並べ替える - フォームが機能しなくなり、新しい注文をphpファイルに渡すことができません - 助けてください

Question

データテーブルを思い通りに伝播させることができます。[送信] をクリックすると、必要なものすべてを渡すこともできます。問題はこれです：

jquery を使用してテーブルをソートし、使いやすくしました。並べ替えることができますが、そうするとフォームが殺されます。また、新しいソート順を保存してこれを渡す方法も見つけられないようです。

ご覧のとおり、機能する基本的なコードに戻りました。これを機能させるために失敗した無駄な試行を削除しました。

私のコードは次のとおりです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>


<form action="formAction.php" method="post">
<table border="2" cellspacing="0" cellpadding="0" width="100%" id="sort" class="grid">
<tr>
<td colspan="16" align="center" valign="middle"><h1><strong><font face="Arial, Helvetica, sans-serif">All In-Progress Units</font></strong></h1></td>
</tr>
<tr>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">#</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Last 4 of VIN</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Invoice Number</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Customer</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Model</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Length</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Dress Wall</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Floor</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Upper Color</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Lower Color</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Rear Door</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Drawing</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Overall Status</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Detailed Status</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Edit Unit</font></strong></h2></td>
<td align="center"><h2><strong><font face="Arial, Helvetica, sans-serif" color="#000000">Remove</font></strong></h2></td>
</tr>

<?php

/*Stuff to connect to the database goes here */

$query="SELECT * FROM masterschedule ORDER BY BuildOrder ASC";
$result=mysql_query($query);

$num=mysql_numrows($result);

$i=0;
while ($i < $num) {

    $newNumOrder = $i + 1;

    $InvoiceNumber=mysql_result($result,$i,"InvoiceNumber");
    $OverallProgress=mysql_result($result,$i,"OverallProgress");
    $BuildOrder=mysql_result($result,$i,"BuildOrder");
    $Trailer = mysql_query("SELECT Model, Length, DressWall, Floor, UpperColor, LowerColor, RearDoor, Name, Last4 from invoices WHERE InvoiceNumber = '$InvoiceNumber'");
    $Info = mysql_fetch_array($Trailer);
    $Model = $Info['Model'];
    $Length = $Info['Length'];
    $DressWall = $Info['DressWall'];
    $Floor = $Info['Floor'];
    $UpperColor = $Info['UpperColor'];
    $LowerColor = $Info['LowerColor'];
    $RearDoor = $Info['RearDoor'];
    $Name = $Info['Name'];  
    $Last4 = $Info['Last4'];

    $panelStatus=mysql_result($result,$i,"panelStatus");
    $platformStatus=mysql_result($result,$i,"platformStatus");
    $boxStatus=mysql_result($result,$i,"boxStatus");
    $componentStatus=mysql_result($result,$i,"componentStatus");
    $roofStatus=mysql_result($result,$i,"roofStatus");
    $assemblyStatus=mysql_result($result,$i,"assemblyStatus");
    $washStatus=mysql_result($result,$i,"washStatus");
    $weldOneStatus=mysql_result($result,$i,"weldOneStatus");
    $weldTwoStatus=mysql_result($result,$i,"weldTwoStatus");
    $weldThreeStatus=mysql_result($result,$i,"weldThreeStatus");
    $lastLookStatus=mysql_result($result,$i,"lastLookStatus");
    $cutStatus=mysql_result($result,$i,"cutStatus");

    $orderClean = "UPDATE masterschedule SET BuildOrder='$newNumOrder' WHERE InvoiceNumber='$InvoiceNumber'";
    mysql_query($orderClean);

    if ($panelStatus == 'DONE' && $platformStatus == 'DONE' && $boxStatus == 'DONE' && $componentStatus == 'DONE' && $roofStatus == 'DONE' && $assemblyStatus == 'DONE' && $washStatus == 'DONE' && $weldOneStatus == 'DONE' && $weldTwoStatus == 'DONE' && $weldThreeStatus == 'DONE' && $lastLookStatus == 'DONE' && $cutStatus == 'DONE') {
    $statusChange = "UPDATE masterschedule SET OverallProgress='DONE' WHERE InvoiceNumber='$InvoiceNumber'";
    mysql_query($statusChange);
    $invoiceChange = "UPDATE invoices SET Status='DONE' WHERE InvoiceNumber='$InvoiceNumber'";
    mysql_query($invoiceChange);
    $OverallProgress = 'DONE';
    }




?>

<tr>
<td width="10%" align="center" class="index"><font face="Arial, Helvetica, sans-serif"><?php echo $BuildOrder; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $Last4; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $InvoiceNumber; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $Name; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $Model; ?></font></td>
<td width="5%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $Length; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $DressWall; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $Floor; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $UpperColor; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $LowerColor; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $RearDoor; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><a href="drawings/<?php echo $InvoiceNumber; ?>.pdf">pdf</a></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><?php echo $OverallProgress; ?></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><a href="index.php?option=com_content&view=article&id=24&other=<?php echo $InvoiceNumber; ?>">Click Here</a></font></td>

<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><a href="index.php?option=com_content&view=article&id=20&other=<?php echo $InvoiceNumber; ?>">Click Here</a></font></td>
<td width="10%" align="center"><font face="Arial, Helvetica, sans-serif"><input type="checkbox" name=<?php echo $InvoiceNumber; ?> value="yes"></font></td>
</tr>


<?php


$i++;
}

?>
<script type="text/javascript">
// JavaScript Document

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);


        });




    };



$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();



</script>
</table>
<br><br>
<input type="submit" name="submitButton" value="Save Order">
<input type="submit" name="submitButton" value="Mark Done">
</form>

score 2 · Accepted Answer

1) 並べ替え順序の保存: これをローカルに保存するのに最適な場所は、列のヘッダーセルに非表示の入力があることです。一度に 1 列ずつ並べ替えたい場合は、並べ替えの方向と列の識別子を指定するだけです。また、ヘッダーセルに上下の矢印を追加して、現在の並べ替えパターンをユーザーに示します。複数の連続した並べ替えを保存する場合は、クエリを正しく作成できるように、並べ替え順序を保存するための非表示の入力も追加する必要があります。

2) テーブルデータの並べ替え: まず、各列のデータの種類を確認することが重要です。Javascript は、ユーザーが意図または期待するように、混合データを効果的にソートしません。最初に、データがテキスト、数値、日付などであるかどうかを判断し、それぞれに対してデータ型固有の並べ替えを実行します。

コメントごとに編集 OK以前にもそれを行う必要がありました。私がしたことは、行のインデックスをテーブルに格納する各行内に非表示の入力を追加することでした。jQuery の.index()dropを使用して、テーブル内の行のインデックスに従って各入力の値を調整するイベントハンドラーを sortable のイベントに追加しました。各入力の名前は、それがどの項目を参照しているかを示す必要があり、その値はその位置を示します。

score 0 · Accepted Answer

これにはフォームを使用しないでください。$.getJSON を使用して結果をサーバーに投稿し、

var arr = [];
$('tr').each(function(){
     // this is the tr element
     var id = $(this).find('input[name=element_id]').val(); // hidden input named element_id stores your id for each tr
     arr.push(id);
});

php - jqueryでhtmlテーブルを並べ替える - フォームが機能しなくなり、新しい注文をphpファイルに渡すことができません - 助けてください

2 に答える 2

Related

Reference