我想扩展 ASP.NET DataGrid Web 控件以添加许多附加功能，但最重要的是，我想让网格的主体可滚动。
我已经制定了 HTML，但覆盖控件的呈现是令人困惑的。最终控制的基本结构应该是这样的：
<div id="grid1" class="grid">
<div class="grid-header">
<div class="grid-header-l"></div>
<div class="grid-header-c">
<div class="grid-header-wrapper">
<div class="wrapper">Grid Header</div>
</div>
</div>
<div class="grid-header-r"></div>
</div>
<div class="grid-body">
<div class="grid-column-headers">
<div class="grid-column-headers-l"></div>
<div class="grid-column-headers-c">
<div class="grid-column-headers-wrapper">
<table class="grid-column-header-table" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<div class="grid-column-header-cell asc">
<div class="grid-column-header-cell-wrapper">
<div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
<a href="javascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
<div class="grid-column-header-divider"></div>
</div>
</div>
</td>
<td>
<div class="grid-column-header-cell">
<div class="grid-column-header-cell-wrapper">
<div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
<a href="javascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
<div class="grid-column-header-divider"></div>
</div>
</div>
</td>
<td class="last">
<div class="grid-column-header-cell">
<div class="grid-column-header-cell-wrapper">
<div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
<a href="javascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
<div class="grid-column-header-divider"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid-column-headers-r"></div>
</div>
<div class="grid-body-content">
<div class="grid-body-content-t">
<div class="grid-body-content-t-l"></div>
<div class="grid-body-content-t-c"></div>
<div class="grid-body-content-t-r"></div>
</div>
<div class="grid-body-content-m">
<div class="grid-body-content-m-l"></div>
<div class="grid-body-content-m-c">
<div class="grid-body-content-wrapper">
<div class="scroll-wrapper">
<table class="grid-content-table" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="grid-body-content-m-r"></div>
</div>
<div class="grid-body-content-b">
<div class="grid-body-content-b-l"></div>
<div class="grid-body-content-b-c"></div>
<div class="grid-body-content-b-r"></div>
</div>
</div>
</div>
任何人都知道最好的方法应该是什么？谁能指点我一些教程？我注意到作者在将呈现的 html 发送到响应流并对其进行更改之前捕获了它。但是，我不喜欢使用这种方法。