在我的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>');
}
});
});
}
});
如何識別我正在使用的當前行。 ? 這將是偉大的,如果我可以得到剛剛插入到單元格中的文件名稱而不是「已上傳」的名稱
我要發佈我的回答的想法,但我認爲這是不夠具體。我看不到您如何處理上傳按鈕點擊事件。但是在那個點擊事件中,你知道你在玩什麼行,因爲你知道點擊了哪個按鈕。你可以添加一個類到按鈕中的行(或單元格),甚至可以在onComplete事件中用作選擇器。然後在完成後移除課程。 – Joel