让Asp.NET的DataGrid可排序、可选择、可分页
程序员文章站
2022-06-29 19:00:01
datagrid是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)写到了页面中。在软件开发中，我们一般把访问数据的部分写成数据层，页面调用数据层得到数据，这样逻辑清晰，修改和维护都很方便。
设计思路：
为了方便起见，我们连接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)写到了页面中。在软件开发中，我们一般把访问数据的部分写成数据层，页面调用数据层得到数据，这样逻辑清晰，修改和维护都很方便。