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;
}        

The output in Connection looks like [Object][object]:

My target is to display a hoverable dropdown in each cell of the Connection Column. Following the documentation I created my desired div element and returned it via the cellRenderer function Please help

Answer 1

I'm not a JQuery guru... but it looks like one issue you are running into is that you are returning a JQuery object (which in this case seems to be an array) rather than an HTML element. Change return $wrapper_div; to return $wrapper_div[0]; and it should work.

Here is an example showing the difference of what gets returned:

 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

Yep return $wrapper_div[0], because it's a jQuery DOM object you are returning and not a normal DOM object. jQuery Dom object and HTML DOM object are different read the jQuery documentation. You will understand why you can use it as an array and why you return the first element. Secondly why are you using $ in your variable names? This is not PHP you need not use $. In jQuery $ is a special keyword which is associated to a special $ function which deals with selectors and accessing jQuery DOM objects. The $ is an alias for the jQuery () overloaded function.