GridViewScroll

最新推荐文章于 2021-05-26 01:58:44 发布
最新推荐文章于 2021-05-26 01:58:44 发布
阅读量1.3k 收藏
点赞数
分类专栏： CSS javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mx5721/article/details/38037929
版权

首先我们需要在下面的链接中下载程序包，同时也可以把demo下载下来，下面的代码就是demo的演示：

http://gridviewscroll.aspcity.idv.tw/Demo.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	GridViewScroll with jQuery
</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="gridviewScroll.min.js"></script>
    <link href="GridviewScroll.css" rel="stylesheet" />
    <style type="text/css">
    	BODY,TD
		{
		    font-family: ·L³n¥¿¶ÂÅé, Tahoma, Arial, Verdana;
		    font-weight: normal;
		    font-size: 12px;
		    color: #333333;
		}
    </style>
</head>
<body>
	<table cellspacing="0" id="GridView1" style="width:100%;border-collapse:collapse;">
		<tr class="GridviewScrollHeader">
			<td colspan="2">Product</td><td rowspan="2">ListPrice</td><td rowspan="2">StandardCost</td><td colspan="2">Package</td><td rowspan="2">SafetyStockLevel</td><td rowspan="2">ReorderPoint</td><td rowspan="2">SellStartDate</td>
		</tr><tr class="GridviewScrollHeader">
			<td>Name</td><td>Number</td><td>Weight</td><td>Size</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">HL Mountain Frame - Black, 38</td><td style="background-color:#EFEFEF;">FR-M94B-38</td><td>1349.6000</td><td>739.0410</td><td>2.68</td><td>38</td><td>500</td><td>375</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">HL Mountain Frame - Silver, 38</td><td style="background-color:#EFEFEF;">FR-M94S-38</td><td>1364.5000</td><td>747.2002</td><td>2.68</td><td>38</td><td>500</td><td>375</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-150 Red, 62</td><td style="background-color:#EFEFEF;">BK-R93R-62</td><td>3578.2700</td><td>2171.2942</td><td>15.00</td><td>62</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-150 Red, 44</td><td style="background-color:#EFEFEF;">BK-R93R-44</td><td>3578.2700</td><td>2171.2942</td><td>13.77</td><td>44</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-150 Red, 48</td><td style="background-color:#EFEFEF;">BK-R93R-48</td><td>3578.2700</td><td>2171.2942</td><td>14.13</td><td>48</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-150 Red, 52</td><td style="background-color:#EFEFEF;">BK-R93R-52</td><td>3578.2700</td><td>2171.2942</td><td>14.42</td><td>52</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-150 Red, 56</td><td style="background-color:#EFEFEF;">BK-R93R-56</td><td>3578.2700</td><td>2171.2942</td><td>14.68</td><td>56</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-450 Red, 58</td><td style="background-color:#EFEFEF;">BK-R68R-58</td><td>1457.9900</td><td>884.7083</td><td>17.79</td><td>58</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-450 Red, 60</td><td style="background-color:#EFEFEF;">BK-R68R-60</td><td>1457.9900</td><td>884.7083</td><td>17.90</td><td>60</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-450 Red, 44</td><td style="background-color:#EFEFEF;">BK-R68R-44</td><td>1457.9900</td><td>884.7083</td><td>16.77</td><td>44</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-450 Red, 48</td><td style="background-color:#EFEFEF;">BK-R68R-48</td><td>1457.9900</td><td>884.7083</td><td>17.13</td><td>48</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-450 Red, 52</td><td style="background-color:#EFEFEF;">BK-R68R-52</td><td>1457.9900</td><td>884.7083</td><td>17.42</td><td>52</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Red, 58</td><td style="background-color:#EFEFEF;">BK-R50R-58</td><td>782.9900</td><td>486.7066</td><td>19.79</td><td>58</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Red, 60</td><td style="background-color:#EFEFEF;">BK-R50R-60</td><td>782.9900</td><td>486.7066</td><td>19.90</td><td>60</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Red, 62</td><td style="background-color:#EFEFEF;">BK-R50R-62</td><td>782.9900</td><td>486.7066</td><td>20.00</td><td>62</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Red, 44</td><td style="background-color:#EFEFEF;">BK-R50R-44</td><td>782.9900</td><td>486.7066</td><td>18.77</td><td>44</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Red, 48</td><td style="background-color:#EFEFEF;">BK-R50R-48</td><td>782.9900</td><td>486.7066</td><td>19.13</td><td>48</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Red, 52</td><td style="background-color:#EFEFEF;">BK-R50R-52</td><td>782.9900</td><td>486.7066</td><td>19.42</td><td>52</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Black, 58</td><td style="background-color:#EFEFEF;">BK-R50B-58</td><td>782.9900</td><td>486.7066</td><td>19.79</td><td>58</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Black, 60</td><td style="background-color:#EFEFEF;">BK-R50B-60</td><td>782.9900</td><td>486.7066</td><td>19.90</td><td>60</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Black, 62</td><td style="background-color:#EFEFEF;">BK-R50B-62</td><td>782.9900</td><td>486.7066</td><td>20.00</td><td>62</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Black, 44</td><td style="background-color:#EFEFEF;">BK-R50B-44</td><td>782.9900</td><td>486.7066</td><td>18.77</td><td>44</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Black, 48</td><td style="background-color:#EFEFEF;">BK-R50B-48</td><td>782.9900</td><td>486.7066</td><td>19.13</td><td>48</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Road-650 Black, 52</td><td style="background-color:#EFEFEF;">BK-R50B-52</td><td>782.9900</td><td>486.7066</td><td>19.42</td><td>52</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Mountain-100 Silver, 38</td><td style="background-color:#EFEFEF;">BK-M82S-38</td><td>3399.9900</td><td>1912.1544</td><td>20.35</td><td>38</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Mountain-100 Silver, 42</td><td style="background-color:#EFEFEF;">BK-M82S-42</td><td>3399.9900</td><td>1912.1544</td><td>20.77</td><td>42</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Mountain-100 Silver, 44</td><td style="background-color:#EFEFEF;">BK-M82S-44</td><td>3399.9900</td><td>1912.1544</td><td>21.13</td><td>44</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Mountain-100 Silver, 48</td><td style="background-color:#EFEFEF;">BK-M82S-48</td><td>3399.9900</td><td>1912.1544</td><td>21.42</td><td>48</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Mountain-100 Black, 38</td><td style="background-color:#EFEFEF;">BK-M82B-38</td><td>3374.9900</td><td>1898.0944</td><td>20.35</td><td>38</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr><tr class="GridviewScrollItem">
			<td style="background-color:#EFEFEF;">Mountain-100 Black, 42</td><td style="background-color:#EFEFEF;">BK-M82B-42</td><td>3374.9900</td><td>1898.0944</td><td>20.77</td><td>42</td><td>100</td><td>75</td><td>7/1/2005 12:00:00 AM</td>
		</tr>
	</table>
    <script type="text/javascript">
	    $(document).ready(function () {
	        gridviewScroll();
	    });
	
	    function gridviewScroll() {
	        gridView1 = $('#GridView1').gridviewScroll({
                width: 600,
                height: 300,
                railcolor: "#F0F0F0",
                barcolor: "#CDCDCD",
                barhovercolor: "#606060",
                bgcolor: "#F0F0F0",
                freezesize: 1,
                arrowsize: 30,
                varrowtopimg: "Images/arrowvt.png",
                varrowbottomimg: "Images/arrowvb.png",
                harrowleftimg: "Images/arrowhl.png",
                harrowrightimg: "Images/arrowhr.png",
                headerrowcount: 2,
                railsize: 16,
                barsize: 8
            });
	    }
	</script>
</body>
</html>
运行结果如下：


mx5721
关注
专栏目录
ScrollGridView
04-20
asp.net C# GridView 固定表头 冻结列 固定列
GridViewScroll：冻结表或GridView中的列和固定标题
02-03
GridViewScroll-新 冻结Table或GridView中的列和固定标题 产品特点 浏览器的默认滚动条 冻结页眉，列，页脚（仅最后一行） 入门 从GitHub下载 在网页中包含gridviewscroll.js < script type =" text/javascript " src =" js/gridviewscroll.js " > </ script > 用选项初始化表，然后调用enhance < script type =" text/javascript " > window . onload = function ( ) { var g
ASP.NET控件开发之ScrollGridView（兼容FF、IE、苹果、谷歌、搜狗等浏览器。固定表头滚动的GridView控件）...
hududanyzd
12-21 244
这篇文章本来在2个月前就应该写了的，只是一直没有找到好的解决方案，所以迟迟没有动笔，直到今天，才找到了比较满意的解决方案。 网上关于固定GridView表头，常见的有两种解决方案，一种是采用css样式，一种则是使用js代码。我再后面贴出了网上常用的解决方案，不过这两种解决方案都无法从根本上解决问题，并且还有一个致命的缺点，那就是在FF中不支持，我认为采用jquery重写表头扩展GridView才...
gridview 纵向滚动条
yap111的专栏
01-16 3569
给gridview设置滚动条有很多方式.最简单的是将gridview放到一个panel中，然后给panel加上 ScrollBars="Vertical"  属性，便可以实现，但是这样标题头会随着滚动。从一个网名为小小鸟的人那里学到如何给gridview 添加纵向滚动条，标题头不滚动 。首先定义一个样式表：     .Freezing         {              
android gridview 滚动条位置,Android GridView实现滚动到指定位置的方法
weixin_35625309的博客
05-25 195
当一个列表项目很多，并且每个项目可以进入到其它Activity或者Fragment时，保存之前列表的位置是一个比较不错的功能，今天研究了一下怎么保存浏览位置，发现GridView和它的父类中有4个相关的方法：public void smoothScrollToPosition (int position)滚动到position指定的位置，api level 11之下可用*当你滚动完后，返回列表，能...
TVPageScrollGridView:页面滚动网格视图
06-13
TVPageScrollGridView是一个专为电视应用设计的组件，它是一个页面滚动的网格视图，能够有效地展示内容并优化用户在大屏幕设备上的交互体验。在电视应用开发中，考虑到用户的操作方式主要是通过遥控器的DPAD（方向键...
ASP.NET 固定标题列与栏位的具体实现
10-27
其中`jquery-1.8.3.min.js`和`jquery-ui-1.10.3.custom.js`是jQuery库的基础文件，`gridviewScroll.min.js`和`GridviewScroll.css`则是实现固定列和行功能的插件文件。这些文件可以通过网上搜索获取。 核心脚本`...
gridView滚动条相关问题
weixin_30538029的博客
05-09 225
GridView本身没有滚动条，要想出现，它必须依靠承载它的container, 这个container可以是body,即IE,也可以是div,panel等。<div style="overflow: scroll; height: 140px; width:100%"> <asp:GridView ID="GridView1" runat="ser...
GRIDVIEW中使用滚动条
laodao1的专栏
07-29 2341
在asp.net 2.0 beta中，在gridview中插入滚动条，其实是很简单的，在其中插入PANNEL控件，其中有scrollbar属性，如下例子： Untitled Page  Customer ID  Company Name
ScrollView嵌套GridView，GridView显示不全
Okloong的博客
04-06 9786
在ScrollView里布局GridView时，GridView显示往往是以单行显示出来。这是由于GridView和ScrollView里都有滑动属性。ScrollView无法判断GridView里的item高度是多少，于是只显示单个Item的高度，也就是单行显示了，剩下内容被隐藏了。
Scrollview和gridview同时使用时滑动解决方法
05-03
Scrollview和gridview同时使用的时候,Scrollview滑动gridview不滑动,Gridview滑动Scrollview不滑动!
android gridview隐藏滚动条,如何禁用GridView中的ScrollViewer的滚动
weixin_39966922的博客
05-26 327
如何禁用GridView中的ScrollViewer的滚动10/20/20132 minutes to readIn this article这篇文章所讨论的问题似乎有些基础，因为ScrollViewer控件有Horizontal/VerticalScrollMode属性可以用来控制滚动条的行为，如设定成ScrollMode.Disabled的期望结果就是能够禁用滚动操作。一开始我们也是这样认为的...
jQuery与GridView控件结合示例
diaobiao8107的博客
08-11 125
jQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。 比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击checkbox按钮，来实现自动计算当前行两个数字的平均值呢？前提是用jQuery来实现？ 我们直接在页面的Page_Load事件中输...
ASP.NET : Freeze GridView Header using GridViewScroll jQuery plugin
missautumn的专栏
11-04 1712
查看效果演示,请点击这里 When you have lots of rows to be displayed in a gridview say for example 500 records, if an user is interested in seeing 400th record, the user has to scroll all the way down through the
universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
weixin_30920597的博客
03-12 180
在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使用UIL遇到了这个问题,相信这个问题许多使用UIL的人都碰到过 现在把解决方法贴出来给有同样问题的朋友做参考 先看下UIL的工作流程 在已经允许内存,存储卡缓存的前提下,当一个图片被请求d...
jquery实现Gridview,table分页
choulixiu1105的博客
08-01 91
说明： 1、将gridView的行全设为不显示； 2、每页5条记录。 $(function () { var rowCount = $("#gdv tr").length - 1; var step = 5; var Count = 6; $("#gdv ...
jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析
weixin_34419326的博客
12-03 158
1 /*! 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers. 3 */ 4 (function ($) { 5 //1、定义一个jQuery实例方法，也是我们调用这个插件的入口 6 $.fn.Scr...
【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试
weixin_34179968的博客
11-09 86
前言 最近项目需求需要用到jquery的分页功能，所以就自己模仿着其它地方的写了一个，现在配合着原来写的gridview一起使用看看效果。 我们项目有个地方有点痛苦，他不能返回数据的总记录数，这个bug不修复我这边都只能动态附初始值，另外首页尾页等因为刚刚写起皆暂时未实现， 等后面点调整后，有必要便一起发出来。 截图 分页代码使用示...
使用Ajax和Jquery实现GridView的展开、合并
cunzhang145的专栏
09-24 618
界面操作：   Step 1 展现会员列表，如下图 Step 2 点击“某一会员”行展现会员订单列表    实现思路： 1、  使用用户控件（CustomerOrders.ascx）展示订单列表，此用户控件只需要包含Repeater控件并绑定数据源 2、  新建一个简单页面GridViewDrillDownjQueryQAjax.aspx，在此页面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值