1. Accueil
  2. Question et réponse
  3. Drap-n-drop colonnes de tableau HTML (pas lignes)

Drap-n-drop colonnes de tableau HTML (pas lignes)

2010-06-10 6 views

Répondre

1

Le plug-in jqGrid (dernières versions à github repo) a une fonction permettant de réorganiser les colonnes - the documentation is here. Il ne semble pas avoir de support par glisser/déposer pour réorganiser les colonnes.

Voici un exemple de travail personnalisé de colonnes de table déplaçables utilisant uniquement jQuery et jQuery UIsortable interaction.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
    <script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="jquery-ui-1.8.1.custom.css"> 

    <style type="text/css"> 
     th 
     { 
      background-color: #e0e0e0; 
      cursor: pointer; 
     } 
     .ui-state-highlight 
     { 
      height: 1.5em; 
      line-height: 1.2em; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      var $table1 = $('#table1'); 
      var $table1Thead = $table1.find('thead'); 
      var $table1Tbody = $table1.find('tbody'); 

      var maxCols = 10; 
      var maxRows = 50; 

      // populate fake data 
      for (var i = 1; i <= maxCols; i++) { 
       $table1Thead.append('<th id="column' + i + '">column ' + i + '</th>'); 
      } 
      var rowHtml; 
      for (var x = 1; x <= maxRows; x++) { 
       rowHtml = '<tr>'; 
       for (var i = 1; i <= maxCols; i++) { 
        //rowHtml += '<td>row ' + x + ', column ' + i + '</td>'; 
        rowHtml += '<td>column ' + i + '</td>'; 
       } 
       rowHtml += '</tr>'; 
       $table1Tbody.append(rowHtml); 
      } 

      // set an index helper on each th element 
      $table1Thead.find('th').each(function() { 
       var thElement = $(this); 
       thElement.data('columnIndex', $table1Thead.find('th').index(thElement)); 
      }); 

      $table1Thead.sortable({ 
       items: 'th', 
       containment: 'parent', 
       helper: 'clone', 
       placeholder: 'ui-state-highlight', 
       update: function(event, ui) { 
        var prevPos = ui.item.data('columnIndex'); 
        var newPos = $table1Thead.find('th').index(ui.item); 

        // adjust all the row elements 
        $table1Tbody.find('tr').find('td:eq(' + prevPos + ')').each(function() { 
         var tdElement = $(this); 
         var tdElementParent = tdElement.parent(); 
         tdElement.remove(); 

         tdElementParent.find('td:eq(' + newPos + ')').before(tdElement);       
        }); 

        // re-set an helper indexes 
        $table1Thead.find('th').each(function() { 
         var thElement = $(this); 
         thElement.data('columnIndex', $table1Thead.find('th').index(thElement)); 
        }); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <table id="table1"> 
     <thead> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</body> 
</html>

Source

2010-06-10 16:06:19

+0

La solution ne fonctionne pas complètement dans mon cas, mais j'ai l'idée. Peut être on aura besoin de cette solution aussi: http://dev.jqueryui.com/ticket/4825 – artvolk

1

Ce JavaScript fait glisser-déposer sur les colonnes. Comme il n'utilise aucun framework, vous pouvez le combiner facilement avec n'importe quel autre framework. Pourquoi avez-vous besoin d'une solution basée sur jQuery quand vous pouvez en avoir une sans avoir besoin d'un framework spécifique.

Source

2010-06-10 14:41:52 2ndkauboy

+0

Je vais devoir le personnaliser dans le futur, donc je voudrais rester avec l'interface utilisateur JQuery \ JQuery pour la consistance. – artvolk

1

Une autre approche pour réorganiser les colonnes avec l'interface utilisateur JQuery Sortable: http://jsfiddle.net/pg7wH/

besoins

  • jQuery (testé avec 1.7.2 - 2.0)
  • jQuery UI (testé avec 1,8. 18 - 1.10.2)

HTML:

<button id="getSorting">Get sorting</button><input id="showSorting" /> 
<table id="table1"> 
    <thead class="ui-state-default"></thead> 
    <tbody></tbody> 
</table>

JS:

$(function() { 
    var $table1 = $('#table1'); 
    var $table1Thead = $table1.find('thead'); 
    var $table1Tbody = $table1.find('tbody'); 
    var startPos; 
    var oldPos; 

    // populate fake data 
    var maxCols = 10; 
    var maxRows = 50; 
    for (var i = 1; i <= maxCols; i++) { 
     $table1Thead.append('<th sort="' + i + '" id="column[' + i + ']">column ' + i + '</th>'); 
    } 
    var rowHtml; 
    for (var x = 1; x <= maxRows; x++) { 
     rowHtml = '<tr>'; 
     for (var i = 1; i <= maxCols; i++) { 
      //rowHtml += '<td>' + i + ' - ' + x + '</td>'; 
      rowHtml += '<td>col ' + i + '</td>'; 
     } 
     rowHtml += '</tr>'; 
     $table1Tbody.append(rowHtml); 
    } 

    // Show sorting 
    $("button#getSorting").click(function() { 
     $('#showSorting').val($table1Thead.sortable('toArray', { attribute: "sort" })) 
     console.log($table1Thead.sortable('toArray', { attribute: "sort" })) 
    }) 

    // The sorting 
    $table1Thead.sortable({ 
     axis: "x" , 
     items: 'th', 
     containment: 'parent', 
     cursor: 'move', 
     helper: 'clone', 
     distance: 5, 
     opacity: 0.5, 
     placeholder: 'ui-state-highlight', 
     start: function(event, ui) { 
      startPos = $table1Thead.find('th').index(ui.item); 
      oldPos = startPos; 
     }, 
     change: function(event, ui) {    
      // Get position of the placeholder 
      var newPos = $table1Thead.find('th').index($table1Thead.find('th.ui-state-highlight')); 

      // If the position is right of the original position, substract it by one in cause of the hidden th 
      if(newPos>startPos)newPos--; 

      // move all the row elements 
      //console.log('Move: 'oldPos+' -> '+newPos); 
      $table1Tbody.find('tr').find('td:eq(' + oldPos + ')').each(function() { 
       var tdElement = $(this); 
       var tdElementParent = tdElement.parent(); 
       if(newPos>oldPos)// Move it the right 
        tdElementParent.find('td:eq(' + newPos + ')').after(tdElement); 
       else// Move it the left 
        tdElementParent.find('td:eq(' + newPos + ')').before(tdElement); 
      }); 
      oldPos = newPos; 
     } 
    }); 
});

Grâce à Nate Pinchot pour son exemple.

Source

2013-05-23 14:41:08

Questions connexes

 Questions connexes