Je veux ajouter de petites images-flèches pour monter et descendre sur la rangée de table en Javascript (peut-être jQuery) et enregistrer la table réordonnée (seulement la commande) en cookie pour une utilisation ultérieure. Un exemple serait - Joomla, à l'intérieur de la zone d'administration dans la zone Articles (mais cela est fait avec PHP). Merci.Réorganisation des lignes de table avec des images fléchées pour monter et descendre?
Répondre
peut probablement refactorisé un peu plus, mais je laisse l'économie vous:
function swap(a, b, direction){
var html = a.wrapInner('<tr></tr>').html()
a.replaceWith(b.wrapInner('<tr></tr>').html())
b.replaceWith(html)
}
function getParent(cell){ return $(cell).parent('tr') }
$(document).ready(function(){
$('.upArrow').live('click', function(){
var parent = getParent(this)
var prev = parent.prev('tr')
if(prev.length == 1){ swap(prev, parent); }
})
$('.downArrow').live('click', function(){
var parent = getParent(this)
var next = parent.next('tr')
if(next.length == 1){ swap(next, parent) }
})
})
En supposant que ce tableau:
<table>
<tbody>
<tr><td>1</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
<tr><td>2</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
<tr><td>3</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
</tbody>
</table>
jquery 1.3 a publié la méthode la plus proche qui pourrait être utilisée dans votre méthode getParent. – bendewey
vous pourriez également vouloir changer votre swap à next.after (parent.clone()); parent.remove(); et prev.before .... – bendewey
bon appel à propos de plus proche() ... Je dois avoir raté! – Rob
Pour la partie jQuery, vous pouvez modifier this plugin pour cliquer sur les icônes au lieu de glisser-déposer.
Par les commentaires, vous devez changer les lignes 92-94 pour utiliser '.on' vs' .bind' pour jQuery 1.10+ – Pakman
Vous devriez pouvoir le faire avec quelques sélecteurs jQuery simples, capturer l'événement click sur les flèches, et utiliser des sélecteurs pour obtenir l'élément suivant/précédent et les échanger.
Ensuite, utilisez le sélecteur pour obtenir l'identifiant de chaque ligne, mais vous stockez cela - chaque identificateur de ligne pourrait être identifié sur la tr pour faciliter la sélection. Les sélecteurs d'échantillons sont here et stockent dans un cookie, à nouveau simple JS pour ce here.
C'est une vieille question, mais je l'ai trouvé et un des postes me mettre sur la bonne voie, donc pour quelqu'un d'autre que googles ici
utilisant jQuery
function Func(trigger, blnUp){
var trigRow = $("#" + trigger.id).parent().parent();
var prevRow = trigrRow.prev();
var nextRow = trigRow.next();
var trigRowHTML = "";
if(blnUp){
trigRowHTML = prevRow.html();
prevRow.html(trig.html());
}else{
trigRowHTML = nextRow.html();
nextRow.html(trig.html());
}
}
appels de la table doit ressembler à quelque chose comme
<table>
<tbody>
<tr><td>1</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
<tr><td>2</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
<tr><td>3</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
</tbody>
</table>
Si vous avez une table comme l'autre réponse, vous devriez être en mesure de retirer juste un des .parent() et il fera de même .
insertBefore() et insertAfter() fonctionnent bien. Dans l'exemple ci-dessous, j'ai un couple de balises A dans une table. En cliquant sur l'un déplace la ligne vers le bas, l'autre vers le haut. Si vous donnez à vos lignes autorisées à se déplacer (peut-être que vous ne voulez pas déplacer les lignes au-dessus des rangées d'en-tête ou des rangées de bas de page), elles se déplaceront uniquement entre les lignes d'en-tête et de pied de page.
Voici l'une des balises A: < a onclick = "return moveUp (this);" href = "javascript: return 0;" > jusqu'à </a >
function moveUp(aEl) { var me = $($(aEl).parents('tr').get(0)); var prev = me.prev('tr'); if (prev.attr('class') == '_movable') me.insertBefore(prev); return false; } function moveDown(aEl) { var me = $($(aEl).parents('tr').get(0)); var next = me.next('tr'); if (next.attr('class') == '_movable') me.insertAfter(next); return false; }
function UpperBttn_Pressed(this) {
var RowIndex = X.parentNode.parentNode.rowIndex;
var ParentTable = X.parentNode.parentNode.parentElement;
if (RowIndex != 0 && RowIndex != 1) {
ParentTable.moveRow(RowIndex, RowIndex - 1);
}
}
function DownBttn_Pressed(this) {
var RowIndex = X.parentNode.parentNode.rowIndex;
var ParentTable = X.parentNode.parentNode.parentElement;
var NthRow = GetElement("dataTable").rows.length;
if (RowIndex!=NthRow-1) {
ParentTable.moveRow(RowIndex, RowIndex + 1);
}
}
$('.upArrow').livequery('click', function() {
var row = $(this).closest('tr');
var prev = row.prev();
if (prev.length == 1) {
row.detach();
prev.before(row);
}
});
$('.downArrow').livequery('click', function() {
var row = $(this).closest('tr');
var next = row.next('tr');
if (next.length == 1) {
row.detach();
next.after(row);
}
});
- 1. SQL Mass Réorganisation des lignes
- 2. WPG DataGrid: Réorganisation des lignes?
- 3. Comment faire XHTML "table" avec des lignes de table fluide
- 4. Catch réseau monter/descendre adaptateur et l'événement changé d'adresse (Windows, C#)
- 5. Monter des superpositions/snapshots LVM?
- 6. Les dépendances doivent-elles monter ou descendre dans l'arborescence de l'espace de noms?
- 7. Glisser et déposer des lignes de table en utilisant Javascript
- 8. Codes-clés des touches fléchées
- 9. Télécharger et télécharger des images avec ASP.net
- 10. UIToolbar avec des images et des titres tels que UITabBar
- 11. Est-il actuellement "sûr" d'utiliser les flèches de htmlentities à la place des images fléchées?
- 12. C# et touches fléchées
- 13. Insérer des lignes dans la table
- 14. Réorganisation des cellules animées dans un NSTableView
- 15. jQuery suppression des colonnes et des lignes
- 16. Naviguer avec les touches fléchées
- 17. Nommer et organiser des images
- 18. Utilisation de Eclipse TableViewer, comment naviguer et modifier des cellules avec les touches fléchées?
- 19. Gridview Tri avec des images
- 20. WPF ListView animation par réorganisation des articles?
- 21. CSS Pullquote avec des images
- 22. Mathematica GraphPlot avec des images
- 23. WPF: Habillage avec des images
- 24. Réorganisation des éléments dans BindingList en C#?
- 25. pngfix jquery, avec des images
- 26. Réorganisation des Treenodes en C# .NET
- 27. Touches fléchées avec NSTableView
- 28. jQuery autocomplete avec des images
- 29. aide avec des lignes distinctes et les données de commande
- 30. Réduire/Développer des colonnes de tableau (et non des lignes)
Vous voulez inverser l'ordre de tous les éléments, ou à une cellule par niveau? –
Je veux réorganiser les lignes, quelles qu'elles soient, qui permuteraient deux lignes avec tout ce qui est à l'intérieur (images, autres tables, etc.) – Goran