ASP.NET中的DataGrid控件示例 Powered By:记得忘记
关于DataGrid 的几点简单应用:
1、有关checkbox的几个功能：全部选种、取消选种、没选中操作的检测等，这几个均使用js脚本实现。
2、根据主键关键字进行查询，如果条件输入为空，则检索所有数据
3、显示页面状态，第几页总共几页
4、DataGrid 分页、根据输入的数字跳转到指定页
5、DataGrid的正反双向排序
6、DataGrid的删除、根据主键进行删除
7、DataGrid的编辑、点击后弹出更新、取消按钮
8、插入数据操作、通用BLL层实现
9、DataGrid 根据复选框删除对应记录
SugarcaneClassInfo.ascx:
1
<%@ Register TagPrefix="cc1" Namespace="BaseComponent" Assembly="BaseComponent" %>
2<%@ Control Language="c#" AutoEventWireup="false" Codebehind="SugarcaneClassInfo.ascx.cs" Inherits="WebUI.Modules.BaseData.SugarcaneClassInfo" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
3<script>
4
//DataGrid单击行时改变颜色
5 var oldrow;
6 var newColor='#BDBD00';
7 var oldColor;
8
9 function SelectRow(rowno)
10
{
11 if (oldrow == null)
12 {
13 oldColor = document.all('row'+rowno).style.backgroundColor;
14 document.all('row'+rowno).style.backgroundColor = newColor;
15
}
16 else
17 {
18 oldrow.style.backgroundColor = oldColor;
19 oldColor = document.all('row'+rowno).style.backgroundColor;
20 document.all('row'+rowno).style.backgroundColor = newColor;
21 }
22
23 oldrow = document.all('row'+rowno);
24 }
25
26 var checkFlag = true;
27 function ChooseAll()
28 {
29 //if( !document.all("CheckAll").Checked ) // 全选
30 if( checkFlag ) // 全选
31 {
32 var inputs = document.all.tags("INPUT");
33 for (var i=0; i < inputs.length; i++) // 遍历页面上所有的 input
34 {
35 if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll" )
36 {
37 inputs[i].checked = true;
38 }
39 }
40 checkFlag = false;
41 }
42 else // 取消全选
43 {
44 var inputs = document.all.tags("INPUT");
45 for (var i=0; i < inputs.length; i++) // 遍历页面上所有的 input
46 {
47 if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll" )
48 {
49 inputs[i].checked = false;
50 }
51 }
52 checkFlag = true;
53 }
54 }
55
56 // <summary>
57 // 让用户加以确认删除数据。
58 // </summary>
59 function DelRec()
60 {
61 var inputs = document.all.tags("input");
62 var selectedLen = 0;
63 for( var i=0;i < inputs.length; i ++)
64 {
65 if(inputs[i].type == "checkbox")
66 {
67 if( inputs[i].checked )
68 {
69 if(inputs[i].id != "CheckAll")
70 {
71 selectedLen ++;
72 }
73 }
74 }
75 }
76 if( selectedLen == 0 )
77 {
78 alert("请先选择您要删除的数据！");
79 }
80 else
81 {
82 var flag = confirm("您确定要删除所选择的这 " + selectedLen + " 条数据吗？");
83 if(flag)
84 {
85 document.all("ibtnDel").click();
86 }
87 }
88 }
89
90
91
</script>
92<P><FONT face="宋体">
93 <TABLE class="TABLE" id="Table1" style="WIDTH: 771px; HEIGHT: 248px" cellSpacing="1" cellPadding="1"
94 width="771" align="center" border="0">
95 <TR>
96 <TD>
97 <P>
98 <HR color="background" SIZE="1">
99 编号关键字:
100 <asp:textbox id="txtClassID" runat="server"></asp:textbox><asp:imagebutton id="ibtnSearch" runat="server" ImageUrl="../../Images/button_search.GIF"></asp:imagebutton>
101 【按编号关键字进行搜索】
102 </TD>
103 </TR>
104 <TR>
105 <TD style="HEIGHT: 16px">
106 <P align="left"> 品种名称:
107 <asp:textbox id="txtClassName" runat="server"></asp:textbox>
108 价格:
109 <asp:textbox id="txtPrice" runat="server"></asp:textbox> 备注:
110 <asp:textbox id="txtRemark" runat="server"></asp:textbox></P>
111 </TD>
112 </TR>
113 <TR>
114 <TD style="HEIGHT: 25px">
115 <P align="right"><asp:imagebutton id="ibtnAdd" runat="server" ImageUrl="../../Images/button_add.gif"></asp:imagebutton><asp:imagebutton id="ibtnDel" runat="server" ImageUrl="../../Images/button_del.gif"></asp:imagebutton><asp:imagebutton id="ibtnCancel" runat="server" ImageUrl="../../Images/button_cancel.gif"></asp:imagebutton></P>
116 </TD>
117 </TR>
118 <TR>
119 <TD vAlign="top">
120 <DIV align="center"><asp:datagrid id="DataGrid1" runat="server" AllowSorting="True" AllowPaging="True" HorizontalAlign="Center"
121 PageSize="15" Width="100%" AutoGenerateColumns="False" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
122 BackColor="White" CellPadding="3">
123 <SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#669999"></SelectedItemStyle>
124 <ItemStyle ForeColor="Black"></ItemStyle>
125 <HeaderStyle Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BackColor="#6766CC"></HeaderStyle>
126 <FooterStyle ForeColor="#000066" BackColor="#6766CC"></FooterStyle>
127 <Columns>
128 <asp:TemplateColumn>
129 <ItemStyle HorizontalAlign="Center"></ItemStyle>
130 <HeaderTemplate>
131 <INPUT id="CheckAll" onclick="ChooseAll()" type="checkbox" name="CheckAll">
132 </HeaderTemplate>
133 <ItemTemplate>
134 <asp:CheckBox id="chkDel" runat="server"></asp:CheckBox>
135 </ItemTemplate>
136 </asp:TemplateColumn>
137 <asp:HyperLinkColumn Target="_self" DataNavigateUrlField="ClassID" DataNavigateUrlFormatString="Default.aspx?Module=SugarcaneClassInfoDetail&ClassID={0}&Mode=edit"
138 DataTextField="ClassID" SortExpression="ClassID" HeaderText="编号">
139 <HeaderStyle Width="10%" CssClass="HEADERSTYLE"></HeaderStyle>
140 <ItemStyle CssClass="ITEMSTYLEHYPERLINK"></ItemStyle>
141 </asp:HyperLinkColumn>
142 <asp:BoundColumn Visible="False" DataField="ClassID" SortExpression="ClassID" HeaderText="编号"></asp:BoundColumn>
143 <asp:BoundColumn DataField="ClassName" SortExpression="ClassName" HeaderText="品种名称">
144 <HeaderStyle Width="30%"></HeaderStyle>
145 </asp:BoundColumn>
146 <asp:BoundColumn DataField="Price" SortExpression="Price" HeaderText="价格" DataFormatString="{0:F2}">
147 <HeaderStyle Width="10%"></HeaderStyle>
148 </asp:BoundColumn>
149 <asp:BoundColumn DataField="Remark" HeaderText="备注">
150 <HeaderStyle Width="28%"></HeaderStyle>
151 </asp:BoundColumn>
152 <asp:EditCommandColumn ButtonType="LinkButton" UpdateText="更新" CancelText="取消" EditText="编辑">
153 <HeaderStyle Width="12%"></HeaderStyle>
154 </asp:EditCommandColumn>
155 <asp:ButtonColumn Text="<div onclick="javascript:return confirm('确定删除吗？')">删除</div>"
156 CommandName="Delete">
157 <HeaderStyle Width="10%"></HeaderStyle>
158 </asp:ButtonColumn>
159 </Columns>
160 <PagerStyle Visible="False" HorizontalAlign="Left" ForeColor="#000066" BackColor="#EAEAEA" Mode="NumericPages"></PagerStyle>
161 </asp:datagrid></DIV>
162 </TD>
163 </TR>
164 <TR>
165 <TD><asp:label id="lblPageCount" runat="server"></asp:label><asp:label id="lblCurrentIndex" runat="server" Width="104px"></asp:label><asp:linkbutton id="btnFirst" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"
166 CommandArgument="0" ForeColor="navy"></asp:linkbutton><asp:linkbutton id="btnPrev" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"
167 CommandArgument="prev" ForeColor="navy"></asp:linkbutton><asp:linkbutton id="btnNext" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"
168 CommandArgument="next" ForeColor="navy"></asp:linkbutton><asp:linkbutton id="btnLast" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"
169 CommandArgument="last" ForeColor="navy"></asp:linkbutton><asp:label id="Label1" runat="server">跳转：</asp:label><asp:textbox id="go" Width="20px" BorderColor="#9999FF" BorderWidth="1px" BackColor="White" AutoPostBack="True"
170 OnTextChanged="goClick" Runat="server"></asp:textbox></TD>
171 </TR>
172 </TABLE>
173 </FONT>
174</P>
175
<%@ Register TagPrefix="cc1" Namespace="BaseComponent" Assembly="BaseComponent" %>2
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="SugarcaneClassInfo.ascx.cs" Inherits="WebUI.Modules.BaseData.SugarcaneClassInfo" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>3
<script>4
//DataGrid单击行时改变颜色5
var oldrow;6
var newColor='#BDBD00';7
var oldColor;8
9
function SelectRow(rowno)10
{ 11
if (oldrow == null)12
{13
oldColor = document.all('row'+rowno).style.backgroundColor;14
document.all('row'+rowno).style.backgroundColor = newColor;15
}16
else17
{18
oldrow.style.backgroundColor = oldColor;19
oldColor = document.all('row'+rowno).style.backgroundColor;20
document.all('row'+rowno).style.backgroundColor = newColor;21
}22
23
oldrow = document.all('row'+rowno);24
}25
26
var checkFlag = true;27
function ChooseAll()28
{29
//if( !document.all("CheckAll").Checked ) // 全选 30
if( checkFlag ) // 全选 31
{32
var inputs = document.all.tags("INPUT");33
for (var i=0; i < inputs.length; i++) // 遍历页面上所有的 input 34
{35
if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll" )36
{37
inputs[i].checked = true;38
} 39
}40
checkFlag = false;41
}42
else // 取消全选43
{44
var inputs = document.all.tags("INPUT");45
for (var i=0; i < inputs.length; i++) // 遍历页面上所有的 input 46
{47
if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll" )48
{49
inputs[i].checked = false;50
} 51
}52
checkFlag = true;53
}54
}55
56
// <summary>57
// 让用户加以确认删除数据。58
// </summary>59
function DelRec()60
{61
var inputs = document.all.tags("input");62
var selectedLen = 0;63
for( var i=0;i < inputs.length; i ++)64
{65
if(inputs[i].type == "checkbox")66
{67
if( inputs[i].checked )68
{69
if(inputs[i].id != "CheckAll")70
{71
selectedLen ++;72
}73
}74
}75
}76
if( selectedLen == 0 )77
{78
alert("请先选择您要删除的数据！");79
}80
else81
{82
var flag = confirm("您确定要删除所选择的这 " + selectedLen + " 条数据吗？");83
if(flag)84
{85
document.all("ibtnDel").click(); 86
}87
}88
}89
90
91
</script>92
<P><FONT face="宋体">93
<TABLE class="TABLE" id="Table1" style="WIDTH: 771px; HEIGHT: 248px" cellSpacing="1" cellPadding="1"94
width="771" align="center" border="0">95
<TR>96
<TD>97
<P>98
<HR color="background" SIZE="1">99
编号关键字:100
<asp:textbox id="txtClassID" runat="server"></asp:textbox><asp:imagebutton id="ibtnSearch" runat="server" ImageUrl="../../Images/button_search.GIF"></asp:imagebutton>101
【按编号关键字进行搜索】102
</TD>103
</TR>104
<TR>105
<TD style="HEIGHT: 16px">106
<P align="left"> 品种名称:107
<asp:textbox id="txtClassName" runat="server"></asp:textbox> 108
价格:109
<asp:textbox id="txtPrice" runat="server"></asp:textbox> 备注:110
<asp:textbox id="txtRemark" runat="server"></asp:textbox></P>111
</TD>112
</TR>113
<TR>114
<TD style="HEIGHT: 25px">115
<P align="right"><asp:imagebutton id="ibtnAdd" runat="server" ImageUrl="../../Images/button_add.gif"></asp:imagebutton><asp:imagebutton id="ibtnDel" runat="server" ImageUrl="../../Images/button_del.gif"></asp:imagebutton><asp:imagebutton id="ibtnCancel" runat="server" ImageUrl="../../Images/button_cancel.gif"></asp:imagebutton></P>116
</TD>117
</TR>118
<TR>119
<TD vAlign="top">120
<DIV align="center"><asp:datagrid id="DataGrid1" runat="server" AllowSorting="True" AllowPaging="True" HorizontalAlign="Center"121
PageSize="15" Width="100%" AutoGenerateColumns="False" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"122
BackColor="White" CellPadding="3">123
<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#669999"></SelectedItemStyle>124
<ItemStyle ForeColor="Black"></ItemStyle>125
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BackColor="#6766CC"></HeaderStyle>126
<FooterStyle ForeColor="#000066" BackColor="#6766CC"></FooterStyle>127
<Columns>128
<asp:TemplateColumn>129
<ItemStyle HorizontalAlign="Center"></ItemStyle>130
<HeaderTemplate>131
<INPUT id="CheckAll" onclick="ChooseAll()" type="checkbox" name="CheckAll">132
</HeaderTemplate>133
<ItemTemplate>134
<asp:CheckBox id="chkDel" runat="server"></asp:CheckBox>135
</ItemTemplate>136
</asp:TemplateColumn>137
<asp:HyperLinkColumn Target="_self" DataNavigateUrlField="ClassID" DataNavigateUrlFormatString="Default.aspx?Module=SugarcaneClassInfoDetail&ClassID={0}&Mode=edit"138
DataTextField="ClassID" SortExpression="ClassID" HeaderText="编号">139
<HeaderStyle Width="10%" CssClass="HEADERSTYLE"></HeaderStyle>140
<ItemStyle CssClass="ITEMSTYLEHYPERLINK"></ItemStyle>141
</asp:HyperLinkColumn>142
<asp:BoundColumn Visible="False" DataField="ClassID" SortExpression="ClassID" HeaderText="编号"></asp:BoundColumn>143
<asp:BoundColumn DataField="ClassName" SortExpression="ClassName" HeaderText="品种名称">144
<HeaderStyle Width="30%"></HeaderStyle>145
</asp:BoundColumn>146
<asp:BoundColumn DataField="Price" SortExpression="Price" HeaderText="价格" DataFormatString="{0:F2}">147
<HeaderStyle Width="10%"></HeaderStyle>148
</asp:BoundColumn>149
<asp:BoundColumn DataField="Remark" HeaderText="备注">150
<HeaderStyle Width="28%"></HeaderStyle>151
</asp:BoundColumn>152
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="更新" CancelText="取消" EditText="编辑">153
<HeaderStyle Width="12%"></HeaderStyle>154
</asp:EditCommandColumn>155
<asp:ButtonColumn Text="<div onclick="javascript:return confirm('确定删除吗？')">删除</div>"156
CommandName="Delete">157
<HeaderStyle Width="10%"></HeaderStyle>158
</asp:ButtonColumn>159
</Columns>160
<PagerStyle Visible="False" HorizontalAlign="Left" ForeColor="#000066" BackColor="#EAEAEA" Mode="NumericPages"></PagerStyle>161
</asp:datagrid></DIV>162
</TD>163
</TR>164
<TR>165
<TD><asp:label id="lblPageCount" runat="server"></asp:label><asp:label id="lblCurrentIndex" runat="server" Width="104px"></asp:label><asp:linkbutton id="btnFirst" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"166
CommandArgument="0" ForeColor="navy"></asp:linkbutton><asp:linkbutton id="btnPrev" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"167
CommandArgument="prev" ForeColor="navy"></asp:linkbutton><asp:linkbutton id="btnNext" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"168
CommandArgument="next" ForeColor="navy"></asp:linkbutton><asp:linkbutton id="btnLast" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt"169
CommandArgument="last" ForeColor="navy"></asp:linkbutton><asp:label id="Label1" runat="server">跳转：</asp:label><asp:textbox id="go" Width="20px" BorderColor="#9999FF" BorderWidth="1px" BackColor="White" AutoPostBack="True"170
OnTextChanged="goClick" Runat="server"></asp:textbox></TD>171
</TR>172
</TABLE>173
</FONT>174
</P>175