当前位置: 移动技术网 > IT编程>开发语言>.net > 让Asp.NET的DataGrid可排序、可选择、可分页

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

2018年04月28日  | 移动技术网IT编程  | 我要评论
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)写到了页面中。在软件开发中,我们一般把访问数据的部分写成数据层,页面调用数据层得到数据,这样逻辑清晰,修改和维护都很方便。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网