22
2013
05

Gridview使用CheckBox全选与单选

在前一版本中,Insus.NET已经实现GridView头中放置CheckBox,可以对Gridview的行进行全选或是全取消的操作。

http://www.cnblogs.com/insus/archive/2013/01/20/2868532.html

更早前一版:

http://www.cnblogs.com/insus/articles/1411613.html

此次版本,主要是实现Gridview的Header的CheckBox 选择的效果。 如果所有记录行非选择时,改变此CheckBox的效果。

OK, 演示之前,先准备演示数据与环境。

首先写好一个对象:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

/// <summary>

/// Summary description for Soup

/// </summary>

namespace Insus.NET

{

   public class Soup

   {

       private string _Area;

       private string _Country;

       private string _SoupName;


       public string Area

       {

           get { return _Area; }

           set { _Area = value; }

       }

       public string Country

       {

           get { return _Country; }

           set { _Country = value; }

       }

       public string SoupName

       {

           get { return _SoupName; }

           set { _SoupName = value; }

       }

       public Soup()

       {

           //

           // TODO: Add constructor logic here

           //

       }

       public Soup(string area, string country, string soupName)

       {

           this._Area = area;

           this._Country = country;

           this._SoupName = soupName;

       }

   }

}

为刚才写好的对象,填充数据:

public List<Soup> GetAllData()

   {

       List<Soup> s = new List<Soup>();

       s.Add(new Soup("亚洲", "中国", "杏香红枣鸡腿汤"));

       s.Add(new Soup("亚洲", "中国", "老火汤"));

       s.Add(new Soup("亚洲", "中国", "当归汤"));

       s.Add(new Soup("亚洲", "泰国", "冬荫功汤"));

       s.Add(new Soup("亚洲", "印度", "咖喱肉汤"));

       s.Add(new Soup("亚洲", "中国", "佛跳墙"));

       s.Add(new Soup("亚洲", "日本", "味噌汤"));      

       s.Add(new Soup("美洲", "美国", "周打蚬汤"));

       s.Add(new Soup("欧洲", "法国", "马赛鱼汤"));

       s.Add(new Soup("欧洲", "西班牙", "西班牙冷汤"));

       s.Add(new Soup("欧洲", "俄国", "罗宋汤"));

       return s;

   }

在站点中,创建一个网页,并拉一个Gridview控件至网页中(这操作你懂的),然后改写一下这个GridVeiw控件:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

               <Columns>

                   <asp:TemplateField>

                       <HeaderTemplate>

                           <asp:CheckBox ID="CheckBox1" runat="server" ToolTip="全选" onclick="SelectedAll(this);" />

                       </HeaderTemplate>

                       <ItemTemplate>

                           <asp:CheckBox ID="CheckBox2" runat="server" onclick="SelectedSingle(this);" />

                       </ItemTemplate>

                   </asp:TemplateField>

                   <asp:TemplateField>

                       <HeaderTemplate>

                           Area

                       </HeaderTemplate>

                       <ItemTemplate>

                           <%# Eval("Area") %>

                       </ItemTemplate>

                   </asp:TemplateField>

                   <asp:TemplateField>

                       <HeaderTemplate>

                           Country

                       </HeaderTemplate>

                       <ItemTemplate>

                           <%# Eval("Country") %>

                       </ItemTemplate>

                   </asp:TemplateField>

                   <asp:TemplateField>

                       <HeaderTemplate>

                           Soup Name

                       </HeaderTemplate>

                       <ItemTemplate>

                           <%# Eval("SoupName") %>

                       </ItemTemplate>

                   </asp:TemplateField>

               </Columns>

           </asp:GridView>

去.aspx.cs为GridView控件绑定数据:

image

在.aspx的GridView控件中,不管是在Header还是Row的CheckBox,均有一个Javascript的方法。接下来,我们完成Javascript脚本:
下面是Head CheckBox:



下面是Row的CheckBox单选脚本:



写好了,运行看看:

来源:http://www.cnblogs.com/insus/archive/2013/05/22/3093114.html

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。