Ag-grid中的单元格渲染问题

Question

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函数将其返回。请帮助

Answer 1

我不是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> 

Answer 2

是的，返回$ wrapper_div [0]，因为它是您要返回的jQuery DOM对象，而不是普通的DOM对象。 jQuery Dom对象和HTML DOM对象不同，请阅读jQuery文档。 您将理解为什么可以将其用作数组以及为什么返回第一个元素。 其次，为什么在变量名中使用$？ 这不是PHP，您不需要使用$。 在jQuery $中，是一个特殊的关键字，它与处理选择器和访问jQuery DOM对象的特殊$函数相关联。 $是jQuery（）重载函数的别名。