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单选脚本:



写好了,运行看看:


posted @   Insus.NET  阅读(1919)  评论(2编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
点击右上角即可分享
微信分享提示