让Asp.NET的DataGrid可排序、可选择、可分页

DataGrid是Asp.NET中的一个重要的控件,经常我们都将DataGrid做成可分页的和可排序的,有时还需要加上选择功能。这些都是经常需要用到的方法,其实是比较简单的。 
设计思路:

为了方便起见,我们连接SQL Server 2000的NorthWind数据库的Orders表,从数据库里得到此表的数据视图。利用DataGrid的SortCommand事件实现排序。用一个模板列加上CheckBox控件实现选择。可用DataGrid的属性生成器的“分页”选项或者自己修改HTML实现分页。 
HTML: 
添加一个DataGrid,命名为dgOrder。 
添加了一个模板列,模板列里放一个名为Cb的CheckBox控件。此列用来实现选择 
为要排序的每个列加上排序表达式SortExpression。 
利用列的DataFormatString来格式化列,象DataFormatString="{0:d}"显示日期格式。 
设置PageSize="15"每页显示15行数据,AllowPaging="True" 为允许分页 。 
整个HTML页代码:  


代码如下:

<form id="Form1" method="post" runat="server">  
<asp:datagrid id="dgOrder" runat="server" Height="515px" Width="718px" AutoGenerateColumns="False" AllowSorting="True" CellPadding="4" BorderWidth="1px" BorderColor="#A0ABEB" PageSize="15" BorderStyle="Solid" BackColor="White" GridLines="Vertical" ForeColor="Black" AllowPaging="True" ShowFooter="True">  
<SelectedItemStyle ForeColor="White" BackColor="Black"></SelectedItemStyle>  
<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>  
<HeaderStyle HorizontalAlign="Center" ForeColor="White" BorderColor="#6876C5" BackColor="#6876C5"></HeaderStyle>  
<FooterStyle ForeColor="White" BackColor="#6876C5"></FooterStyle>  
<Columns>  
<asp:TemplateColumn>  
<ItemTemplate>  
<FONT face="宋体">  
<asp:CheckBox id="Cb" runat="server"></asp:CheckBox></FONT>  
</ItemTemplate>  
</asp:TemplateColumn>  
<asp:BoundColumn DataField="orderid" SortExpression="orderid" HeaderText="ID">  
<HeaderStyle Width="180px"></HeaderStyle>  
</asp:BoundColumn>  
<asp:BoundColumn DataField="ShipCountry" SortExpression="ShipCountry" HeaderText="ShipCountry">  
<HeaderStyle Width="180px"></HeaderStyle>  
</asp:BoundColumn>  
<asp:BoundColumn DataField="ShippedDate" SortExpression="ShippedDate" HeaderText="ShippedDate" DataFormatString="{0:d}">  
<HeaderStyle Width="180px"></HeaderStyle>  
</asp:BoundColumn>  
<asp:BoundColumn DataField="Freight" SortExpression="Freight" HeaderText="Freight">  
<HeaderStyle Width="180px"></HeaderStyle>  
</asp:BoundColumn>  
<asp:BoundColumn DataField="ShipAddress" SortExpression="ShipAddress" HeaderText="ShipAddress">  
<HeaderStyle Width="480px"></HeaderStyle>  
</asp:BoundColumn>  
</Columns>  
<PagerStyle HorizontalAlign="Center" ForeColor="Black" Position="TopAndBottom" BackColor="White" Mode="NumericPages"></PagerStyle>  
</asp:datagrid>  
</form>

后台类添加以下代码:

Imports System.Data.SqlClient

'得到数据视图,参数为要排序的列  
Private Function GetDv(ByVal strSort As String) As DataView  
'定义数据库连接  
Dim dv As DataView  
Dim CN As New SqlConnection()  
Try  
'初始化连接字符串  
CN.ConnectionString = "data source=pmserver;initial catalog=Northwind;persist security info=False;user id=sa;Password=sa;"  
CN.Open()  
'从NorthWind得到orders表的数据  
Dim adp As SqlDataAdapter = New SqlDataAdapter("select * from orders", CN)  
Dim ds As New DataSet()  
adp.Fill(ds)  
'得到数据视图  
dv = ds.Tables(0).DefaultView  
Catch ex As Exception  
#If DEBUG Then  
Session("Error") = ex.ToString()  
Response.Redirect("../error.aspx") '跳转程序的公共错误处理页面  
#End If  
Finally  
'关闭连接  
CN.Close()  
End Try  
'排序  
dv.Sort = strSort  
Return dv  
End Function

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load  
If Not IsPostBack Then  
ViewState("strSort") = "orderid"  
dgOrder.DataSource = GetDv(ViewState("strSort").ToString())  
dgOrder.DataBind()  
End If  
End Sub  
'排序  
Private Sub dgOrder_SortCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles dgOrder.SortCommand  
dgOrder.CurrentPageIndex = 0  
'得到排序的列  
ViewState("strSort") = e.SortExpression.ToString()  
dgOrder.DataSource = GetDv(ViewState("strSort").ToString())  
dgOrder.DataBind()  
End Sub

'分页  
Private Sub dgOrder_PageIndexChanged(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles dgOrder.PageIndexChanged  
'得到分页的页号  
dgOrder.CurrentPageIndex = e.NewPageIndex  
dgOrder.DataSource = GetDv(ViewState("strSort").ToString())  
dgOrder.DataBind()  
End Sub   
运行结果如下图所示:(点击列标头可以排序)

为了知道用户选择的是哪些记录,我们可以利用DataGridItem的FindControl得到CheckBox的值,我们来添加一个按钮,再写如下代码:  
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click  
Dim item As DataGridItem  
Dim StrScript As String  
StrScript = "<script language=javascript>alert('"  
'循环表格的项,FindControl  
For Each item In Me.dgOrder.Items  
If CType(item.FindControl("cb"), System.Web.UI.WebControls.CheckBox).Checked Then  
Try  
StrScript += item.Cells(1).Text & Space(2)  
Catch ex As Exception  
End Try  
End If  
Next  
StrScript += "被选择!')</script>"  
RegisterClientScriptBlock("系统消息", StrScript)  
End Sub

上面的代码RegisterClientScriptBlock添加Java Script脚本弹出对话框。(其实Vb Script的对话框比Java Script的对话框多更多的显示和控制方式,但Netscape的浏览器不支持,大家可根据相应的项目在程序里选择用哪种脚本)。 
总结: 
DataGrid是我们常用的Web 控件,有时我们还可以和DataList混合使用,通过修改HTML页,可以达到好的页面效果。上面只是一个例子,为了便于清楚整个过程,我把数据访问部分(SQL)写到了页面中。在软件开发中,我们一般把访问数据的部分写成数据层,页面调用数据层得到数据,这样逻辑清晰,修改和维护都很方便。

(0)

相关推荐

  • EasyUi中的Combogrid 实现分页和动态搜索远程数据

    jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据.如果数据量大的情况,就需要combogrid具有分页的功能.下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据. $('#mallid').combogrid({ panelWidth:500, idField:'mallid', //ID字段 t

  • jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面一一写来. 首先看一下要实现的效果:当每页显示5行数据: 当每页显示10行数据,效果如下: 具体步骤: 1.下载Easyui,并搭建环境. 2.搭建SSH工程,整个工程的目录结构如图所示: 3.在Oracle数据库中创建表Student.并且输入下面6行数据,因为添加操作还没有实现,所以先在数据库表中添加数据.默认

  • jQuery EasyUI API 中文文档 - Pagination分页

    用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n

  • EasyUi datagrid 实现表格分页

    1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js 复制代码 代码如下: //源数据 function Async(action,args,callback){   $.ajax({ url: action ,   type:"POST",   dataType:"json",   timeout: 10000,   data: args,   success: function(data){     if(callback){   cal

  • DataGrid同时具有分页和排序功能及注意点

    当DataGrid同时具有分页和排序功能时应注意在重新绑定数据源时,MyDataGrid.CurrentPageIndex=0;下面给实现以上功能的原码,也就不多缀了aspx中包含有DataGrid和控制其数据源变化的dropdownlistDataGrid代码  <asp:datagrid id="MyDataGrid" runat="server" BorderColor="#CCCCCC" Font-Size="100%&q

  • 如何在DataGrid控件中实现自定义分页

    如何在DataGrid控件中实现自定义分页      在一般情况下,DataGrid控件每次实现翻页操作时,都会将数据源中的数据重新调用一次,当数据中 数据很多时,这样做就会很浪费系统资源和降低程序的执行效率.这时候我们一般通过自定义分页来解 决这个问题.     DataGrid控件的AllowCustomPaging属性用来获取或设置DataGrid控件是否允许自定义分 页;VirtualItemCoun属性用来获取或设置在使用自定义分页时DataGrid中实际的项数.要实现自定义分 页,必

  • 一个典型的PHP分页实例代码分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 高效的SQLSERVER分页查询(推荐)

    第一种方案.最简单.普通的方法: 复制代码 代码如下: SELECT TOP 30 * FROM ARTICLE WHERE ID NOT IN(SELECT TOP 45000 ID FROM ARTICLE ORDER BY YEAR DESC, ID DESC) ORDER BY YEAR DESC,ID DESC 平均查询100次所需时间:45s 第二种方案: 复制代码 代码如下: SELECT * FROM ( SELECT TOP 30 * FROM (SELECT TOP 4503

  • jQuery EasyUI Pagination实现分页的常用方法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一.使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Convert.ToInt32(Request["rows"]); int pageN

随机推荐