GridView的自定义分页，单选、多选、排序、自增列的简单应用-优快云博客

本文介绍了一个使用ASP.NET实现的GridView控件示例，该控件具备分页、排序等功能，并通过JavaScript实现了行高亮显示及多选操作。示例中详细展示了如何通过服务器端和客户端代码相结合来增强用户体验。

1.前台代码

<%...@PageLanguage="C#"AutoEventWireup="true"CodeFile="testgridview2.aspx.cs"Inherits="web_testgridview2"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<scriptlanguage="javascript"type="text/javascript">...

//判断多选是否与选中项（没有选中的返回false）

functionslcNo_click()

...{

if(document.form1.checkboxname.length)

...{

for(vari=0;i<document.form1.checkboxname.length;i++)

...{

if(document.form1.checkboxname[i].checked)

...{

returntrue;

}

else

...{

if(document.form1.checkboxname.checked)

...{

returntrue;

}

alert("请选择后再操作！");

returnfalse;

}

//鼠标经过改变行的颜色

if(!objbeforeItem)

...{

varobjbeforeItem=null;

varobjbeforeItembackgroundColor=null;

}

functionItemOver(obj)

...{

if(objbeforeItem)

...{

objbeforeItem.style.backgroundColor=objbeforeItembackgroundColor;

}

objbeforeItembackgroundColor=obj.style.backgroundColor;

objbeforeItem=obj;

obj.style.backgroundColor="#B9D1F3";

}

//多选的全选与取消

functioncheckJs(boolvalue)

...{

if(document.all.checkboxname.length>1)

...{

for(vari=0;i<document.all.checkboxname.length;i++)

...{

document.all.checkboxname[i].checked=boolvalue;

}

else

document.all.checkboxname.checked=boolvalue;

}

//只有全部选中时“全选”选中

functionSingleCheckJs()

...{

varflag1=false;

varflag2=false;

if(document.form1.checkboxname.length)

...{

for(vari=0;i<document.form1.checkboxname.length;i++)

...{

if(document.form1.checkboxname[i].checked)

flag1=true;

else

flag2=true;

}

else

...{

if(document.form1.checkboxname.checked)

flag1=true;

else

flag2=true;

}

if(flag1==true&&flag2==false)

document.getElementById("chk").checked=true;

else

document.getElementById("chk").checked=false;

}

</script>

</head>

<body>

<formid="form1"runat="server">

<div>

<tablecellpadding="0"cellspacing="0"border="0"width="80%"style="font-size:11px">

<tr>

<tdalign="center">

<asp:GridViewID="GridView1"runat="server"Width="100%"CellPadding="4"ForeColor="#333333"

AutoGenerateColumns="False"AllowPaging="True"PageSize="12"BorderColor="Silver"

BorderStyle="Solid"BorderWidth="1px"OnRowDataBound="GridView1_RowDataBound"

ShowFooter="True"EmptyDataText="没有数据记录！！"AllowSorting="True"OnSorting="GridView1_Sorting">

<asp:BoundFieldHeaderText="编号"DataField="id"Visible="False"/>

<asp:TemplateFieldHeaderText="<inputtype='checkbox'id='chk'name='chk'onclick='checkJs(this.checked);'/>全选"FooterText="全选">

<inputtype="checkbox"id="checkboxname"name="checkboxname"value='<%#DataBinder.Eval(Container.DataItem,"id")%>'onclick='SingleCheckJs();'/>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="单选"FooterText="单选">

<inputtype="radio"id="RadioName"name="RadioName"value='<%#Eval("id")%>'/>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderText="自增列"FooterText="自增列">

<%...#(Container.DataItemIndex+1).ToString()%>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundFieldHeaderText="姓名"FooterText="姓名"DataField="name"SortExpression="name"/>

<asp:BoundFieldHeaderText="身份证号"FooterText="身份证号"DataField="card"SortExpression="card"/>

<asp:BoundFieldHeaderText="价格"FooterText="价格"DataField="price"DataFormatString="{0:￥#,##0.00}"

HtmlEncode="False"SortExpression="price"/>

<asp:BoundFieldHeaderText="数字"FooterText="数字"DataField="price"DataFormatString="{0:0.00}"

HtmlEncode="False"SortExpression="price"/>

<asp:BoundFieldHeaderText="建立时间"FooterText="建立时间"DataField="createdate"DataFormatString="{0:yyyy年MM月dd日hh时mm分ss秒}"

HtmlEncode="False"SortExpression="createdate"/>

</Columns>

<RowStyleBackColor="#F7F6F3"ForeColor="#333333"/>

<EditRowStyleBackColor="#999999"/>

<SelectedRowStyleBackColor="#E2DED6"Font-Bold="True"ForeColor="#333333"/>

<PagerStyleBackColor="#284775"ForeColor="White"HorizontalAlign="Center"/>

<AlternatingRowStyleBackColor="White"ForeColor="#284775"/>

<PagerSettingsVisible="False"/>

<FooterStyleFont-Bold="True"/>

<HeaderStyleFont-Bold="False"Font-Italic="False"/>

</asp:GridView>

</td>

</tr>

<tr>

<tdalign="center"style="height:25px">

<asp:LinkButtonID="btnFirst"CommandArgument="first"OnClick="PagerButtonClick"

runat="server">首页</asp:LinkButton>

<asp:LinkButtonID="btnPrev"CommandArgument="prev"OnClick="PagerButtonClick"runat="server">上一页</asp:LinkButton>

<asp:LinkButtonID="btnNext"CommandArgument="next"OnClick="PagerButtonClick"runat="server">下一页</asp:LinkButton>

<asp:LinkButtonID="btnLast"CommandArgument="last"OnClick="PagerButtonClick"runat="server">尾页</asp:LinkButton>

<asp:LabelID="LblCurrentIndex"runat="server"></asp:Label>

<asp:LabelID="LblPageCount"runat="server"></asp:Label>

<asp:LabelID="LblRecordCount"runat="server"></asp:Label></td>

</tr>