DropzoneJS mit div Tabellenlayout

Question

Die allgemeine Frage:

Wie kann ich die zusätzliche Zeile in meinem Sprungplatz bekommen die volle Breite der Tabelle zu füllen, wenn sie standardmäßig ist in einem Element gewickelt ist, dass mein Tisch Layout ruiniert .

Erläuterung:

Ich versuche DropzoneJS zu bekommen hochgeladenen Dateien in einem Tabellenformat anzeigen. Meine Dropzone befindet sich korrekt auf meinem Tisch, aber ich kann das previewTemplate nicht korrekt darstellen. Zunächst einmal stellt sich die Frage, weil Dropzone-Dateien hinzufügen kann nicht auf ein <td></td> Element, so umgewandelt ich meine Tabelle in eine Tabelle Layout-Format wie diese mit CSS

<div class="div-tr"> 
    <div class="div-td"></div> 
    <div class="div-td"></div> 
</div> 

Mein Ziel daher eine previewTemplate zu DropzoneJS hinzuzufügen, ist die aussehen würde wie diese

<div class="div-tr"> 
    <div class="div-td"> 
     <i class="fa fa-file-o"></i> 
    </div> 
    <div class="div-td"> 
     <div class="dz-filename"> 
      <span data-dz-name></span> 
     </div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-size" data-dz-size></div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-progress"> 
      <span class="dz-upload" data-dz-uploadprogress></span> 
     </div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-success-mark"> 
      <span>✔</span> 
     </div> 
     <div class="dz-error-mark"> 
      <span>✘</span> 
     </div> 
    </div> 
</div> 

Das Problem ist, dass Dropzone standardmäßig eine Reihe von Klassen dz-processing dz-image-preview dz-error dz-success zu einem <div> im previewTemplate hinzufügt. Laut den Dokumenten werden sie zu einem <div> mit class="dz-preview" hinzugefügt, aber unabhängig davon, ob diese Klasse existiert oder nicht, werden die anderen Klassen als erstes inneres Element des Containers hinzugefügt, in das previewTemplate eingefügt wird. Dies bedeutet, dass die previewTemplate die, sollte eine Tabellenzeile sein, verliert es Eigenschaften ist und zeigt nur noch in der Breite des ersten <div class="div-td">

+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
| | | | |           Row added by upload 
+---+---+--+--+ 

Dies geschieht, weil es eine zusätzliche <div> ist hinzugefügt, dass die innere der Reihe umschließt.

sieht mein CSS für die Tabelle wie folgt

/* DIV table style */ 

.div-table{ 
    display: table; 
    width: 100%; 
    background-color: #fff; 
} 
.div-tr{ 
    display: table-row; 
} 
.div-th, .div-td { 
    display: table-cell; 
    padding: 8px 15px; 
    border-bottom: 1px solid #eaeff0; 
    vertical-align: middle; 
} 
.div-thead{ 
    display: table-header-group; 
    font-weight: bold; 
} 
.div-tfoot{ 
    display: table-footer-group; 
    font-weight: bold; 
    background-color: #fff; 
} 
.div-tbody{ 
    display: table-row-group; 
} 

Dokumentation für das Layout hier zu finden ist: http://www.dropzonejs.com/#layout

Jede Hilfe zum Ändern der CSS oder JS geschätzt wird. nach Ihren Bedürfnissen, http://www.dropzonejs.com/#theming

Answer 1

Wie in der Dropzone Dokumentation angegeben Sie die Vorschau Vorlage anpassen können, wie Sie es wünschen, in diesem Fall müssen Sie nur Ihre div-tr und div-td Klassen zu der Vorschau Elemente hinzuzufügen. Hier

ist ein Beispiel dafür, wie die Dropzone Vorlage außer Kraft setzen:

Html:

<div class="dropzone" id="myDropzone"></div> 

    <div class="dropzone-previews div-table"></div> 

    <div id="preview-template" style="display: none;"> 
     <div class="dz-preview dz-file-preview div-tr"> 
      <div class="dz-details"> 
       <div class="dz-filename div-td"><span data-dz-name></span></div> 
       <div class="dz-size div-td" data-dz-size></div> 
       <div class="dz-image div-td"> 
        <img data-dz-thumbnail /> 
       </div> 
      </div> 
      <div class="dz-progress div-td"><span class="dz-upload" data-dz-uploadprogress></span></div> 
      <div class="div-td"> 
       <div class="dz-success-mark"><span>✔</span></div> 
       <div class="dz-error-mark"><span>✘</span></div> 
      </div> 
      <div class="dz-error-message div-td"><span data-dz-errormessage></span></div> 
     </div> 
    </div> 

js:

Dropzone.options.myDropzone = { 
    previewsContainer: ".dropzone-previews", 
    previewTemplate: document.getElementById('preview-template').innerHTML, 
    url: 'upload.php', 
    init: function() { 
     this.on('success', function(file){ 
      var errordiv = document.getElementsByClassName('dz-error-mark'); 
      errordiv[errordiv.length - 2].style.display = 'none'; // The -2 is because there is also one in the preview-template 
     }); 
     this.on('error', function(file){ 
      var succesdiv = document.getElementsByClassName('dz-success-mark'); 
      succesdiv[succesdiv.length - 2].style.display = 'none'; 
     }); 
    } 
} 

Beachten Sie, wenn Sie eine Tabelle verwenden Sie nur können Wickeln Sie die Elemente in der Vorschau mit <td> und <tr> und verwenden Sie als previewsContainer eine Tabelle anstelle einer div.

Da die Elemente dz-error-mark und dz-success-mark in der Dropzone standardmäßig immer sichtbar sind, möchten Sie sie möglicherweise entsprechend den Ereignissen verbergen, das ist der Code innerhalb der init-Funktion.Oder besser ist es, sie am Anfang nicht anzuzeigen und entsprechend zu zeigen.

Beachten Sie, dass bei Änderungen in der Vorlage die Dinge nicht richtig angezeigt werden, wenn Sie auch das Standardverhalten von dropzone nicht ändern.

Here können Sie ein Beispiel für eine stark angepasste Dropzone sehen, die auch in der Dropzone-Dokumentation erwähnt wird.

Answer 2

Ich habe das Problem gelöst, und die Antwort von wallek876 schickte mich in die richtige Richtung, so wird es die akzeptierte Antwort sein.

Das Detail in der Antwort, die es löste, war, dass ich sah, dass die dropzone-previews auf der Außenseite der Tabelle statt unten war, wo das neue Element hinzugefügt werden sollte.

Lösung:

zog ich die upload-container als ID in die <div class="div-table" id="upload-container"> wie so.

Ich behielt die <div id="preview-template"> wie vorgeschlagen und angewendet die <div class="div-tr"> als das erste Kind der previewTemplate. Diese Struktur gab das Tabellenlayout zurück und der Rest des Stylings wurde mit CSS angewendet.

Ich habe es nicht geschafft, die previewTemplate im HTML zu setzen.