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, 演示之前,先准备演示数据与环境。
首先写好一个对象:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; } } }
为刚才写好的对象,填充数据:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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控件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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控件绑定数据:
在.aspx的GridView控件中,不管是在Header还是Row的CheckBox,均有一个Javascript的方法。接下来,我们完成Javascript脚本:
下面是Head CheckBox:
下面是Row的CheckBox单选脚本:
写好了,运行看看: