jqGrid 3.4中的自定義數據工具提示

我一直在使用優秀的jqGrid插件，它工作的很棒。最近，我被要求爲網格實現一些自定義工具提示。現在，documentation是非常徹底的，但它沒有解決如何（如果有可能的話）來完成這一點。jqGrid 3.4中的自定義數據工具提示

以下是我正在尋找的一個示例：

| col A | col B | ...
|數據|數據| ...
| （鼠標懸停） - data x

我已經通過文檔和源查找了/如何定義工具提示，但最近我得到的是在編輯模式下按鈕的自定義工具提示。我有一個事件處理程序的afterInsertRow事件 - 通過我可以得到rowId等，但我不知道如何定義在該事件的HTML屬性。

編輯：澄清，我想對單個細胞的標題屬性設置爲一個特定的數據（即我已經有在的jqGrid模型）

編輯2：我已經試過插入下面進入afterInsertRow事件，沒有快樂，其中威剛是JSON模式，到期日期是型號名稱：

afterInsertRow: function(rowid, aData) { 
       grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

在同一事件處理程序下面的代碼做的工作，但是：

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

編輯3：使用redsquare的優秀suggesstions，我已經確定標題屬性有時設置後afterInsertRow事件：我已經通過並確定它是由註釋中概述的任何方法正確設置，但不幸的是，當我試圖進一步嘗試時，我得到的源代碼不適用於此位置，這意味着我無法確切地看到標題的更改位置。

編輯4 :(感謝您的耐心和幫助我通過這個工作！）再次採取redsquare關於嘗試loadComplete事件的評論，我能夠成功獲取和修改單元格的屬性，但標題屬性固執地保持不變：

loadComplete: function() { 
       var ids = grid.getDataIDs(); 
       for (var i = 0; i < ids.length; i++) { 
        grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'}); 
       }

最終編輯：請參閱下面的答案 - 在redsquare的幫助下，我能找到問題的根本原因。

任何幫助將不勝感激

來源

2009-07-29 Josh E

好的，我對所設置的屬性進行了一些仔細檢查後發現問題。事實證明，我，節頭，我，沒看過的grid.setCell（...）方法不夠緊密的文檔：

此方法可改變特定單元格的內容和可以設置類或樣式屬性。其中：•ROWID：在 ID行的，

•colname的：列名（這參數可以是開始從0號）

•數據：可以把內容進入單元格。如果空字符串內容不會改變

•class：如果class是字符串，那麼我們使用addClass將一個類添加到單元格中;如果類是數組我們通過CSS 屬性中設置的新的CSS

•屬性：設置屬性的小區的性的判定

實施例：

setCell（「10」，「稅」，「」， {顏色：「紅色」，「文本對齊」：「中心」}」，{標題：‘銷售稅’}）

將在第10行設置稅收領域的內容紅色並居中並且更改「銷售稅」的標題。

簡而言之，我傳遞給方法的參數是設置css屬性（第4個參數）而不是屬性（第5個參數）。結果是添加了兩個標題屬性，一個格式不正確。再次

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

感謝redsquare爲他/她在解決這個幫助：下面表明了該方法的正確調用來完成我試圖做！

來源

2009-07-29 18:30:48

工具提示將顯示什麼信息？讓我們假設工具提示信息可能在行中的第一個單元格（隱藏）內。您可以定位網格內的任何行，並使用.live方法覆蓋任何新行。

$('#gridId>tbody>tr').live('mouseover', showTip) 
        .live('mouseoff', hideTip); 

function showTip(){ 

    var $row = $(this); 
    //get tooltip from first hidden cell 
    var tipText = $row.children(':eq(0)').text() 
    //append tipText to tooltip and show 

} 


function hideTip(){ 

    //hide tip 

}

來源

2009-07-29 16:59:46 redsquare

確定後清晰你可以試試這個。它假設您想要更改的單元格是每行中的第四個，並將單元格的標題設置爲該單元格中的當前文本。根據需要更改。

N.B網格實際上通過使用行的整數ID來打破標準。但以下情況仍然有效。

$("#gridId").jqGrid({ 
    ..., 
    afterInsertRow : setCellTitle, 
    ... 
}); 



function setCellTitle(rowid){ 
    //get fourth cell in row 
    var $cell = $(rowid).children(':eq(3)'); 
    //set title attribute 
    $cell.attr('title', $cell.text()); 

}

來源

2009-07-29 17:34:04 redsquare

現在就試用它我會保持發佈 - 感謝您的時間到目前爲止！ – 2009-07-29 17:39:21

jqGrid 3.4中的自定義數據工具提示

回答

相關問題