继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Gridview使用CheckBox全选与单选

ajax快速入门培训基础
关注TA
已关注
手记 284
粉丝 176
获赞 719

Insus.NET对Gridview使用CheckBox单选与全选功能再次进行简单演示,选中的行,使用高亮显示,让用户一目了然看到哪一行被选择了。本例中,使用前端脚本Javascript来实现。还是先看看Insus.NET做出来的效果:

 

Insus.NET原本是从数据库获取数据并绑定至GridView控件的,为了在学asp.net的网友,也能轻易操作,因此这个想法,采用对象存储数据。

首先创建一个对象,[对联]的对象:

Couplets.cs

using System;using System.Collections.Generic;using System.Linq;using System.Web;/// <summary>/// Summary description for Couplets/// </summary>namespace Insus.NET{    public class Couplets    {        private int _ID;        private string _Type;        private string _Content;        public int ID        {            get { return _ID; }            set { _ID = value; }        }        public string Type        {            get { return _Type; }            set { _Type = value; }        }        public string Content        {            get { return _Content; }            set { _Content = value; }        }                public Couplets()        {            //            // TODO: Add constructor logic here            //        }        public Couplets(int id, string type, string content)        {            this._ID = id;            this._Type = type;            this._Content = content;                }    }}

 

对象准备好,它是的空的对象,所以还得为刚才创建好的对象,填充数据,让它成为真正的实体。

View Code

public List<Couplets> GetData()    {        List<Couplets> couplets = new List<Couplets>();        Couplets c = new Couplets(1, "四字联", "一元复始;万象更新。");        couplets.Add(c);        c = new Couplets(2, "四字联", "风调雨顺;国盛人和。");        couplets.Add(c);        c = new Couplets(3, "四字联", "风调雨顺;国盛人和。");        couplets.Add(c);        c = new Couplets(4, "五字联", "金蛇含瑞草;紫燕报新春。");        couplets.Add(c);        c = new Couplets(5, "五字联", "龙年留胜绩;蛇岁展宏猷。");        couplets.Add(c);        c = new Couplets(6, "七字联", "壬辰传捷龙辞旧;癸巳报春蛇迎新。");        couplets.Add(c);        c = new Couplets(7, "七字联", "山高水远人增志;蛇接龙年地满春。");        couplets.Add(c);        c = new Couplets(8, "七字联", "小龙起舞神州地;祖国腾飞大治年。");        couplets.Add(c);        c = new Couplets(9, "七字联", "金山水漫双蛇舞;绿野春归百鸟鸣。");        couplets.Add(c);        return couplets;    }


在Default.aspx网页上拉一个GridView控件。

View Code

 <asp:GridView ID="GridViewCouplets" 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>                            ID                        </HeaderTemplate>                        <ItemStyle HorizontalAlign="Right" />                        <ItemTemplate>                            <%# Eval("ID") %>                        </ItemTemplate>                    </asp:TemplateField>                    <asp:TemplateField>                        <HeaderTemplate>                            Type                        </HeaderTemplate>                        <ItemTemplate>                            <%# Eval("Type") %>                        </ItemTemplate>                    </asp:TemplateField>                    <asp:TemplateField>                        <HeaderTemplate>                            Content                        </HeaderTemplate>                        <ItemTemplate>                            <%# Eval("Content") %>                        </ItemTemplate>                    </asp:TemplateField>                </Columns>            </asp:GridView>


接下来,还得通过Default.aspx.cs页面为GridView绑定数据。

View Code

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using Insus.NET;public partial class _Default : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {        if (!IsPostBack)            Data_Binding();    }    private void Data_Binding()    {        this.GridViewCouplets.DataSource = GetData();        this.GridViewCouplets.DataBind();    }}


在上面的html代码中,可以看有两个CheckBhox,一个是放在GridView的HeaderTemplate模版上为了全选,另一个是放在ItemTemplate模版上为了单选。

 

每一个CheckBox都有一个OnClick事件,可参考如下Javascript代码:

View Code

<script type="text/javascript">        function SelectedAll(cb) {            cb.checked = cb.checked ? false : true;            var gv = document.getElementById('<%=GridViewCouplets.ClientID %>');            var rc = gv.rows.length;            for (var i = 1; i < rc; i++) {                var input = gv.rows[i].cells[0].getElementsByTagName("input");                if (input[0].type == "checkbox" && input[0].checked) {                    input[0].checked = false;                    gv.rows[i].style.backgroundColor = "";                }                else {                    input[0].checked = true;                    gv.rows[i].style.backgroundColor = "#66ff33;";                }            }        }        function SelectedSingle(cb) {            var row = cb.parentNode.parentNode;            if (cb.checked) {                row.style.backgroundColor = "#66ff33;";            }            else {                row.style.backgroundColor = "";            }        }    </script>

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP