jqueryとphpでドラッグ＆ドロップ

Product Name       Barcode   Quantity  
    2*WHITER RIN (200 GM)     8901030295232 null  
    2*WHITER RIN JASMINE FRESH(500 GM)  8901030295201 null 
    2*WHITER RIN (200 GM)     8901030295232 null  
    2*WHITER RIN JASMINE FRESH(500 GM)  8901030295201 null 
    2*WHITER RIN (200 GM)     8901030295232 null  
    2*WHITER RIN JASMINE FRESH(500 GM)  8901030295201 null 
    2*WHITER RIN (200 GM)     8901030295232 null  
    2*WHITER RIN JASMINE FRESH(500 GM)  8901030295201 null 
    2*WHITER RIN (200 GM)     8901030295232 null  
    2*WHITER RIN JASMINE FRESH(500 GM)  8901030295201 null 
    2*WHITER RIN (200 GM)     8901030295232 null  
    2*WHITER RIN JASMINE FRESH(500 GM)  8901030295201 null 


          Delete

これは私のテーブルです。特定の行をドラッグまたは選択できるように選択するにはjquery関数が必要です。削除ボタンをクリックするとjqueryとphpでドラッグ＆ドロップ

ビューコード

 <?php $i=0; 
    foreach($aaa as $row) 
    {$i++; 
?> 
    <tr> 
     <!-- <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$i?></td> --> 
      <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$row[0]?></td> 
      <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$row[1]?></td> 
      <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$row[2]?></td> 

     </tr> 
    <?php 
     } 
     ?>

出典

2011-08-04 Anonymous

これまで行ってきたことをお見せできますか？ –

私はちょうど削除ボタンを与えることによって行を削除することができました –

あなたは人々がより良いアドバイスを与えることができるようにそれを行った方法を示すことができますか？ –

を持っています。 <td>からbgcolor属性を削除しました。これは、selectedクラスの背景色を上書きするためです。

<head> 
<script src="http://code.jquery.com/jquery-1.6.2.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script> 
<style> 
.selected { 
    background-color:gray !important; 
} 
</style> 

</head> 
<?php 
$aaa = array(); 
$aaa[] = array(1, "Data One", "Data Two"); 
$aaa[] = array(2, "Data Three", "Data Four"); 
$aaa[] = array(3, "Data Five", "Data Five"); 
$aaa[] = array(4, "Data AAA", "Data BBB"); 
$aaa[] = array(5, "Data AAAAAA", "Data SSSSBBB"); 
?> 

<table border=1> 
<tr class='record'> 
    <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows">Row</td> 
    <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows">Data 1</td> 
    <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows">Data 2</td> 
</tr> 

<?php $i=0; 
    foreach($aaa as $row) 
    {$i++; 
?> 
<tr class='record'> 
    <td align="left" valign="middle" class="rows"><?=$row[0]?></td> 
    <td align="left" valign="middle" class="rows"><?=$row[1]?></td> 
    <td align="left" valign="middle" class="rows"><?=$row[2]?></td> 
</tr> 
<?php } ?> 
</table> 
<input type="button" id="deleterecords" value="Delete"> 

<script type="text/javascript"> 
$(document).ready(function() { 

    // assign attribute selected to clicked rows 
    $("tr[class*='record']").live('click', function() { 
     // comment line below if you want multi-selected records, 
     $("tr[class*='selected']").removeClass("selected"); 
     $(this).addClass("selected"); 
    }); 

    // remove selected records upon clicking delete 
    $("input[id='deleterecords']").live('click', function() { 
     $("tr[class*='selected']").remove(); 
    }); 
}); 
</script>

出典

2011-08-04 08:30:25 ace

感謝のエース...それをチェック.... –

このチュートリアルを見て誰もがjqueryの中に解決策を見つけるために私を助けることができる...削除して、PHPする必要があります。

http://robertfrew.wordpress.com/2010/03/25/drag-drop-sort-delete-with-jquery-jqueryui/

出典

2011-08-04 06:24:37

私は<tr>に任意のクラス "レコード" <tr class="record">を割り当てています。そして、id = 'deleterecords'の削除ボタン。クリックと削除の機能です。

// assign attribute selected to clicked rows 
$("tr[class*='record']").click(function() { 
    // comment line below if you want multi-selected records, 
    $("tr[class*='selected']").removeClass("selected"); 
    $(this).addClass("selected"); 
}); 

// remove selected records upon clicking delete 
$("input[id='deleterecords']").click(function() { 
    $("tr[class*='selected']").remove() 
});

これは動作する実装hereです。ドラッグの削除に関しては、ユーザーの機能が不明です。

PHPコードについては

、代わりの

<?php $i=0; 
foreach($aaa as $row) 
{$i++; 
?> 
    <tr>

あなた<tr>に次のクラス "記録" を追加します。

また、次のスタイルを追加して後で編集して、あなたが気に入ったものを編集してください。これは、選択された行をマークすることです。

<style> 
.selected { 
    background-color:gray;  
} 
</style>

また、私の削除ボタンは、これはPHPの完全なコードであるのid = 'deleterecords'

<input type="button" id="deleterecords" value="Delete">

出典

2011-08-04 06:29:15 ace

+1ドラッグのコメントです。削除ボックスがある場合、ボタンの代わりにアイテムをどこにドロップするかは、意味があります。 –

しかし、私はこのコードを実装するときに選択することも削除することができません？ –

ああ、これをチェックしてください。http://jsfiddle.net/jPEeq/ あなたは何かを見逃しているかもしれません。私はそこにhtmlとJSを持っており、jquery 1.6.2とjquery ui 1.8.14も含まれていることにも注意してください。 – ace

jqueryとphpでドラッグ＆ドロップ

答えて

関連する問題