ag-grid 中的单元格渲染问题答案

【问题标题】：Cell Rendering issue in ag-gridag-grid 中的单元格渲染问题
【发布时间】：2017-05-24 23:57:42
【问题描述】：

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 函数返回它请帮忙

【问题讨论】：

标签： javascript ag-grid

【解决方案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"}))

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

@MeetShah 看起来您是 Stack Overflow 的新手。如果这个答案帮助你解决了你的问题，你可以“接受”它作为正确答案，或者如果这个答案引导你朝着正确的方向前进，那么你可以投票。

【解决方案2】：

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

【讨论】：