將圖像/圖標添加到數據表中的行值

我需要將圖像/圖標添加到行中的最後一列。當我懸停時，該圖標應該有一個工具提示，應該顯示來自服務器的數據。我不知道如何實現這一點。任何已實施此功能的專家請幫助我。提前致謝。將圖像/圖標添加到數據表中的行值

編輯

這是我的樣本數據，我需要的時候在顯示器徘徊在提示「數據」工具提示添加一個圖標，最後一列。

{ 
    "iTotalRecords": 5, 
    "sEcho": "1", 
    "aaData": [ 
     [ 
      "V2993ASFKH230943", 
      "Honda", 
      "Accord", 
      "data" 
     ], 
     [ 
      "V2993A39SNF30943", 
      "Honda", 
      "CRV", 
      "data" 
     ], 
     [ 
      "V4833A39SNF30943", 
      "Acura", 
      "TSX" 
     ], 
     [ 
      "V4833RE9SNF30943", 
      "Acura", 
      "TL", 
      "data" 
     ], 
     [ 
      "V9383RE9SNF30943", 
      "Acura", 
      "MDX", 
      "data" 
     ] 
    ], 
    "iTotalDisplayRecords": 5 
}

[更新]

圖像標記結束這樣看：

var imgTag = '<span class="mytext" ><span class="ui-icon ui-icon-wrench" ></span>';

一個要求也是有模態對話框出現在懸停。下面是打開模式的jQuery代碼。

$(".mytext").mouseover(
      function() { 
       var width = 250; 
       var height = 270; 
       var posX = $(this).offset().left - $(document).scrollLeft() 
         - width + $(this).outerWidth(); 
       var posY = $(this).offset().top - $(document).scrollTop() 
         + $(this).outerHeight(); 
       //alert(posX + ", " +posY); 
       $(".mytext").dialog({ 
        resizable:false, 
        width : width, 
        height : height, 
        position : [ posX, posY ] 
       }); 
      });

這是不知何故無法正常工作，當我懸停在它上面。它不觸發jQuery的模態

UPDATE

你是正確的有一個時機的問題。我解決了這個問題。現在，當我懸停在它上面時，將所有圖像加載到模態中，即，我具有的行數是打開的模態對話框的數量。我需要將值aData [3]傳遞給jquery模式。

來源

2012-03-25 user525146

關於模態對話框：您正在使用一個自我監聽的事件綁定器，所以你有一個計時問題。您要綁定工具提示的元素在執行時不可用。您可以逐行執行綁定（不推薦）或將您的偵聽器設置爲祖先。在示例代碼中，我沒有看到模態內容設置的位置。它使用jQuery UI嗎？（.dialog（）是一個常用的函數名稱，但它在jQuery UI中）。該對話框實際上是模態的（需要動作）還是僅出現一個對話框？ – 2012-03-26 20:50:40

我正在抓我的頭，將內容傳遞給模態。它只是一個對話框，但其內容爲aData [3]。 – user525146 2012-03-27 13:13:19

以示例更新我的回答 – 2012-03-27 14:09:22

這將取決於如何實施工具提示。每個第三方的「Fancy」JavaScript工具提示都會以不同的方式做事。這裏的例子只是展示瞭如何獲取兩部分數據（make和model）並將它們推入單元格的「title」屬性中，這將觸發瀏覽器的內置工具提示。

我想你會使用一個工具提示插件或其他東西，所以你必須採取這個例子的一般原則，並使它們適應特定的工具提示。好，足夠的序言。

這一切會在fnRowCallback 發生[更新：1.10向前只是使用「rowCallback」]，這是在數據表對象的屬性，你可以在初始化過程中設置。通過這樣做，會發生什麼情況是，每行呈現後，您都有機會修改HTML（nRow）並在修改後返回，以便將其推送到DOM中。

（注意：當它幫助可讀性，我傾向於讓更多的變數比是絕對必要的我還留着iDisplayIndex和iDisplayIndexFull躺在身邊，您應該可以，如果你想刪除它們。）

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
    var theMake = aData[1], 
     theModel = aData[2]; 

    var imgTag = '<img href="/images/icon.png" title="' + theMake + ' ' + theModel + '" class="hoverImage"/>'; 
    /* result example: <img href="/images/icon.png" title="Honda CRV" class="hoverImage"/> */ 

    $('td:eq(3)', nRow).html(imgTag); // replace the word "data" with the new image markup 

    return nRow; 
}

現在，當您將圖像懸停時，工具提示將顯示製作和模型。

同樣，這不會爲特定的工具提示插件做任何事情，儘管您可能正在使用也從標題獲取其信息的插件，這將很方便。對於這些插件，你只需要添加一個類到觸發插件的imageTag（class =「tooltip」或其他）。

[更新]所以使用jQuery UI的對話框作爲一個例子

：許多自定義對話框功能動態創建一個「容器」節點，然後在其上調用dialog()。我更喜歡在基礎文檔中有一個通用的可重用容器節點，然後在需要時填充它。

我喜歡把我的身體關閉前，因爲這是jQuery UI的是要堅持它，當你用它無論如何做：

<!-- ... --> 
    <div id="dialogContainer"></div> 
</body>

在你的CSS，你將其設置爲默認隱藏（#dialogContainer { display:none }）。

既然你有容器，你可以使用它的.dialog()函數。使用上面的原始示例（注意我已經將類「hoverImage」添加到它），您將填充數據[3]到圖像的標題中，而不是我的示例中的任何內容。標題充當數據[3]數據的「存儲」。

現在，外面的數據表初始化完全，在您的文檔準備功能（你可能已經有一個），你可以在MouseEnter事件綁定：

$('#tableContainer').on('mouseenter', '.hoverImage', function(e) { e.preventDefault; // if you want to prevent the browser tooltip var dialogContainer = $('#dialogContainer'); dialogContainer.html(this.title); // replace contents of dialog with the title of the image dialogContainer.dialog({ /* options */ }); });

來源

2012-03-26 17:38:25

我真的很抱歉打擾你。我從jquery ui中獲得了圖像，當我將鼠標懸停在它上面時，應該用jquery模態UI來觸發它。從上面的示例中，如果我調用fnRowCallBack中的模式，模式將在頁面加載時打開，但不會在我將鼠標懸停在圖像上時打開。 – user525146 2012-03-27 14:32:39

這是一個不好的例子。我已經更新了它。希望它會更好，但我現在可能正忙於在這裏寫出體面的代碼。 ;-) – 2012-03-27 14:47:45

非常感謝你..它的工作對我來說有一些調整.. – user525146 2012-03-27 20:46:59

與其試圖將圖像數據本身存儲在數據庫中，我將圖像存儲在服務器上的文件夾中，並將圖像的地址存儲在數據庫中。您還可以存儲其他元信息，如高度，寬度和 - 如您所說 - 替代文字。如果需要，您可以構建將代碼上傳到該文件夾的代碼，並且當您上傳代碼時，您可以將圖像數據添加到數據庫中。

來源

2012-03-26 17:35:36

將圖像/圖標添加到數據表中的行值

回答

相關問題