标题:扩展GridView实现多选、选择行、选中变色等 -

无恨星晨

浏览: 31769 次
性别:
来自: 石家庄

最近访客更多访客>>

123456lllppp

jiangzhongwei_66

13871754375

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (23)

社区版块

存档分类

标题:扩展GridView实现多选、选择行、选中变色等

脚本 ASP.net ASP 应用服务器 JavaScript

正文:
本文适合asp.net初学者阅读，高手达人可以无视。
主要功能：
a.隔行色（颜色可自定义）
b.点击行任意位置选择行
c.点击已选中行任意位置取消选择
d.选中行变色（颜色可自定义）
e.多选全选功能
f.添加双击响应事件
GridView控件功能非常强大，但在具体应用中很多时候无法满足特殊需求。例如我前段时间做自己网站(网站制作学习吧www.web2bar.cn)。在编写后台管理版块期间。由于是文章站，列表页面会比较多。每个列表显示基本一样，功能包括：单击选择一行；单击已经选择的行实现取消选择；被选中的行变色（颜色可以设置）；双击可以实现服务器事件处理。如果每个列表都一一去编写，当然也可以达到目的。但像我这样的懒人就想着去网上找个现成的控件拖拉一下最好。不过找了很多，也下载了很多，都不太合意。不是达不到要求就是功能太过强大界面太过复杂。最后只能硬着头皮自己扩展一个了。
首先新建一个类WebBarGridView(名字随意)并继承自GridView。
public class WebBarGridView : GridView
什么？你说为什么要继续GridView。因为我们要扩展它，添加我们自己想要的新功能。当然你也可以直接继承Control。
接下来为类定义几个公开属性和几个私有变量,代码如下：
复制内容到剪贴板
代码:
private HtmlInputCheckBox cb;      //各行前面的多选框
        private Button HideButton = new Button();//隐藏按钮用于引发事件，后面会说到
[Browsable(true)]
        [Category("Appearance")]
        [Description("隔行背景色(单号行的背景)")]
        public Color SingleBackGroundColor
        {
            get
            {
                return ViewState["SingleBackGroundColor"] != null ? (Color)ViewState["SingleBackGroundColor"] : Color.Empty;
            }
            set
            {
                ViewState["SingleBackGroundColor"] = value;
            }
        }
        [Browsable(true)]
        [Category("Appearance")]
        [Description("隔行背景色(双号行的背景)")]
        public Color DoubleBackGroundColor
        {
            get
            {
                return ViewState["DoubleBackGroundColor"] != null ? (Color)ViewState["DoubleBackGroundColor"] : Color.Empty;
            }
            set
            {
                ViewState["DoubleBackGroundColor"] = value;
            }
        }
        [Browsable(true)]
        [Category("Appearance")]
        [Description("选中行背景色")]
        public Color ClickBackGroundColor
        {
            get
            {
                return ViewState["ClickBackGroundColor"] != null ? (Color)ViewState["ClickBackGroundColor"] : Color.Empty;
            }
            set
            {
                ViewState["ClickBackGroundColor"] = value;
            }
        }
这里我们用ViewState保存值是为了回发时值还在（保持状态）。属性的做用在Description中都已经说明，这里就不再重复了。
接下来就是各个功能的具体实现了，在实现这些功能之前先初始化GridView并添加全选模板列：
复制内容到剪贴板
代码:
protected override void OnInit(EventArgs e)
        {
            this.HideButton.Click += new EventHandler(this.OnClick);
            TemplateField gc = new TemplateField();
            gc.HeaderText = "<input type='checkbox' id='cbAll' onclick='checkAll(this.form);' />全选";
            this.Columns.Insert(0, gc);
            base.OnInit(e);
        }
好了，现在开始实现具体的功能
一．现在先来看隔行背景色的实现。这里我们重写OnRowDataBound方法代码如下：
复制内容到剪贴板
代码:
protected override void OnRowDataBound(GridViewRowEventArgs e)
        {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    if (e.Row.RowIndex != -1)
                    {
                        if (e.Row.RowIndex % 2 == 0) { e.Row.BackColor = this.SingleBackGroundColor; } else { e.Row.BackColor = this.DoubleBackGroundColor; }
                    }
                }
            base.OnRowDataBound(e);
        }
主要代码：if (e.Row.RowIndex % 2 == 0) { e.Row.BackColor = this.SingleBackGroundColor; } else { e.Row.BackColor = this.DoubleBackGroundColor; }。单行双行设置不同的背景色。this.SingleBackGroundColor和this.DoubleBackGroundColor就是前面定义的属性。
二．点击行任意位置选择行并改变背景色，点击已选行取消选择
思路：在行上添加单击事件触发Javascrip函数（函数功能：改变行背景色，改变行前面复选框选择状态）
思路有了，就可以开始写程序了。因为要用到Javascript，所以先把script导出。这里我选择重写OnPreRender方法导出所有要用到的脚本.代码如下：
复制内容到剪贴板
代码:
protected override void OnPreRender(EventArgs e)
        {
            this.CreateSelectedRowItems();
            string js = @"<script type='text/javascript'>
                          function checkOne(checkBoxId,row,rowIndex)
                          {
                            if(document.getElementById(checkBoxId)==null){return;}
                            if(document.getElementById(checkBoxId).checked==true)
                            {
                                document.getElementById(checkBoxId).checked=false;
                                if(rowIndex=='1')
                                {
                                    row.style.backgroundColor='" + ColorTranslator.ToHtml(DoubleBackGroundColor) + @"';
                                }
                                else
                                {
                                    row.style.backgroundColor='" + ColorTranslator.ToHtml(SingleBackGroundColor) + @"';
                                }
                            }
                            else
                            {
                                document.getElementById(checkBoxId).checked=true;
                                row.style.backgroundColor='" + ColorTranslator.ToHtml(ClickBackGroundColor) + @"';
                            }

                          }
                          function checkOneByBoxClick(checkBox,row,rowIndex)
                          {
                            if(checkBox==null){return;}
                            if(checkBox.checked==true)
                            {
                                checkBox.checked=false;

                            }
                            else
                            {
                                checkBox.checked=true;
                            }

                          }
                        function checkAll(form)
                        {
                          for (var i=0;i<form.elements.length;i++)
                          {
                              var e = form.elements[i];
                              if (e.name != 'cbAll')
                              {
                                e.checked = form.cbAll.checked;
                              }
                          }
                        }
                        function dblClick(rowIndex,objHiddenId)
                        {
                          document.getElementById(objHiddenId).value=rowIndex;
                          __doPostBack('" + this.ID + @":HideButton','');
                        }
                        </script>";
            this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientScript", js);
            base.OnPreRender(e);
        }
下面是CreateSelectedRowItems（）方法代码，这个方法作用是给控件加入双击事件要用到的隐藏按钮和隐藏值域。
复制内容到剪贴板
代码:
protected void CreateSelectedRowItems()
        {
            if (this.Rows.Count > 0)
            {
                HtmlInputHidden hdSelectedRowId = (HtmlInputHidden)this.FindControl("hdSelectedRowId");
                if (hdSelectedRowId == null)
                {
                    hdSelectedRowId = new HtmlInputHidden();
                    hdSelectedRowId.ID = "hdSelectedRowId";
                    this.Controls.Add(hdSelectedRowId);
                }
                if (((Button)this.FindControl("HideButton")) == null)
                {
                    this.HideButton.ID = "HideButton";
                    this.HideButton.Width = 0;
                    this.Controls.Add(this.HideButton);
                }
            }
        }
现在脚本已经全部导出了，再给各行前面加上一个复选框并为该复选框加上单击触发选择功能的脚本：
复制内容到剪贴板
代码:
protected override void OnRowCreated(GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                cb = new HtmlInputCheckBox();
                cb.ID = "cb" + e.Row.RowIndex.ToString();
                cb.Value = e.Row.RowIndex.ToString();
                cb.Attributes["onclick"] = "checkOneByBoxClick(this,this.parent,'" + (e.Row.RowIndex % 2).ToString() + "');";
                e.Row.Cells[0].Controls.Add(cb);
            }
            base.OnRowCreated(e);
        }
脚本和选择框都已经加好了，接下来要做的事就是在行上加单击触发刚才导出的脚本。还记得前面重写的OnRowDataBound方法来改变单双行色不同吧。现在我们要在这个方法里加入单击触发脚本：
e.Row.Attributes["onclick"] = "checkOne('" + e.Row.ClientID.ToString() + "_cb" + e.Row.RowIndex.ToString() + "',this,'" + (e.Row.RowIndex % 2).ToString() + "');";
这句代码功能就是调用脚本的一个函数并传给单前行的值。这样脚本就可以选中这一行了。
到现在为止，我们已经基本实现了
a.隔行色（颜色可自定义）
b.点击行任意位置选择行
c.点击已选中行任意位置取消选择
d.选中行变色（颜色可自定义）
e.多选全选功能
还剩下双击事件功能。这里我们还是在OnRowDataBound添加代码：
e.Row.Attributes["ondblclick"] = "dblClick('" + e.Row.RowIndex.ToString() + "','" + this.ClientID + "_hdSelectedRowId')";
这行代码功能是触发了隐藏按钮的回发事件。因为我们在OnInIt中已经添加了隐藏按钮的响应事件，这样我们就可以实现双击一行响应服务器事件功能
this.HideButton.Click += new EventHandler(this.OnClick);

到现在为止所有功能基本已经实现，但当我们多选行或双击行时。怎么才能知道选择或双击的行号呢。
先看返回多选行号的自定义公开方法：
复制内容到剪贴板
代码:
public string[] SelectRows()
        {
            string selectIndex = "";
            foreach (GridViewRow row in this.Rows)
            {
                if (row.RowType == DataControlRowType.DataRow)
                {
                    HtmlInputCheckBox cb = (HtmlInputCheckBox)row.Cells[0].FindControl("cb" + row.RowIndex.ToString());
                    if (cb == null) continue;
                    if (cb.Checked)
                    {
                        selectIndex += "," + cb.Value;
                    }
                }
            }
            if (selectIndex!="") { selectIndex = selectIndex.Substring(1); } else { return null; }
            string[] re = selectIndex.Split(char.Parse(","));
            return re;
        }
再就是双击一行时的行号的属性：
复制内容到剪贴板
代码:
[Description("双击事件后取出该行的行号")]
        public int SelectRowIndex
        {
            get
            {
                int index = -1;
                try
                {
                    HtmlInputHidden hidden = (HtmlInputHidden)this.FindControl("hdSelectedRowId");
                    index = int.Parse(hidden.Value);
                }
                catch
                {
                    index = -1;
                }
                return index;
            }
            set
            {
                try
                {
                    HtmlInputHidden hidden = (HtmlInputHidden)this.FindControl("hdSelectedRowId");
                    hidden.Value = value.ToString();
                }
                catch
                {
                    base.SelectedIndex = value;
                }
            }
        }

分享到：