实现GridView控件的多项功能：改变背景色、和FormView控件同步、隐藏指定列、添加删除确认、跳转到指定页。。[原创]...

最新推荐文章于 2022-09-18 15:42:48 发布

asd1037166103

最新推荐文章于 2022-09-18 15:42:48 发布

阅读量255

点赞数

文章标签： ui 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/LinderMan/archive/2009/07/25/1530930.html

版权

实现功能：1.改变GridView鼠标所在行背景色
                  2.和FormViewK控件实现同步显示
                  3.点击checkbox实现隐藏指定列
                  4.添加确认删除对话框
                  5.实现跳转到指定页

实现效果：

HTML代码：

  1<body>
  2    <form id="form1" runat="server">
  3    <div>
  4
  5        <table style="width: 1181px; ">
  6            <tr>
  7                <td class="style4">
  8                </td>
  9                <td class="style7" atomicselection="True">
10                    <table style="width: 65%;">
11                        <tr>
12                            <td>
13                    <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
14                        AllowSorting="True" Width="656px" AutoGenerateColumns="False" DataKeyNames="news_id"
15                        onpageindexchanged="GridView1_PageIndexChanged"
16                        onpageindexchanging="GridView1_PageIndexChanging"
17                        onselectedindexchanged="GridView1_SelectedIndexChanged" PageSize="8"
18                        onrowdatabound="GridView1_RowDataBound" Height="219px" onrowcancelingedit="GridView1_RowCancelingEdit"
19                        onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing"
20                        onrowupdating="GridView1_RowUpdating" AutoGenerateSelectButton="True"
21                                    onsorting="GridView1_Sorting" AutoGenerateEditButton="True">
22                        <Columns>
23                            <asp:BoundField DataField="title" HeaderText="新闻标题" SortExpression="title" />
24                            <asp:BoundField DataField="checkNum" HeaderText="点击量"
25                                SortExpression="checkNum" />
26                            <asp:CommandField HeaderText="编辑" ShowEditButton="True" />
27                            <asp:CommandField HeaderText="删除" ShowDeleteButton="True" />
28                        </Columns>
29                        <PagerSettings FirstPageText="[第一页]" LastPageText="[最后一页]"
30                            Mode="NextPreviousFirstLast" NextPageText="[下一页]" Position="TopAndBottom"
31                            PreviousPageText="[上一页]" />
32                        <RowStyle ForeColor="#000066" />
33                        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
34                        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
35                        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
36
37                    </asp:GridView>
38                            </td>
39                        </tr>
40                        <tr>
41                            <td>
42                                <table style="width:100%;">
43    <tr>
44        <td valign="top">
45            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True"
46                Font-Size="Small" oncheckedchanged="CheckBox1_CheckedChanged" Text="隐藏点击量"
47                ToolTip="隐藏或显示点击量" />
48   
49            </td>
50        <td align="right" class="style12" valign="top">
51            共<asp:Label ID="Label4" runat="server" Font-Size="Large"
52                ForeColor="#660033" style="font-weight: 700"></asp:Label>
53            页    当前在第<asp:Label ID="Label5" runat="server"
54                style="font-weight: 700; color: #993333; font-size: large"></asp:Label>
55            页    </td>
56        <td align="right" valign="top">
57            跳转到第<asp:TextBox ID="TextBox3" runat="server"
58                Width="30px"></asp:TextBox>
59            页 
60            <asp:Button ID="Button4" runat="server" Text="跳转" onclick="Button4_Click" />
61        </td>
62    </tr>
63</table>
64                            </td>
65                        </tr>
66                        <tr>
67                            <td>
68                    <hr />
69                            </td>
70                        </tr>
71                    </table>
72                </td>
73                <td class="style2">
74                </td>
75            </tr>
76            <tr>
77                <td class="style5">
78                     </td>
79                <td class="style8" atomicselection="True">
80                    <asp:FormView ID="FormView1" runat="server" AllowPaging="True" CellPadding="4"
81                        ForeColor="#333333" Width="669px" BorderColor="#0066FF"
82                        BorderStyle="Solid" BorderWidth="1px" onpageindexchanged="DoNothing"
83                        onpageindexchanging="DoNothing">
84                        <PagerSettings Visible="False" />
85                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
86                        <RowStyle BackColor="#EFF3FB" />
87                        <EditItemTemplate>
88                            <table style="width:100%; height: 124px;">
89                                <tr>
90                                    <td  >
91                                        新闻标题：</td>
92                                    <td>
93                                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("title") %>'
94                                            Width="344px" AutoPostBack="True"></asp:TextBox>
95                                    </td>
96                                    <td>
97                                         </td>
98                                </tr>
99                                <tr>
100                                    <td class="style13">
101                                        新闻图片：</td>
102                                    <td class="style13" valign="bottom">
103                                        <asp:Image ID="Image1" runat="server" Height="149px"
104                                            ImageUrl='<%# Eval("pic") %>' Width="204px" />
105                                        <br />
106                                        <asp:FileUpload ID="FileUpload1" runat="server" Height="24px" Width="200px" />
107                                             
108                                        <asp:Button ID="Button5" runat="server" Height="20px" onclick="Button5_Click"
109                                            Text="上传图片" Width="67px" />
110                                    </td>
111                                    <td class="style13">
112                                        </td>
113                                </tr>
114                                <tr>
115                                    <td class="">
116                                        新闻详情：</td>
117                                    <td>
118                                        <asp:TextBox ID="TextBox2" runat="server" Height="144px"
119                                            Text='<%# Eval("content") %>' TextMode="MultiLine" Width="342px"
120                                            AutoPostBack="True"></asp:TextBox>
121                                    </td>
122                                    <td>
123                                         </td>
124                                </tr>
125                                <tr>
126                                    <td class="">
127                                         </td>
128                                    <td>
129                                        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="更新" />
130                                            
131                                        <asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="取消" />
132                                    </td>
133                                    <td>
134                                         </td>
135                                </tr>
136
137                            </table>
138                        </EditItemTemplate>
139                        <PagerTemplate>
140                            <hr style="height: -12px" />
141                        </PagerTemplate>
142                        <ItemTemplate>
143                            <table align="left" style="width: 578px">
144                                <tr>
145                                    <td class="style11" >
146                                        新闻标题：</td>
147                                    <td  valign="top">
148                                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'
149                                            style="font-weight: 700"></asp:Label>
150                                    </td>
151                                    <td class="style10">
152                                        <b>点击量：</b></td>
153                                    <td >
154                                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("checkNum") %>'
155                                            ForeColor="#CC0000" style="font-weight: 700"></asp:Label>
156                                    </td>
157                                </tr>
158                                <tr>
159                                    <td class="style11" >
160                                         </td>
161                                    <td >
162                                        <asp:Image ID="Image2" runat="server" Height="169px"
163                                            ImageUrl='<%# Eval("pic") %>' Width="265px"   />
164                                    </td>
165                                    <td  colspan="2" width="60">
166                                         </td>
167                                </tr>
168                                <tr>
169                                    <td class="style11" >
170                                    </td>
171                                    <td >
172                                        <hr style="height: -12px" />
173                                    </td>
174                                    <td >
175                                    </td>
176                                </tr>
177                                <tr>
178                                    <td  valign="top" class="style11">
179                                        <b>正文：</b></td>
180                                    <td>
181                                        <asp:Label ID="Label3" runat="server" Height="114px"
182                                            Text='<%# Eval("content") %>' Width="319px"></asp:Label>
183                                    </td>
184                                    <td colspan="2">
185                                         </td>
186                                </tr>
187                                <tr>
188                                    <td class="style11" >
189                                         </td>
190                                    <td >
191                                        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="编辑" />
192                                    </td>
193                                    <td colspan="2">
194                                         </td>
195                                </tr>
196                            </table>
197                        </ItemTemplate>
198                        <PagerStyle BackColor="#006699" ForeColor="White" HorizontalAlign="Center" />
199                        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
200                        <HeaderTemplate>
201                            <table style="width: 100%; height: 10px;">
202                                <tr>
203                                    <td align="center" class="style10">
204                                                                                        详细新闻</td>
205                                </tr>
206                            </table>
207                        </HeaderTemplate>
208                        <EditRowStyle BackColor="#2461BF" />
209                    </asp:FormView>
210                </td>
211                <td>
212                     </td>
213            </tr>
214        </table>
215
216    </div>
217    </form>
218</body>

后台代码：

  1 using System;
  2 using System.Collections;
  3 using System.Configuration;
  4 using System.Data;
  5 using System.Linq;
  6 using System.Web;
  7 using System.Web.Security;
  8 using System.Web.UI;
  9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13 using System.Data.SqlClient;
14
15 //DetailsView 的AllowPaging属性设为true
16
17 namespace WebApplication1
18 {
19     public partial class GridView : System.Web.UI.Page
20     {
21         #region DAL
22         //静态变量
23         static string sqlConn = "Data Source=pc-200907030109\\sqlexpress;Initial Catalog=LINDERMAN;User ID=sa;Password=123456";
24         SqlConnection conn = new SqlConnection(sqlConn);
25
26         protected DataSet CreateDataSet(string sqlStr)   //根据指定字符串生成数据集
27         {
28             SqlDataAdapter sda = new SqlDataAdapter(sqlStr, conn);
29             conn.Open();
30             DataSet ds = new DataSet();
31             sda.Fill(ds);
32             conn.Close();
33             return ds;
34         }
35
36         protected void ExecuteSql(string sqlStr)      //执行指定SQL语句
37         {
38             SqlCommand comm = new SqlCommand(sqlStr, conn);
39             conn.Open();
40             comm.ExecuteNonQuery();
41             conn.Close();
42         }
43         #endregion DAL
44
45
46         protected void Page_Load(object sender, EventArgs e)
47         {
48             if (!IsPostBack)
49             {
50                 //默认排序列为数据库中的checkNum列，升序排序
51                 ViewState["SortOrder"] = "checkNum"; //必须在绑定数据前定义
52                 ViewState["OrderDire"] = "DESC";
53                 ViewState["news_id"] = FormView1.PageIndex.ToString();
54             }
55
56             DataBindToGridView();
57             DataBindToFormView();
58         }
59
60
61
62         protected void DataBindToGridView()
63         {
64             string SqlStr = "select * from news";
65             DataSet ds = CreateDataSet(SqlStr);
66
67             DataView view = ds.Tables[0].DefaultView;   //实现双向排序的代码
68             string sort = ViewState["SortOrder"].ToString() + " " + ViewState["OrderDire"].ToString();
69             view.Sort = sort;
70
71             this.GridView1.DataSource = view;
72             this.GridView1.DataBind();
73
74             this.Label4.Text = this.GridView1.PageCount.ToString(); //共有多少页
75             this.Label5.Text = (GridView1.PageIndex + 1).ToString();  //当前在第几页
76         }
77
78         protected void DataBindToFormView()
79         {
80             string SqlStr = "select * from news";
81             DataSet ds = CreateDataSet(SqlStr);
82             DataView view = ds.Tables[0].DefaultView;   //实现双向排序的代码
83             string sort = ViewState["SortOrder"].ToString() + " " + ViewState["OrderDire"].ToString();
84             view.Sort = sort;
85
86             this.FormView1.DataSource = view;
87
88             this.FormView1.DataBind();
89         }
90
91
92         protected void GridView_Select(object sender, EventArgs e)
93         {
94             this.FormView1.PageIndex = this.GridView1.SelectedIndex;
95         }
96
97
98         protected void GridView1_PageIndexChanged(object sender, EventArgs e)
99         {
100             this.Label5.Text = (GridView1.PageIndex + 1).ToString();  //当前在第几页
101         }
102
103         protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
104         {
105             GridView1.PageIndex = e.NewPageIndex;//实现分页
106
107             DataBindToGridView();//否则分页按钮点两下才有反应
108
109             DataBindToFormView();
110         }
111
112
113
114         protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
115         {
116             int i;
117             //执行循环，保证每条数据都可以更新
118             for (i = -1; i < GridView1.Rows.Count; i++)
119             {
120                 //首先判断是否是数据行
121                 if (e.Row.RowType == DataControlRowType.DataRow)//当鼠标停留时更改背景色
122                 {
123                     e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");//当鼠标移开时还原背景色
124                     e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
125                     //为删除按钮添加确认框
126                     if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)  //避免冲突
127                     {
128                         ((LinkButton)e.Row.Cells[4].Controls[0]).Attributes.Add("onclick", "javascript:return confirm('你确认要删除：\"" + e.Row.Cells[0].Text + "\"吗?')");
129                     }
130                 }
131             }
132         }
133
134
135         protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
136         {
137             GridView1.EditIndex = e.NewEditIndex;
138             this.DataBindToGridView();
139         }
140
141
142         protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
143         {
144             string SqlStr = "delete from news where news_id=" + GridView1.DataKeys[e.RowIndex].Value.ToString();
145             ExecuteSql(SqlStr);
146
147             this.DataBindToGridView();
148             DataBindToFormView();
149         }
150
151
152         protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
153         {
154             string sqlstr = "update news set title='";
155             sqlstr += ((TextBox)(GridView1.Rows[e.RowIndex].Cells[1].Controls[0])).Text.ToString().Trim() + "',checkNum='";
156             sqlstr += ((TextBox)(GridView1.Rows[e.RowIndex].Cells[2].Controls[0])).Text.ToString().Trim() + "' where news_id='";
157             sqlstr += GridView1.DataKeys[e.RowIndex].Value.ToString() + "'";
158
159             ExecuteSql(sqlstr);
160
161             GridView1.EditIndex = -1;
162
163             DataBindToGridView();
164             DataBindToFormView();
165
166         }
167
168         protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
169         {
170             GridView1.EditIndex = -1;
171             this.DataBindToGridView();
172         }
173
174         protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
175         {
176             FormView1.PageIndex = GridView1.SelectedIndex + GridView1.PageIndex * GridView1.PageSize; //当GridView翻页后，页面索引值应发生相应变化
177             DataBindToFormView();
178         }
179
180         protected void Button1_Click(object sender, EventArgs e)
181         {
182             this.FormView1.ChangeMode(FormViewMode.Edit);
183             DataBindToFormView(); //否则要点击两次才会切换到编辑模式
184         }
185
186
187         protected void Button3_Click(object sender, EventArgs e)
188         {
189             string gds = ((TextBox)FormView1.FindControl("TextBox1")).Text.ToString().Trim();
190             string gds2 = ((TextBox)FormView1.FindControl("TextBox2")).Text.ToString().Trim();
191         }
192
193         protected void Button2_Click(object sender, EventArgs e)
194         {
195             ((Button)this.FormView1.FindControl("Button2")).Attributes.Add("onclick", "javascript:return confirm('你确认要更改改新闻的内容吗？')");
196             FileUpload fu = (FileUpload)this.FormView1.FindControl("FileUpload1");
197             string CurrentPath = Request.MapPath("./");
198             fu.SaveAs(CurrentPath + "\\pic\\news (" + ViewState["news_id"].ToString() + ").jpg");
199
200             string sqlstr = "update news set title='";
201             sqlstr += ((TextBox)FormView1.FindControl("TextBox1")).Text.ToString().Trim() + "',content='"; //TextBox的AutoPostBack应设为true
202             sqlstr += ((TextBox)FormView1.FindControl("TextBox2")).Text.ToString().Trim() + "',pic='";
203             sqlstr += "~/pic/news(" + ViewState["news_id"].ToString() + ").jpg' where news_id='";
204             sqlstr += this.FormView1.PageIndex.ToString() + "'";
205
206             ExecuteSql(sqlstr);
207             this.FormView1.ChangeMode(FormViewMode.ReadOnly);    //更新后提交
208             DataBindToFormView();
209         }
210
211
212         protected void Button4_Click(object sender, EventArgs e)
213         {
214             int i = Convert.ToInt32(this.TextBox3.Text);
215             this.GridView1.PageIndex = i - 1;  //i-1,而不是i
216             DataBindToGridView();
217         }
218
219         protected void GridView1_Sorting(object sender, GridViewSortEventArgs e) //实现正反双向排序
220         {
221             string sPage = e.SortExpression;
222             if (ViewState["SortOrder"].ToString() == sPage)
223             {
224                 if (ViewState["OrderDire"].ToString() == "Desc")
225                     ViewState["OrderDire"] = "ASC";
226                 else
227                     ViewState["OrderDire"] = "Desc";
228             }
229             else
230             {
231                 ViewState["SortOrder"] = e.SortExpression;
232             }
233             DataBindToGridView();
234             DataBindToFormView();
235
236         }
237
238
239         #region DoNothing
240         protected void DoNothing(object sender, FormViewPageEventArgs e)
241         {
242
243         }
244
245         protected void DoNothing(object sender, EventArgs e)
246         {
247
248         }
249         #endregion DoNothing
250
251
252         //实现用CheckBox来控制列的隐藏或显示
253         protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
254         {
255             GridView1.Columns[1].Visible = !GridView1.Columns[1].Visible; //自动生成的"选择"列没有包括在索引内
256             Response.Write("GridView1的第4列现在的显示隐藏状态是：" + GridView1.Columns[1].Visible.ToString());
257             DataBindToFormView();
258             DataBindToGridView();
259         }
260
261         //上传新闻图片，并立刻绑定倒图像控件
262         protected void Button5_Click(object sender, EventArgs e)
263         {
264             FileUpload fu = (FileUpload)this.FormView1.FindControl("FileUpload1");
265             Image im = (Image)this.FormView1.FindControl("Image1");
266
267             if (fu.HasFile)
268                 try
269                 {
270                     im.ImageUrl = "";
271
272                     string CurrentPath = Request.MapPath("./");
273
274                     //fu.SaveAs(CurrentPath + "\\pic\\news (" + ViewState["news_id"].ToString() + ").jpg");
275
276                     im.ImageUrl = "~/pic/news (" + ViewState["news_id"].ToString() + ").jpg";
277
278                     im.DataBind();
279                 }
280                 catch
281                 {
282
283                 }
284         }
285
286
287     }
288 }

转载于:https://www.cnblogs.com/LinderMan/archive/2009/07/25/1530930.html

asd1037166103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现GridView控件的多项功能：改变背景色、和FormView控件同步、隐藏指定列、添加删除确认、跳转到指定页。。[原创]...

实现功能：1.改变GridView鼠标所在行背景色2.和FormViewK控件实现同步显示3.点击checkbox实现隐藏指定列4.添加确认删除对话框5.实现跳转到指定页实现效果：HTML代码：1<body>2&l...
复制链接

扫一扫