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
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