2009-08-04 73 views
0

我想擴展ASP.NET DataGrid Web控件以添加大量附加功能,但最重要的是,我想使網格的主體可滾動。擴展DataGrid

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

因爲我只是想修改控制的輸出,「」延伸的實際控制意味着我只需要重寫渲染。

我找到了有關控制適配器的文章,可以用它來改變輸出。名爲'CSS Control Adapters'的CodePlex上存在項目。它對DataGrid的控制非常有幫助。

1

您可以嘗試this的方法。對我有好處。