Как поместить html-элемент в заголовок таблицы dojo dgrid

#dojo #dgrid

#dojo #dgrid

Вопрос:

Я хочу разместить гиперссылку в таблице <th> dojo dgrid, но это невозможно, когда я пробовал это декларативно

 <thead>
    <tr>
       <th data-dgrid-column="{ field:'AVAILABLE_BALANCE',resizable:true}">Available
                                Balance<a href="#">click</a>
      </th>
    </tr>
</thead> 
 

он отображается как

 Available Balance <a href="#">click</a>
 

Как это сделать

Ответ №1:

Вы можете использовать столбец renderHeaderCell для достижения этой цели.

использование HTML для преобразования в сетку

 <thead>
  <tr>
    <th data-dgrid-column="{ field:'AVAILABLE_BALANCE',resizable:true, 
        renderHeaderCell:customRenderHeaderCell}">
    </th>
  </tr>
</thead>
 

JavaScript:

 function customRenderHeaderCell(node){
    var div = document.createElement("div");
    div.innerHTML = "Available Balance<a href='#'>click</a>";
    return div;
}
 

использование программного способа

 require([ 'dgrid/Grid' ], function (Grid) {
    var columns = {
        first: {
            label: "First Name"
        },
        last: {
            label: "Last Name"
        },
        balance: {
            field: 'AVAILABLE_BALANCE',
            resizable: true,
            renderHeaderCell: function(node){
               var div = document.createElement("div");
               div.innerHTML = "Available Balance<a href='#'>click</a>";
               return div;
           }
       }
    };
    var grid = new Grid({ columns: columns }, 'grid'); 
    grid.renderArray(arrayOfData);
});