如何在DataGrid里面产生滚动条而不滚动题头

 

我们在开发的时候一定遇到，使用DataGrid的时候由于不想分页（数据没有那么多）但是又显示不在一页里面，此时我们希望在DataGrid里面出现一个滚动条，可以上下滚动DataGrid里面的数据而不用上下滚动页面，由于写本文的目的是为了说明如何实现，所以对于细节性的问题读者可以自己思考完成（比如：既要分页又要滚动等等）。为了可以滚动DataGrid我们需要一个可以让客户端的Table滚动js脚本（该js代码我是从CodeProject上面下载的），但又不能滚动Table的题头（也就是第一行）。我们都知道DataGrid在解释到客户端以后将会生成一个Table，但是这个Table是由<tr><td>组成的，我们的脚本里面是需要使用到Table的Thead和Tbody的（在大多数的客户端的应用中都要用到此功能比如：客户端的排序、以及列的托拽等等），因此我们接下来的任务就是如何为我们客户端的这个DataGrid添加<thead><tbody>了。如果你对用户的自定义控件以及ASP.NET页面的原理有所了解，我们知道控件最后都是要呈现(Render)在页面上的，因此我们可以重写这个方法来完成DataGrid的自定义呈现。听一听真的有些吓人，那么复杂的控件怎么呈现？不要着急，首先我们创建一个自定义控件如下所示：
public class PowerDataGrid : System.Web.UI.WebControls.DataGrid
    由此可以看出我们的控件是继承于DataGrid的，所以我们现在的这个控件在不用写一行代码的情况下我们的这个控件已经具有DataGrid的所有的功能。接下来我们要将我们准备的js代码内嵌到我们的控件里，好让放这个控件的页面上最终在客户端都会有这段js代码用来完成我们滚动的任务。为了完成这个工作我们要重写预呈现的方法：
 protected override void OnPreRender(System.EventArgs e) {

         base.OnPreRender(e);
     
         ResourceManager manager = new ResourceManager( this.GetType() );
         ResourceSet resources = manager.GetResourceSet(System.Globalization.CultureInfo.CurrentCulture, true, true);
         if( !Page.IsClientScriptBlockRegistered( "SkySword.WebControl.PowerDataGrid Library" ) ) {
               String script = resources.GetString("ScrollTable");
               this.Page.RegisterClientScriptBlock("SkySword.WebControl.PowerDataGrid Library", script );
               this.Page.RegisterStartupScript("SkySword.WebControls.PowerDataGrid Init", "<script>makeScrollableTable

('"+this.ID+"',true,'auto');</script>" );
         }
      }
    在该方法中我们访问了资源文件。哦！忘了说我们还要建立一个资源文件，用来保存我们的js代码。我们首先将资源代码中对应ScrollTable的数据（一段js脚本）注册到客户端的脚本块里。最后我们为了可以初始化，将<script>makeScrollableTable('"+this.ID+"',true,'auto');</script>段脚本注册到页面加载时开始执行（我想就应该和body里面onload的方法一样吧）。当你需要加载客户端脚本的时候使用该方法是个不错的选择。好了，客户端脚本也有了，剩下的就是处理我们的客户端DataGrid了（也就是DataGrid呈现的客户端Table）。为了可以呈现我们自己的DataGrid我们需要重写呈现方法如下所示：
protected override void Render(HtmlTextWriter output)
  {
            output.Write(this.parseMarkup());
  }
    其中调用了一个parseMarkup的函数，改函数将产生一个输出的脚本（字符串），该脚本就是一个包含thead和tbody的Table。由于此方法只是由该控件自己使用所以我们将它设置成私有的代码如下：
 private string parseMarkup(){
         // 插入THead标签和TBody标签
         StringWriter writer = new StringWriter();
         HtmlTextWriter buffer = new HtmlTextWriter(writer);
         base.Render(buffer);
         string pMarkup = writer.ToString();

         // 找到第一个table标签的结尾也就是第一个>字符
         pMarkup = pMarkup.Insert(pMarkup.IndexOf(">") + ">".Length, "<thead>");
         // 将第一个tr闭区间用Thead包起来，现在第一个<thead>已经画出来了需要画
         // 它的结尾</thead>和</tbody>,同样找到第一个</tr>来插入</thead>和</tdoby>
         pMarkup = pMarkup.Insert( pMarkup.IndexOf("</tr>") + "</tr>".Length,"</thead><tbody>");
         // 在最后一个</table>的前面插入一个</tbody>就可以了。
         pMarkup = pMarkup.Replace("</table>", "</tbody></table>");
         return pMarkup;      
      }
    在这个方法中我们首先实例化了一个StringWriter的对象writer，又用该对象为参数实例了一个HtmlTextWriter对象buffer，最关键的是我们调用了基类的Render用来将buffer里面填满要输出的东西（一堆脚本就是Table，如果你是用监视器查看里面的内容就可以看到）。好了剩下的工作就是分析这个脚本了，然后我们在该脚本第一个出现<tr>的地方将这个<tr>替换成<thead>和<tr>后面的替换方法类似。最后我们将这个被我们替换和修改的Table输出到客户端，一切OK！

注意：用到StringWriter的原因就是它可以从buffer里面保存原始的字符比如：/t/n什么的。 资源文件的配置方法：首先给你的工程添加一个资源文件，名字和你的控件一样，然后在该文件中添加一下小节
      <data name="ScrollTable">
  <value><![CDATA[
  <script language = 'javascript'>
  
  var container = new Array();
var onResizeHandler;

function scrollbarWidth(){
    var w;

    if (! document.body.currentStyle)   document.body.currentStyle = document.body.style;

    if (document.body.currentStyle.overflowY == 'visible' || document.body.currentStyle.overflowY == 'scroll'){
        w = document.body.offsetWidth - document.body.clientLeft - document.body.clientWidth;
    }else{
        win = window.open("about:blank", "_blank", "top=0,left=0,width=100,height=100,scrollbars=yes");
        win.document.writeln('scrollbar');
        w = win.document.body.offsetWidth - win.document.body.clientLeft - win.document.body.clientWidth;
        win.close();
    }

    return w;
}

function getActualWidth(e){
    if (! e.currentStyle)   e.currentStyle = e.style;

    return  e.clientWidth - parseInt(e.currentStyle.paddingLeft) - parseInt(e.currentStyle.paddingRight);
}

function findRowWidth(r){
    for (var i=0; i < r.length; i++){
        r[i].actualWidth = getActualWidth(r[i]);
    }
}

function setRowWidth(r){
    for (var i=0; i < r.length; i++){
        r[i].width = r[i].actualWidth;
        r[i].innerHTML = '<span style="' + r[i].actualWidth + ';">' + r[i].innerHTML + '</span>';
    }
}

function fixTableWidth(tbl){
    for (var i=0; i < tbl.tHead.rows.length; i++)   findRowWidth(tbl.tHead.rows[i].cells);
    findRowWidth(tbl.tBodies[0].rows[0].cells);
    if (tbl.tFoot)  for (var i=0; i < tbl.tFoot.rows.length; i++)   findRowWidth(tbl.tFoot.rows[i].cells);

    //tbl.width = '';

    for (var i=0; i < tbl.tHead.rows.length; i++)   setRowWidth(tbl.tHead.rows[i].cells);
    setRowWidth(tbl.tBodies[0].rows[0].cells);
    if (tbl.tFoot)  for (var i=0; i < tbl.tFoot.rows.length; i++)   setRowWidth(tbl.tFoot.rows[i].cells);
}

function makeScrollableTable(tbl,scrollFooter,height){
    var c, pNode, hdr, ftr, wrapper, rect;

    if (typeof tbl == 'string') tbl = document.getElementById(tbl);

    pNode = tbl.parentNode;
    fixTableWidth(tbl);

    c = container.length;
    container[c] = document.createElement('<SPAN style="height: 100; overflow: auto;">');
    container[c].id = tbl.id + "Container";
    pNode.insertBefore(container[c], tbl);
    container[c].appendChild(tbl);
    container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();

    hdr = tbl.cloneNode(false);
    hdr.id += 'Header';
    hdr.appendChild(tbl.tHead.cloneNode(true));
    tbl.tHead.style.display = 'none';

    if (!scrollFooter || !tbl.tFoot){
        ftr = document.createElement('<SPAN style="1;height:1;clip: rect(0 1 1 0);background-color:transparent;">');
        ftr.id = tbl.id + 'Footer';
        ftr.style.border = tbl.style.border;
        ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;
        ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';
    }else{
        ftr = tbl.cloneNode(false);
        ftr.id += 'Footer';
        ftr.appendChild(tbl.tFoot.cloneNode(true));
        ftr.style.borderTop = 'none';
        tbl.tFoot.style.display = 'none';
    }

    wrapper = document.createElement('<table border=0 cellspacing=0 cellpadding=0>');
    wrapper.id = tbl.id + 'Wrapper';
    pNode.insertBefore(wrapper, container[c]);

    wrapper.insertRow(0).insertCell(0).appendChild(hdr);
    wrapper.insertRow(1).insertCell(0).appendChild(container[c]);
    wrapper.insertRow(2).insertCell(0).appendChild(ftr);

    wrapper.align = tbl.align;
    tbl.align = hdr.align = ftr.align = 'left';
    hdr.style.borderBottom = 'none';
    tbl.style.borderTop = tbl.style.borderBottom = 'none';

    // adjust page size
    if (c == 0 && height == 'auto'){
        onResizeAdjustTable();
        onResizeHandler = window.onresize;
        window.onresize = onResizeAdjustTable;
    }else{
        container[c].style.height = height;
    }
}

function onResizeAdjustTable(){
    if (onResizeHandler) onResizeHandler();

    var rect = container[0].getClientRects()(0);
    var h = document.body.clientHeight - (rect.top + (document.body.scrollHeight - rect.bottom));
    container[0].style.height = (h > 0) ? h : 1;
}

function printPage(){
    var tbs = document.getElementsByTagName('TABLE');
    var e;

    for (var i=0; i < container.length; i++)    container[i].style.overflow = '';

    window.print();

    for (var i=0; i < container.length; i++)    container[i].style.overflow = 'auto';
}
  
 </script> 
  ]]></value>
 </data>
  
    好了，这样就可以完成了。使用该方法可以实现客户端的排序和托拽功能，只要你找到相应的js代码（或者自己写）然后使用此法分析你的客户端代码，最后将你的DataGrid的输出定位成你想要的结果，一切就OK了！由于时间关系该控件分页和滚动不能同时，希望有兴趣的网友可以实现之。我在写此文章的目的旨在抛砖引玉的作用，希望对大家的编程技术有所提高和帮助。谢谢阅读！有什么问题或者好的建议请与我联系。

作者Blog：http://blog.csdn.net/cuike519/