2017-01-05 43 views
2

林:https://github.com/isocra/TableDnD/blob/master/index.html錶行下降,使用這個插件獲取ID和序列

如果我拖&下降一排,我得到警報被丟棄的行ID,它的工作原理。

我怎樣才能得到行序列?我想用這個,用ajax更新圖像序列。

$("#table-2").tableDnD({ 
    onDrop: function(table, row) { 
     var rows = table.tBodies[0].rows; 
     var debugStr = "Row dropped was ID: "+row.id+""; 
     alert(debugStr); 
    } 
}); 

我從我的網站複製表源代碼soruce,表由php生成。

<table class="table table-hover table-bordered list" id="table-2"> 
    <thead> 
     <tr> 
      <td style="width: 1px; text-align: center;"><input class="checkAllCheckboxes" type="checkbox"></td> 
      <td style="text-align: center;">ID</td> 
      <td class="left">Kép</td> 
      <td class="left">Megnevezés</td> 
      <td style="text-align: center;">Sorrend</td> 
      <td style="text-align: center;">Státusz</td> 
      <td class="right">Műveletek</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="sor32"> 
      <td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="32"></td> 
      <td style="text-align: center;">32</td> 
      <td class="left"><img class="img-responsive" src="images/homepage_slideshow/492-PS-VR_.jpg" width="200"></td> 
      <td class="left"></td> 
      <td style="text-align: center;">1</td> 
      <td style="text-align: center;">Aktív</td> 
      <td class="right"> 
       <a href="slideshow-szerkesztes.php?id=32"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="32"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a> 
      </td> 
     </tr> 
     <tr id="sor31"> 
      <td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="31"></td> 
      <td style="text-align: center;">31</td> 
      <td class="left"><img class="img-responsive" src="images/homepage_slideshow/503-WatchDogs2_FarCrayPrimal_1_.jpg" width="200"></td> 
      <td class="left"></td> 
      <td style="text-align: center;">3</td> 
      <td style="text-align: center;">Aktív</td> 
      <td class="right"> 
       <a href="slideshow-szerkesztes.php?id=31"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="31"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a> 
      </td> 
     </tr> 
     <tr id="sor30"> 
      <td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="30"></td> 
      <td style="text-align: center;">30</td> 
      <td class="left"><img class="img-responsive" src="images/homepage_slideshow/324-DeadRising4_megjelent.jpg" width="200"></td> 
      <td class="left"></td> 
      <td style="text-align: center;">2</td> 
      <td style="text-align: center;">Aktív</td> 
      <td class="right"> 
       <a href="slideshow-szerkesztes.php?id=30"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="30"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a> 
      </td> 
     </tr> 
     <tr id="sor24"> 
      <td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="24"></td> 
      <td style="text-align: center;">24</td> 
      <td class="left"><img class="img-responsive" src="images/homepage_slideshow/89-FIFA_17_B4jlEln.jpg" width="200"></td> 
      <td class="left"></td> 
      <td style="text-align: center;">4</td> 
      <td style="text-align: center;">Intaktív</td> 
      <td class="right"> 
       <a href="slideshow-szerkesztes.php?id=24"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="24"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a> 
      </td> 
     </tr> 
     <tr id="sor23"> 
      <td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="23"></td> 
      <td style="text-align: center;">23</td> 
      <td class="left"><img class="img-responsive" src="images/homepage_slideshow/90-konzolkiraly_sl_1467362325.jpg" width="200"></td> 
      <td class="left"></td> 
      <td style="text-align: center;">3</td> 
      <td style="text-align: center;">Intaktív</td> 
      <td class="right"> 
       <a href="slideshow-szerkesztes.php?id=23"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="23"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

更新:

enter image description here

如果我放棄了首次下降ID 24行,它會更新,這就是好的。但ID 30行停留在實際位置(序列1)。

我該怎麼辦?

$("#table-2").tableDnD(
    { 
     onDrop: function(table, row) 
     { 
      var rows = table.tBodies[0].rows; 
      var RowID = row.id.substr(3); 
      var RowIndex = $(row).index() + 1; 
      $.ajax({ 
       data: { RowID:RowID, RowIndex:RowIndex }, 
       type: 'POST', 
       url: 'files/update_slide_index.php', 
       success: function(data) 
       { 
        var result = $.trim(data); 
        $('#newsletterResult').html(result); 
        $('#newsletterModal').modal('show'); 
       }, 
       complete: function() 
       { 
        setTimeout(function() 
        { 
         location.reload(); 
        }, 3000); 
       } 
      }); 

     } 
    }); 


<?php 
include_once("../../files/connect.php"); 
if(isset($_POST['RowID'])) 
{ 
    $RowID = intval($_POST['RowID']); 
    $RowIndex = intval($_POST['RowIndex']); 

    $sql = "UPDATE slideshow SET slide_sorrend = '$RowIndex' WHERE slide_id = '$RowID'"; 
    mysqli_query($kapcs, $sql) or die(mysqli_error($kapcs)); 

    echo 'A kép sorrendje sikeresen megváltozott.'; 
} 
else 
{ 
    echo 'Nincs ID'; 
} 
?> 

更新2:

也許這?

mysqli_query($kapcs, "UPDATE slideshow SET slide_sorrend = slide_sorrend + 1 WHERE slide_id != '$RowID'") or die(mysqli_error($kapcs)); 
+0

請在您的問題所需的響應。我不確定你想得到什麼 –

+0

我想知道我放下的那一排是哪一排。例如:aftr下降,該行是第一行,或其第二個... –

回答

1

jQuery .index()是你需要的。

試試這個

$("#table-2").tableDnD(
{ 
    onDrop: function(table, row) 
    { 
     var rows = table.tBodies[0].rows; 

     alert("Index: " + $(row).index()); 

     var debugStr = "Row dropped was ID: "+row.id+""; 
     alert(debugStr); 
    } 
}); 

或者

var item = document.getElementById(row.id); 
alert("Index: " + $(rows).index(item)); 
+1

謝謝!我發現我需要索引,但你速度更快! :) –

+0

我更新了我的帖子,請看看它。 –

相關問題