2015-01-07 52 views
0

在我的MVC 3應用程序中,我的問題是,我有一個由返回視圖的記錄數生成的行的表。 如果記錄不包含文件,這些行有複選框和上傳btn功能。 這個想法是,如果沒有文件與Cert列下顯示「No Cert」的記錄相關聯。 只有當複選框被選中時,這個單元格纔會顯示一個「上傳文件」btn。 點擊此btn並打開窗口選擇文件 選中文件後,會彈出一條消息,通知用戶文件已成功上傳。 但是,該選定行的Cert下的單元現在將爲空白。只有刷新頁面纔會顯示文件名稱。如何使用jQuery將html和css應用於表格中的選定行?

我曾嘗試添加一個關聯的類的div來顯示「上傳」,它爲第一個工作。 但是,當我在另一個選中的行上重複該過程時,「上傳」的div再次應用於第一行,並且剛剛選擇的行中的單元格留空。 我相信這是因爲代碼正在使用td,並在下面的onComplete函數中使用了第一個ID「attBtn」。

     onComplete: function (id, fileName, responseJson) { 
        var resultMessage = document.getElementById('resultMessage'); 
        alert(responseJson.msg); 
        $('.qq-uploader').remove(); 
        $('#attBtn').prepend('<div class="uploadedTag"><p>Uploaded</p></div>'); 

科處理的上傳功能表:

 @if (Model.ElementAt(index).CertName != null) 
      { 
       <td>@Html.DisplayFor(m => Model.ElementAt(index).CertName)</td> 
      } 
      else 
      {      
       <td id ="attBtn" class="file-uploader-attachment-Class"></td> 
      } 

腳本在視圖中使用:

<script type="text/javascript"> 
$(document).ready(function() { 

    function handleCheckbox() { 
     if ($(this).find(':checkbox').is(':checked')) { 
      createUploader($(this)); 

      $(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked"); 
     } 
     else { 
      $(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked"); 
      $(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html()); 
     } 
    } 

    $('tr').each(handleCheckbox); 
    $('tr').on('click', handleCheckbox); 


    function createUploader(container) { 

     var elements = container.find('.file-uploader-attachment-Class'); 

     var CAL_ID = container.find(':checkbox').val() 

     Array.prototype.filter.call(elements, function (element) { 

      var uploader = new qq.FileUploader({ 
       element: element, 
       sizeLimit: 2147483647, // max size 
       action: '/CalibrationViewer/AttachmentUpload', 
       allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'], 
       params: { 
        customer: CUST_NAME, 
        calibrationId: CAL_ID 
       }, 
       multiple: false, 
       debug: false, 

       onComplete: function (id, fileName, responseJson) { 
        var resultMessage = document.getElementById('resultMessage'); 
        alert(responseJson.msg); 
        $('.qq-uploader').remove(); 
        $('#attBtn').prepend('<div class="uploadedTag"><p>Uploaded</p></div>'); 

       } 

      }); 

     }); 
    } 
}); 

Cert column ScreenShot

如何識別我正在使用的當前行。 ? 這將是偉大的,如果我可以得到剛剛插入到單元格中的文件名稱而不是「已上傳」的名稱

+0

我要發佈我的回答的想法,但我認爲這是不夠具體。我看不到您如何處理上傳按鈕點擊事件。但是在那個點擊事件中,你知道你在玩什麼行,因爲你知道點擊了哪個按鈕。你可以添加一個類到按鈕中的行(或單元格),甚至可以在o​​nComplete事件中用作選擇器。然後在完成後移除課程。 – Joel

回答

0

我不打算試圖找出您的具體元素類,而只是指出一般這是一種非常常見的模式,用於隔離html重複塊中的實例。

由於您使用的表,行會是一個<tr>

$('.someButtonClass').click(function(){ 

    /* "this" is the instance of the elements 
     represented by selector that event triggered on 
    */ 
    var $row = $(this).closest('tr'); /* isolate row instance*/ 

    /* now look within row instance to manipulate descendant elements */ 

    $row.find('.someOtherClass').doSomething(); 
}); 
+0

我會嘗試在代碼中進行合併,基於上述我將var $行添加到了createUpLoader和onComplete函數下的$ row.find,但沒有喜悅,我會繼續,感謝您的建議。 – mkell

+0

我通過使用下列元素取得了一些進展 - elements.closest('。file-uploader-attachment-Class')。prepend('

Uploaded

'); - 然而,同樣的方法不會允許我刪除qq-uploader類,所以現在我已經在同一個單元格中「上傳」和「上傳文件」btn? – mkell

相關問題