-1

我可以让我的数据表像我想要的那样传播。当我点击提交时，我也可以传递我需要的一切。问题是这样的：

我曾尝试使用 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>
4

2 回答 2

2

1）存储排序顺序：我发现在本地存储它的最佳位置是在列的标题单元格中隐藏输入。如果您只想一次按 1 列排序，那么您需要做的就是指明排序方向和列标识符。我还会在标题单元格中添加一些向上/向下箭头，以向用户指示他们当前的排序模式是什么。如果要存储多个连续排序，则还需要添加隐藏输入来存储排序顺序，以便正确构建查询。

2）对表数据进行排序：首先检查每一列中的数据类型很重要。Javascript 不能像您预期或期望的那样有效地对混合数据进行排序。首先确定数据是否是文本、数字、日期等，并为每个数据类型执行特定的排序。

编辑每条评论 好的，我之前也需要这样做。我所做的是在每一行中添加一个隐藏的输入，该输入将行的索引存储在表中。使用 jQuery 的.index()，我向dropsortable 事件添加了一个事件处理程序，该事件处理程序将根据表中行的索引调整每个输入的值。每个输入的名称应该向您表明它所指的是哪个项目，然后它的值将告诉您它的位置。

于 2013-05-20T18:58:23.107 回答
0

不要为此使用表格。使用 $.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);
});
于 2013-05-20T18:59:50.800 回答