ag-grid中的细胞渲染问题

时间:2017-05-24 13:19:18

标签: javascript 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]:enter image description here

我的目标是在连接列的每个单元格中显示可停止的下拉列表。 在文档之后,我创建了我想要的div元素,并通过cellRenderer函数返回它 请帮忙

2 个答案:

答案 0 :(得分:0)

我不是JQuery大师...但是看起来你遇到的一个问题是你正在返回一个JQuery对象(在这种情况下似乎是一个数组)而不是一个HTML元素。将return $wrapper_div;更改为return $wrapper_div[0];,它应该有效。

以下示例显示了返回内容的不同之处:

&#13;
&#13;
console.log("HTML Element:\n", $("<div>",{"class":"w3-dropdown-hover"})[0])

console.log("JQuery Object:\n", $("<div>",{"class":"w3-dropdown-hover"}))
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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