DropzoneJS用DIV表格佈局

我怎樣才能獲得加排在我的懸浮窗，以填補時，它在默認情況下被包裹在這毀了我的表佈局元素表的整個寬度。

說明：

我試圖讓DropzoneJS顯示在表格格式上傳的文件。我的Dropzone在桌面上正確，但我無法正確顯示previewTemplate。所有的首先，這個問題的產生是因爲懸浮窗不能將文件添加到<td></td>元素，所以我將我的表到表格的佈局格式，這樣使用CSS因此

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

我的目標是一個previewTemplate添加到DropzoneJS哪些應該是這樣的

<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>

的問題是，懸浮窗默認添加了一組類dz-processing dz-image-preview dz-error dz-success在previewTemplate一個<div>。根據文檔，它們將被添加到<div>和class="dz-preview"，但無論該類是否存在，其他類都將作爲容器的第一個內部元素添加，該previewTemplate被注入。這意味着，previewTemplate ，這應該是一個錶行，失去了它的屬性，現在只顯示在第一<div class="div-td">

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

這是因爲有是要添加一個額外的<div>一個封裝內該行的寬度。

我對錶CSS看起來像這樣的佈局

/* 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; 
}

文檔可以在這裏找到：http://www.dropzonejs.com/#layout

改變CSS或者JS表示讚賞任何幫助。

來源

2016-09-27 nicolaib

正如在dropzone文檔中所述，您可以根據需要自定義預覽模板，在這種情況下，您只需根據需要將div-tr和div-td類添加到預覽元素http://www.dropzonejs.com/#theming。

下面是如何重寫懸浮窗模板的示例：

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'; 
     }); 
    } 
}

請注意，如果你想使用一個表，你可以通過只用<td>和<tr>包裝預覽中的元素，並使用previewsContainer表而不是div。

因爲元素dz-error-mark和dz-success-mark默認情況下總是在dropzone中可見，所以您可能希望根據事件隱藏它們，這是init函數內部的代碼是什麼。或者，最好不要在開始時顯示它們，並相應地顯示它們。

請記住，當您在模板中進行更改時，如果不修改dropzone的默認行爲，事情將開始顯示不正常。

Here你可以看到一個高度定製的dropzone的例子，在dropzone文檔中也提到過。

來源

2016-09-28 06:49:29 wallek876

我已經嘗試了所有建議以及通過所有這些鏈接。我最初把整個東西當成了一個帶有真正表格元素的表格，但是在將它用作Bower依賴項後，我得到了這個錯誤：dropzone.min.js：1 Uncaught TypeError：a.previewElement.querySelectorAll不是一個函數。我調查了這一點，發現每個人都在寫它不能是表格元素。如果我使用您發佈的JS示例，那麼我會得到'innerHTML未定義'，我猜這是因爲它是一個Angular應用程序。你有沒有提示爲什麼發生這些事情？我會進一步調查。 – nicolaib

它是'TypeError：當我添加InnerHTML語句時無法讀取null屬性'innerHTML'，並且我看到它是因爲DOM在實例化時未加載。我試圖解決這個與$超時和類似的解決，但我不斷收到進一步的錯誤。 – nicolaib

@nicolaib我看到你想通了，只是想指出你得到的錯誤，就像你說的那樣，可能是其他錯誤，因爲這些元素尚未加載，爲了避免這種情況，我的建議是將腳本加載到html body的結尾，就在''close body標籤之前。 – wallek876

我已經解決了這個問題，並且wallek876的回答給了我正確的方向，所以它將成爲我們接受的答案。

答案中的細節解決了這個問題，我看到dropzone-previews在表格的外部，而不是在底部，應該添加新元素。

解決方案：

我感動的upload-container作爲一個id爲<div class="div-table" id="upload-container">像這樣。

我按建議保留<div id="preview-template">，並將<div class="div-tr">作爲previewTemplate的第一個孩子。這個結構給了表格佈局，其餘的樣式都是用CSS來實現的。

我沒有設法將previewTemplate放入HTML中。

來源

2016-09-28 15:22:12 nicolaib

DropzoneJS用DIV表格佈局

回答

相關問題