[英]Cell Rendering issue in ag-grid
var gridOptions = {
columnDefs: [
{headerName: 'Connection', field: 'Applicationaccess',minWidth:350,filter:'text',filterParams:{
filterOptions:['equals','contains']
},cellClass: 'all_grid_cell conn_cell',cellRenderer:function(params){
var p=params.value;
var $wrapper_div = $("<div>",{"class":"w3-dropdown-hover"});
var $newlink=$("<a>",{"href":"javascript:void(0)","class":"link w3-white","text":p});
$newlink.appendTo($wrapper_div);
var $ediv = $("<div>",{"class":"w3-dropdown-content w3-bar-block w3-border"});
var x=['meet','meeeeet','meeeeeeeet'];
for(i=0;i<x.length;i++){
var $btn=abc(x[i]);
$btn.appendTo($ediv);
}
$ediv.appendTo($wrapper_div);
return $wrapper_div;
}}
function abc(x){
var $btn=$("<button>",{"class":" w3-bar-item w3-button","text":x});
return $btn;
}
Connection中的輸出看起來像[Object] [object]:
我的目標是在“連接”列的每個單元格中顯示一個可懸停的下拉列表。 根據文檔,我創建了所需的div元素,並通過cellRenderer函數將其返回。請幫助
我不是JQuery專家...但是您遇到的一個問題似乎是要返回JQuery對象(在這種情況下,它似乎是數組)而不是HTML元素。 更改return $wrapper_div;
return $wrapper_div[0];
它應該工作。
這是顯示返回的區別的示例:
console.log("HTML Element:\\n", $("<div>",{"class":"w3-dropdown-hover"})[0]) console.log("JQuery Object:\\n", $("<div>",{"class":"w3-dropdown-hover"}))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
是的,返回$ wrapper_div [0],因為它是您要返回的jQuery DOM對象,而不是普通的DOM對象。 jQuery Dom對象和HTML DOM對象不同,請閱讀jQuery文檔。 您將理解為什么可以將其用作數組以及為什么返回第一個元素。 其次,為什么在變量名中使用$? 這不是PHP,您不需要使用$。 在jQuery $中,是一個特殊的關鍵字,它與處理選擇器和訪問jQuery DOM對象的特殊$函數相關聯。 $是jQuery()重載函數的別名。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.