程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> 關於C# >> 如何在DataGrid裡面產生滾動條而不滾動題頭

如何在DataGrid裡面產生滾動條而不滾動題頭

編輯:關於C#
 

我們在開發的時候一定遇到,使用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'){  

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved