Gridview使用CheckBox全选与单选 Version 2

在前一版本中，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;        }    }}

Insus.NET.Soup

为刚才写好的对象，填充数据：

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

View Code

在站点中，创建一个网页，并拉一个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>

View Code

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

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


下面是Row的CheckBox单选脚本：