道場dgridテーブルヘッダーでHTML要素を配置する方法

Question

私は道場の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を使用することができます行う方法。

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

JavaScriptのグリッド道にHTMLを使用して：

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