如何在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="width:' + 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="width: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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏c#开发者

selenum参考手册中文翻译

Added by SpringSideTeam, last edited by SpringSideTeam on 2006-11-23  (view chan...

29160
来自专栏一“技”之长

Java开发GUI之列表 原

    awt包中的List控件可以创建一个选择列表,此列表可以支持单选,也可以支持多选。

35220
来自专栏HTML5学堂

2016.07 第2周 群问题分享

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念: viewport、CSS3属性 参考答案: 一、通过设置...

29860
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

25020
来自专栏WindCoder

Angular6自定义表单控件方式集成Editormd

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但...

55020
来自专栏小古哥的博客园

HTML5复习整理

一、推出的目标 web浏览器兼容性低;文档结构不明确;web应用程序的功能受限 二、语法的改变 内容类型(html或htm);DOCTYPE声明简化;指定字符编...

38670
来自专栏禹都一只猫博客

Go语言简介 — 特性

13010
来自专栏進无尽的文章

编码篇-OC跨多层UI事件传递处理

在 iOS 中,对象间的交互模式大概有这几种:直接 property 传值、delegate、KVO、block、protocol、多态、Target-Acti...

18130
来自专栏梧雨北辰的开发录

Xcode文档注释使用总结

Xcode作为iOS的开发神器,为我们提供了十分丰富的文档提示功能,在开发过程中,我们可以十分方便的按下Option键,选中一个类或者方法查看其文档说明。而实际...

35540
来自专栏码生

React Native 大纲

8530

扫码关注云+社区

领取腾讯云代金券