Bootstrap-Tabelle - Wie width width 0

Question

Ich mache eine Website mit einer Bootstrap-Tabelle. Es gibt Zeilen mit Spalten, jede Zeile mit einer Bearbeitungsschaltfläche. Um die Tabelle zu laden, zeigen Sie Spalten an und blenden andere aus.

Wenn es in die Schaltfläche klicken, öffnen Sie ein Fenster-moddal mit den Daten dieser Zeile. Es gibt ein kleines Problem: Wenn die Spalte ausgeblendet ist, werden die Informationen nicht angezeigt, weil ich die Methode POST verwende.

Meine Idee ist Breite 0 zu den versteckten Spalten geben, die Daten werden auf der Website sein, aber die 0 der Breite.

Mein Code:

<table class='table-bordered' id='tableprod' 
            data-toggle='table' 
            data-toolbar='#toolbar' 
            data-show-refresh='true' 
            data-show-toggle='true' 
            data-sort-name='name' 
            data-sort-order='desc' 
            data-show-columns='true' 
            data-pagination='true' 
            data-search='true'> 

         <thead class='thead-inverse'> 
          <tr> 
           <th data-switchable='false' data-checkbox='true'></th> 
           <th data-switchable='false'></th> 
           <th data-sortable='true'>EDICIÓ</th> 
           <th data-sortable='true'>PÀG.</th> 
           <th data-sortable='true' data-switchable='false'>CODI</th> 
           <th data-switchable='false'>IMATGE</th> 
           <th data-sortable='true'>DESCRIPCIÓ CAT</th> 
           <th data-sortable='true' data-visible='false'>DESCRIPCIÓ ESP</th> 
           <th data-sortable='true'>MARCA</th> 
           <th data-sortable='true'>GRAMATJE</th> 
           <th data-sortable='true' data-visible='false'>DESTACAT</th> 
           <th data-sortable='true'>PVP-CAT</th> 
           <th data-sortable='true'>PVP-LEV</th> 
           <th data-sortable='true'>PVP-AND</th> 
           <th data-sortable='true'>PVP-CEN</th> 
           <th data-sortable='true'>PVP-NOR</th> 
           <th data-sortable='true'>PVP-VAS</th> 
           <th data-sortable='true'>PVP-SPAR</th> 
           <th data-sortable='true' data-visible='false'>USER</th> 
           <th data-sortable='true' data-visible='false'>FECHA-MOD</th> 
           <th data-sortable='false' data-switchable='false'>EDIT</th> 
          </tr> 
         </thead> 

diese Belastungsdaten von PHP-Skript ...

Die versteckten Spalten zeigen nicht die Werte des Fensters modal. Ich denke, dass eine Lösung alle Spalten zeigt, aber alle Spalten mit der Breite 0, der Effekt ist der selbe, der versteckte Spalten.

Meine Codewerte im Modal-Fenster hinzuzufügen:

/* EDIT MODAL WINDOW */ 

      $('#edit').on('show.bs.modal', function (event) { 

        var $button = $(event.relatedTarget) // Button that triggered the modal 
        var row = $button.closest("tr"), // edit button is in the same row as data you want to change 
        $tds = row.find("td"); // get all table cells in that row 

        $.each($tds, function(index,value) { 

        var field = $(this).data("field"); 

        console.log($(this).text()); 

        $('[name="' + field +'"]').val($(this).text()); //input name in the modal window 
        }); 

       var src_value = $tds.closest("td").find('img').attr('src'); 
       $('[name="imagen"]').attr("src",src_value); 

      }); 

Und von anderer PHP-Datei aktualisieren, um die Datenbank:

$codigo = $_POST['codigo']; 
$edicion = $_POST['edicion']; 
$pagina = $_POST['pagina']; 
$descripcion_esp = $_POST['descripcion_esp']; 
$descripcion_cat = $_POST['descripcion_cat']; 
$marca = $_POST['marca']; 
$gramaje = $_POST['gramaje']; 
$destacado= $_POST['destacado']; 
$pvp_cat = $_POST['pvp_cat']; 
$pvp_lev = $_POST['pvp_lev']; 
$pvp_and = $_POST['pvp_and']; 
$pvp_cen = $_POST['pvp_cen']; 
$pvp_nor = $_POST['pvp_nor']; 
$pvp_vas = $_POST['pvp_vas']; 
$pvp_spar = $_POST['pvp_spar']; 

$query = "UPDATE....." 

Wie die Breite der Spalten des bootstrap- ändern Tabelle?

Answer 1

Ich bin nicht sicher, was das Problem ist, aber wenn Sie nur eine Spalte ausblenden möchten könnten Sie data-visible:

<th data-visible="false">Column</th> 

ich eine Lösung für Ihren Fall haben, nur die Spalten verstecken mit data-visible wie Shows in obigen Code ihnen dann zeigen, wenn Sie die tds mit iterieren wollen:

$('table').bootstrapTable('showColumn', 'columnName'); 

Und wenn Sie das modale schließen verstecken sie wieder:

$('table').bootstrapTable('hideColumn', 'columnName'); 

Sie könnten alle versteckten Spalte each() Methode mit .bootstrapTable('getHiddenColumns') zeigen:

$.each($('table').bootstrapTable('getHiddenColumns'), function (key, column) { 
    $('table').bootstrapTable('showColumn', column['field']); 
}); 

Hoffnung, das hilft.