2011-12-10 31 views
2

如果使用Custom values to Context Menu Items in JQgrid將上下文菜單添加到jqGrid並使用文本字段內聯編輯,則文本框標準上下文菜單不可用,它將替換爲jqGrid上下文菜單。如何將標準文本框命令添加到jqgrid上下文菜單

如何將標準文本框上下文菜單命令(撤消,剪切,複製,粘貼,刪除,全選)添加到jqGrid conext菜單或如何顯示文本框內聯編輯的標準上下文菜單?

更新

在聯編輯,如果標準菜單是通過在黃色背景或自動完成框和標準瀏覽器右鍵菜單打開後右鍵點擊打開,自定義菜單沒有關閉,兩個菜單出現。

two menus

如何解決這一問題?

回答

2

在「複製」,「粘貼」等上下文菜單命令中實現起來並不容易,所以我決定修改我之前關於the answer的演示。在the new demo中,僅當頁面不包含選定文本時,纔會顯示上下文菜單。

的第一個問題是,jquery.contextmenu.js的原代碼中包含下面的代碼片段:

$(this).bind('contextmenu', function(e) { 
    // Check if onContextMenu() defined 
    var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; 
    if (bShowContext) display(index, this, e, options); 
    return false; 
}); 

所以contextmenu處理程序返回總是false並阻止標準上下文菜單的創建。我定的代碼如下(您可以下載完整的修改後的代碼here):

$(this).bind('contextmenu', function(e) { 
    // Check if onContextMenu() defined 
    var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; 
    currentTarget = e.target; 
    if (bShowContext) { 
    display(index, this, e, options); 
    return false; 
    } 
}); 

createContexMenuFromNavigatorButtons函數的代碼描述here我修改

onContextMenu: function (e) { 
    var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i, 
     lastSelId; 

    if (rowId && getSelectedText() === '') { 
     ... 
     return true; 
    } else { 
     return false; // no contex menu 
    } 
} 

使用getSelectedText()和僅創建上下文菜單如果沒有選擇文本。其結果是,你會看到你的自定義上下文菜單僅如果沒有選中的文字,看到了標準上下文菜單(這取決於Web瀏覽器),如果文本的選擇存在:

enter image description here

修訂:我根據答案修改了我的關於jquery.contextmenu.js的問題報告,其中additional information。我希望在plugins子目錄中包含的jquery.contextmenu.js的主代碼很快就會發生變化。

更新2:怎麼可以看到here所有修補程序已經在jqGrid的對github主代碼和包含在jqGrid的4.3。

更新12:如果您想爲所有的標準上下文菜單中啓用<input type="text" ...><input type="textarea" ...><textarea ...>元素,你應該只需修改一點點代碼onContextMenu回調的內部。例如

onContextMenu: function (e) { 
    var p = grid[0].p, i, lastSelId, 
     $target = $(e.target), 
     rowId = $target.closest("tr.jqgrow").attr("id"), 
     isInput = $target.is(':text:enabled') || 
     $target.is('input[type=textarea]:enabled') || 
     $target.is('textarea:enabled'); 
    if (rowId && !isInput && getSelectedText() === '') { 
     ... 

看到一個更demo其中內聯編輯將雙擊來激活。

+0

非常感謝。如果未選擇文本,則粘貼並選擇所有命令應仍可用。如何將標準文本框上下文菜單添加到您創建的自定義菜單中?在這種情況下,兩個命令都可用。 – Andrus

+0

@安德魯斯:我認爲這是不可能的。 – Oleg

+0

也許有可能使用http://stackoverflow.com/questions/400212/how-to-copy-to-clipboard-in-javascript或其他的解決方案? – Andrus

相關問題