如何在dojo dgrid表头中放置一个html元素

Question

我想在dojo dgrid表的<th>中放置一个超链接，但是当我尝试声明时它是不可能的

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

怎么做

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