创建自滚动的DataGrid

最新推荐文章于 2022-08-26 15:34:00 发布
最新推荐文章于 2022-08-26 15:34:00 发布
阅读量279 收藏
点赞数
分类专栏： asp.net 文章标签： datagrid postback object microsoft function generator
<script language='javascript' src='http://www.shiqiaotou.com/donetk/Header.js'></script>   在使用DataGrid时，如果页面很长，可能需要用户自己来拉动滚动条，下面的例子实现了自动滚动的功能。其基本原理就是利用了LinkButton的锚点的功能，如果使用PushButton，那还必须自己添加锚点。另外必须弄明白的是Page的PostBack时的客户端脚本：
  
  <script language="<a href="http://dev.21tx.com/web/javascript/" target="_blank">JavaScript</a>">
  <!--
   function __doPostBack(eventTarget, eventArgument) {
   var theform = document.Form1;
   theform.__EVENTTARGET.value = eventTarget;
   theform.__EVENTARGUMENT.value = eventArgument;
   theform.submit();
   }
  // -->
  </script>
  
  这段脚本中__doPostBack函数有两个参数：第一个eventTarget是触发PostBack的控件的UniqueID；第二参数eventArgument是一个对象，包含PostBack的额外信息。因此我们使用UniqueID来作为锚点的值。
  
  源代码如下：
  
  查看例子
  
  DataGridAutoScroll.ASPx
  
  <%@ Page Language="<a href="http://dev.21tx.com/language/vb/" target="_blank">VB</a>" AutoEventWireup="false" Codebehind="DataGridAutoScroll.aspx.vb"
   Inherits="aspx<a href="http://dev.21tx.com/web/" target="_blank">Web</a>.DataGridAutoScroll"%>
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <HTML>
   <HEAD>
   <title runat="server" id="mengxianhui"></title>
   <meta name="GENERATOR" content="Microsoft Visual Studio<a href="http://dev.21tx.com/dotnet/" target="_blank">.net</a> 7.0">
   <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
   <meta name="vs_defaultClientScript" content="<a href="http://dev.21tx.com/java/" target="_blank">Java</a>Script">
   <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
   </HEAD>
   <body>
   <form id="Form1" method="post" runat="server">
   <asp:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966" BorderStyle="None"
   BorderWidth="1px" BackColor="White" CellPadding="4">
   <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
   <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
   <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
   <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
   <Columns>
   <asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Update"
   CancelText="Cancel" EditText="Edit"></asp:EditCommandColumn>
   </Columns>
   <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
   </asp:DataGrid>
   </form>
   </body>
  </HTML>
  
  代码：DataGridAutoScroll.aspx.vb
  
  Imports System
  Imports System.Web
  Imports System.Web.UI.WebControls
  Imports System.Collections
  Imports System.Data
  Imports System.Data.SqlClient
  
  Public Class DataGridAutoScroll
   Inherits System.Web.UI.Page
   Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
   Protected mengxianhui As New HtmlGenericControl()
  
  #Region " Web Form Designer Generated Code "
   <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
   End Sub
  
   Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
   InitializeComponent()
   End Sub
  
  #End Region
  
   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   mengxianhui.InnerText = "【孟宪会之精彩世界】之.NET开发者园地"
   If Not Page.IsPostBack Then
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   Else
   Dim startUpScript As String
   startUpScript = "<script language=Javascript>location.href='#" _
   & Request.Form("__EVENTTARGET") & "';</script>"
   Me.RegisterStartupScript(Me.UniqueID & "StartUp", startUpScript)
   End If
  
   End Sub
  
   Function CreateDataSource() As ICollection
  
   Dim dt As DataTable
   Dim dr As DataRow
   Dim i As Integer
  
   '创建 DataTable
   dt = New DataTable()
   dt.Columns.Add(New DataColumn("字符型值", GetType(String)))
   dt.Columns.Add(New DataColumn("布尔型值", GetType(Boolean)))
   dt.Columns.Add(New DataColumn("货币型值", GetType(Double)))
  
   '示例数据
   For i = 1 To 150
   dr = dt.NewRow()
   dr(0) = "Item " + i.ToString()
   If (i Mod 2 <> 0) Then
   dr(1) = True
   Else
   dr(1) = False
   End If
   dr(2) = 1.23 * (i + 1)
   '向datatable添加 row
   dt.Rows.Add(dr)
   Next
  
   '返回DataTable的DataView
   CreateDataSource = New DataView(dt)
  
   End Function
  
   Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
   Select Case e.Item.ItemType
   Case ListItemType.Item, ListItemType.AlternatingItem
   Dim editButton As LinkButton = New LinkButton()
   editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
   editButton.Attributes.Add("name", "#" & editButton.UniqueID)
  
   Case ListItemType.EditItem
   Dim UpdateButton As LinkButton = New LinkButton()
   UpdateButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
   UpdateButton.Attributes.Add("name", "#" & UpdateButton.UniqueID)
   End Select
   End Sub
  
   Private Sub DataGrid1_EditCommand(ByVal source As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.EditCommand
   DataGrid1.EditItemIndex = e.Item.ItemIndex
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   End Sub
  
   Private Sub DataGrid1_CancelCommand(ByVal source As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.CancelCommand
   DataGrid1.EditItemIndex = -1
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   End Sub
  
   Private Sub DataGrid1_UpdateCommand(ByVal source As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.UpdateCommand
   DataGrid1.EditItemIndex = -1
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   End Sub
  End Class<script language='javascript' src='http://www.shiqiaotou.com/donetk/Footer.js'></script>
donetk
关注
专栏目录
wpf datagrid滚动使用外置滚动条控件
**My Coding Family**
10-19 744
通过这种方式，你可以实现一个外置的ScrollBar，并且保持与DataGrid的滚动同步。即使DataGrid自身的垂直滚动条被隐藏，滚轮滚动也能正常工作并同步更新外部的滚动条。希望如上措施及解决方案能够帮到有需要的你。PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。
js使用miniUI和easyui创建datagrid
qq_35731738的博客
10-25 1501
miniUI方法： function DrugDataGridInt () { var columns = [ { type: "indexcolumn" }, { field: 'time', header: '时间', width: 200, align: 'left', visible: true ,dateFormat:...
小程序实现上拉加载
zuiruolong的博客
12-25 2312
无论是微信小程序还是其他前端框架，都会遇到上拉加载（上拉加载也是懒加载）和下拉刷新这种问题，清楚的知道什么时候请求数据，请求返回几种情况，那么做这个懒加载就很简单了。 1.首先我们固定一个列表数据的view高度让他的列表数据超过容器就可以滚动了。 2.那么列表的数据请求就会分成两种情况，一种是初始化页面加载第一页的数据；一种是滚到底部请求下一页的数据，所以我们在请求时要分两种情况，若是第一个ispage=false，下一页数据就ispage=true 3.第一步的固定高度的view，它在往上滚动的时候，滚动
DataGrid应用（二） —— 滚动条的设计
Lullaby's Blog
12-13 7978
      为DataGrid加上滚动条，众所周知可以通过嵌套在里来实现。我先总结一下这些方法：1.   利用div的overflow的特性，我们可以设计出表格的滚动条。但是我们通常需要一个固定不动的表头，因为整个datagrid放在div中，无法使表头固定不动。（方法二，可以利用css固定)，我们设计需要另一个来作为表头，同时，将由div包含着的datagrid的表明细行对齐表头，形成完整的
修改DataGrid得默认scroll行为
AllenYoung
09-17 529
用过Ext的人也许都会注意到，DataGrid的scroll行为只在当前DataGrid中有效。比如，一个带有纵向滚动条的DataGrid，如果我们把鼠标停留在DataGrid上并滚动滚轴，DataGrid中的条目就会随之滚动起来，一直到最后一条为止。这个时候，如果继续滚动，则不会有任何响应。整个网页也不会跟着滚动。在很多情况下，这样做是正确的，其目的是防止整个网页的滚动。因为当在DataGrid...
DataGrid的使用入门（添加、删除和修改操作）
johncools的博客
04-01 1229
最近在做一个管理系统，发现DATAGRID真的很好用，不过用起来有点麻烦，所以转一下相关文章，与大家分享。　　见于好多人在CSDN上问如何在DataGrid中进行添加、删除和修改操作，我最近作了如下一个例子。 首先，例子所用的数据库是SQL Server2000，数据库表格如下： 字段名
WPF七（DataGrid 滑轮滚动事件多种处理方式）
PassionLong的博客
08-26 4455
WPF DataGrid 滑轮滚动事件多种处理方式
wpf datagrid滑动条
11-05
可以创建一个资源字典，定义新的`ScrollViewer.Style`和`ScrollBar.Style`，然后将其添加到你的`DataGrid`或者整个应用程序中。 5. **数据绑定** - `DataGrid`通常与数据源进行绑定，使用`ItemsSource`属性指定...
silverlight DataGrid 外置滚动条
01-17
总结来说，Silverlight的DataGrid控件提供了强大的数据展示功能，配合外置滚动条和DataPager分页控件，可以创建出高效且易用的数据浏览界面。通过自定义样式和模板，开发者可以进一步优化界面布局，提升用户交互体验...
c# WPF DataGrid 底部汇总行合计
01-20
确保当用户滚动DataGrid时，汇总行始终保持在可视区域的底部，这可能需要调整DataGrid的布局和大小设置。 最后，对于DataGrid的性能优化，我们应该避免在每次数据源更改时都重新计算所有总和，尤其是在大数据集的...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条），每页显示1000行...
weixin_34248258的博客
07-07 1255
最近用多了easyui 之后还是觉得它的功能还是很强大的。它原有的功能就已经能够满足90%以上的界面需求。 1、当数据行很多时，会呈现垂直的滚动条，但是向下滚动，表头却被淹没了，这不符合人类偷懒的特点（我怎么可能记得住每列的数据代表的意思！），所以需要固定表头。 datagrid.datagrid({ fit: true }); 对，没错，就是这个属性，就这么简单...
在easyui中实现datagrid滚动条联动
Mr_Alex
07-22 7346
//竖向滚动条联动 var contents = $('#importform div.datagrid-body'); contents.scroll(function () { contents.not(this).prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop }); });
关于datagrid 垂直滚动条设置
热门推荐
jingnengzhiyuan的博客
09-13 1万+
很多事我们需要让datagrid  显示滚动条 js里面  onLoadSuccess: cellTipFilter,         //singleSelect:false,    rownumbers:true,//显示行号列 fitColumns:true,//折叠适合datagrid宽度 我没有把代码写全，大体上就是这个的。
DataGrid学习一
The key to .Net
05-03 299
　　数据访问是任何实际应用程序的核心部分，而 ASP.NET 提供了一套丰富的控件，这些控件与公共语言运行库中提供的托管数据访问 API 很好地集成在一起。从今天开始我们就来学习DataGrid数据控件的使用。　　为了使页能够访问执行 SQL 数据访问所需的类，必须将 System.Data 和System.Data.SqlClient 命名空间导入到页中。 　　若要对 SQL 数据库执行选
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值