Repeater實現鎖定行 列的滾動效果

2021-07-11 01:10:06 字數 921 閱讀 7852

前段時間因公司需要,需要實現乙個repeater下的鎖定行、列滾動效果 ,網上找了一些實現的滾動效果的**,測試下來發現網頁的重新整理速度降低了好多,當資料比較大(30列,300行時)頁面還一度出現假死狀態。使用者體驗效果太差。

然後就決定自己寫一下方法,看一下,能否實現效果,經過多次測試終於完成了此功能。

**主要用到div+css,利用div的多層重疊效果實現。

div 「divmain」 實現滾動條效果,繫結 onscroll事件

div "divdatatable"   所有資料展示,需要的資料全部讀取到此div內,repeater也在此div內

div "div_top"  使用**clone 主div內的repeater標題行,用於實現上下滾動時,列自動向下移動,需要鎖住幾行就clone幾行

div "divleft"   使用**clone 主div內repeater的列,需要鎖住幾列就clone幾列

div  「divlefttitle」 使用**clone "divleft" div內的標題行,用於滾動條上下 、左右交叉移動時,顯示被鎖住的列標題(即 "divleft"的標題行)

預設各部分對應的css,然後由js**在onscroll事件內控制各div部分變動

我目前只做到了ie10、ie11效果除錯,其它瀏覽器與ie版本需要單獨調配css樣式,這個就請各位自己完成了。哈,

ps: 本人js、css都比較菜

**如下(因為無法貼原**,以下**是我簡化後的效果):

no

列1列2

列3列4

列5列6

列7列8

no列1列2

列3列4

列5列6

列7列8

no列1列2

no列1列2



Repeater 單選實現

很多的朋友都問過我這個問題,我就在這裡把它寫出來算了。在我們的web程式中,很多的時候都要實現多選和單選的操作,在gridview和repeater中。其實它們實現起來很相似。多選網上提供了很多的解決方案 如 只要設定commandname值的,可直接在itemcommand事件中獲取command...

repeater中的重置實現

在repeater控制項的外面有乙個按鈕,要實現點選這個按鈕來重置repeater中的textbox控制項中的值為0 重置發貨數量為0 protected void linkbutton1 click object sender,eventargs e 我的做法 1.先獲取repeater控制項 2...

repeater控制項實現分頁

分頁分為真分頁和假分頁。假分頁 從資料庫一次性取出所有資料繫結到控制項上,再將所有資料根據一頁顯示多少條而分頁。從以上二者的概念上我們可以看出,區別在於分頁時從資料庫讀取資訊的方式,真分頁的效率無疑是最高的。假分頁在首次頁面載入的時候會比較慢 如果資料量較多 二者其實各有各的優缺點,可根據需要來自行...