我想扩展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。但是，我不喜欢使用这种方法。
答案 0 :(得分：1)
您可以尝试this方法。对我有用。
答案 1 :(得分：0)
因为我只想修改控件的输出，'扩展'控件实际上意味着我只需要覆盖渲染。
我在控制适配器上找到了可以用来改变输出的文章。名为“CodePlex”的CSS Control Adapters上存在一个项目。它对于更多的控件非常有用，而不仅仅是DataGrid。