1
J'ai une table HTML et je voudrais changer la table en grille en utilisant le plugin JQGrid de jQuery.Exemple de tabletteogrid de jQuery
Comment est-ce que je ferais cela?
Voici mon HTML:
<HTML>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
tableToGrid("#distTable");
});
</script>
</head>
<body>
<table id="distTable">
<thead>
<tr>
<th>Name</th>
<th>Platform</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">102803</td>
<td align="center">102803d22222222222222222222222222222222222222gs</td>
<td align="center">21587231</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">10280311111111111111111111111</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
</tbody>
</table>
</body>
</html>
Où et comment j'ajouterions le script jQuery?
avez-vous parcouru la documentation de plugin ..... en ce que vous trouverez où et comment ajouter le script jQuery? – Vivek
@Vivek: Va le vérifier. –
@Vivek: besoin de peu d'aide de votre part. J'ai essayé avec un exemple: