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

实现功能: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&nbsp;&nbsp;&nbsp;
 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            页&nbsp;&nbsp;&nbsp; 当前在第<asp:Label ID="Label5" runat="server" 
 54                style="font-weight: 700; color: #993333; font-size: large"></asp:Label>
 55            页&nbsp;&nbsp;&nbsp; </td>
 56        <td align="right" valign="top">
 57            跳转到第<asp:TextBox ID="TextBox3" runat="server" 
 58                Width="30px"></asp:TextBox>
 59            页&nbsp; 
 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                    &nbsp;</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                                        &nbsp;</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                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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                                        &nbsp;</td>
124                                </tr>
125                                <tr>
126                                    <td class="">
127                                        &nbsp;</td>
128                                    <td>
129                                        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="更新" />
130                                        &nbsp;&nbsp;&nbsp;&nbsp;
131                                        <asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="取消" />
132                                    </td>
133                                    <td>
134                                        &nbsp;</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                                        &nbsp;</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                                        &nbsp;</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                                        &nbsp;</td>
186                                </tr>
187                                <tr>
188                                    <td class="style11" >
189                                        &nbsp;</td>
190                                    <td >
191                                        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="编辑" />
192                                    </td>
193                                    <td colspan="2">
194                                        &nbsp;</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                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 详细新闻</td>
205                                </tr>
206                            </table>
207                        </HeaderTemplate>
208                        <EditRowStyle BackColor="#2461BF" />
209                    </asp:FormView>
210                </td>
211                <td>
212                    &nbsp;</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 }






posted @ 2009-07-25 16:32  林田惠  阅读(1026)  评论(0编辑  收藏  举报


.
    ;  `┣━┒ ; `.┣─┒`   . .   ;   `.        
   .┟━┃┍╄┓┟━│ ╃━  `     、.    
` ┝─┃┣╈┤┣━┃;/ ╈ ╰⌒ˋのˊ  
 . ┗━┘┗┸┛└━┛/┃┻ `.   ′ ˋ `