首页  >> 控件开发

扩展GridView控件（四）——每行复选框的全选与取消全选

添加人：iyond五级(2332分)   添加时间：2007-03-29    阅读次数：2403  收藏此教程
介绍
平时使用GridView的时候经常要给每行加一个复选框，然后还需要放置一个单独的全选复选框，通过单击它来让这些复选框全选或取消全选，每次实现这样的功能都要写一段javascript，麻烦，所以扩展它。


控件开发
1、新建一个继承自GridView的类。
/// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}

2、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里
using System;
using System.Collections.Generic;
using System.Text;

namespace YYControls.SmartGridView
{
    /// <summary>
    /// javascript
    /// </summary>
    public class JavaScriptConstant
    {
        internal const string jsCheckAll = @"<script type=""text/javascript"">
        //<![CDATA[

        // 隐藏字段的ID，用于存每组的全选复选框ID
        var hdnAllName = '[$AllName$]';
        // 隐藏字段的ID，用于存每的项复选框ID
        var hdnItemName = '[$ItemName$]';
        // 组分隔符，一个 全选复选框 和其对应的n个 项复选框 为一个组
        var groupSeparator = '[$GroupSeparator$]';
        // 项分隔符，项复选框 每个项之间的分隔符
        var itemSeparator = '[$ItemSeparator$]';

        var strAlls = GetObject(hdnAllName).value;
        var strItems = GetObject(hdnItemName).value;

        // 全选复选框数组
        var aryAlls = strAlls.split(groupSeparator);
        // 项复选框数组，每行有一个组的所有项复选框
        var aryItems = strItems.split(groupSeparator);

        // 全选复选框被单击，参数为 该全选复选框这个对象
        function ClickCheckAll(objAll)
        {
            // 每个全选复选框
            for (var i=0; i<aryAlls.length; i++)
            {
                // 该全选复选框是所单击的全选复选框
                if (aryAlls[i] == objAll.id)
                {
                    // 该全选复选框同组下的项复选框数组
                    aryItem = aryItems[i].split(itemSeparator);
                    for (var j=0; j<aryItem.length; j++)
                    {
                        // 单击的全选复选框是选中状态，并且项复选框不是disabled，则选中
                        if (objAll.checked && !GetObject(aryItem[j]).parentElement.disabled)
                        {
                            GetObject(aryItem[j]).checked = true;
                        }
                        // 否则
                        else
                        {
                            GetObject(aryItem[j]).checked = false;
                        }
                    }
                
                    break;
                }
            }
        }

        // 项复选框被单击
        function ClickCheckItem()
        {
            // 每组项复选框
            for (var i=0; i<aryItems.length; i++)
            {
                // 该组的所有项复选框数组
                aryItem = aryItems[i].split(itemSeparator);
                // 标记，是否同组的项复选框都被选中
                var bln = true;
                for (var j=0; j<aryItem.length; j++)
                {
                    // 如果该项复选框没被选中，并且不是disabled，则bln设为false
                    if (!GetObject(aryItem[j]).checked && !GetObject(aryItem[j]).parentElement.disabled)
                    {
                        bln = false;
                        break;
                    }
                }
                
                // bln为true，则设置同组的全选复选框为选中
                if (bln)
                {
                    GetObject(aryAlls[i]).checked = true;
                }
                // 否则
                else
                {
                    GetObject(aryAlls[i]).checked = false;
                }
            }
        }

        function GetObject(param)
        {
            return document.getElementById(param);
        }

        //]]>
        </script>";
    }
}

3、新建一个CheckboxAll类，有两个属性
using System;
using System.Collections.Generic;
using System.Text;

using System.ComponentModel;
using System.Web.UI;

namespace YYControls.SmartGridView
{
    /// <summary>
    /// CheckboxAll 的摘要说明。
    /// </summary>
    [ToolboxItem(false)]
    public class CheckboxAll
    {
        private string _checkboxAllID;
        /// <summary>
        /// 模板列全选复选框ID
        /// </summary>
        public string CheckboxAllID
        {
            get { return _checkboxAllID; }
            set { _checkboxAllID = value; }
        }

        private string _checkboxItemID;
        /// <summary>
        /// 模板列项复选框ID
        /// </summary>
        public string CheckboxItemID
        {
            get { return _checkboxItemID; }
            set { _checkboxItemID = value; }
        }

        /// <summary>
        /// ToString()
        /// </summary>
        /// <returns></returns>
        public override string ToString()
        {
            return "CheckboxAll";
        }
    }
}

4、新建一个继承自CollectionBase的类CheckboxAlls
using System.Collections;
using System.ComponentModel;
using System.Web.UI;

namespace YYControls.SmartGridView
{
    /// <summary>
    /// CheckboxAlls 的摘要说明。
    /// 注意要继承自CollectionBase
    /// </summary>
    [
    ToolboxItem(false),
    ParseChildren(true)
    ]
    public class CheckboxAlls : CollectionBase
    {
        /// <summary>
        /// 构造函数
        /// </summary>
        public CheckboxAlls()
            : base()
        {
        }

        /// <summary>
        /// 实现IList接口
        /// 获取或设置指定索引处的元素。
        /// </summary>
        /// <param name="index">要获得或设置的元素从零开始的索引</param>
        /// <returns></returns>
        public CheckboxAll this[int index]
        {
            get
            {
                return (CheckboxAll)base.List[index];
            }
            set
            {
                base.List[index] = (CheckboxAll)value;
            }
        }

        /// <summary>
        /// 实现IList接口
        /// 将某项添加到 System.Collections.IList 中。
        /// </summary>
        /// <param name="item">要添加到 System.Collections.IList 的 System.Object。</param>
        public void Add(CheckboxAll item)
        {
            base.List.Add(item);
        }

        /// <summary>
        /// 实现IList接口
        /// 从 System.Collections.IList 中移除特定对象的第一个匹配项。
        /// </summary>
        /// <param name="index">要从 System.Collections.IList 移除的 System.Object</param>
        public void Remove(int index)
        {
            if (index > -1 && index < base.Count)
            {
                base.List.RemoveAt(index);
            }
        }
    }
}

5、在继承自GridView的类中加一个复杂对象属性，该复杂对象就是第4步创建的那个CheckboxAlls
        private CheckboxAlls _checkboxAlls;
        /// <summary>
        /// 复选框组集合 一个组由一个 全选复选框 和多个 项复选框组成
        /// </summary>
        [
        PersistenceMode(PersistenceMode.InnerProperty),
        DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
        Description("复选框组集合 一个组由一个 全选复选框 和多个 项复选框组成"),
        Category("扩展")
        ]
        public virtual CheckboxAlls CheckboxAlls
        {
            get
            {
                if (_checkboxAlls == null)
                {
                    _checkboxAlls = new CheckboxAlls();
                }
                return _checkboxAlls;
            }
        }

6、声明一些内部属性
        /// <summary>
        /// 隐藏字段的ID，用于存每组的全选复选框ID
        /// </summary>
        protected string HiddenCheckboxAllID
        {
            get { return "hdn_checkboxAll"; }
        }
        /// <summary>
        /// 隐藏字段的ID，用于存每组的项复选框ID
        /// </summary>
        protected string HiddenCheckboxItemID
        {
            get { return "hdn_checkboxItem"; }
        }

        /// <summary>
        /// 组分隔符，一个 全选复选框 和其对应的n个 项复选框 为一个组
        /// </summary>
        protected char GroupSeparator
        {
            get { return ','; }
        }
        /// <summary>
        /// 项分隔符，项复选框 每个项之间的分隔符
        /// </summary>
        protected char ItemSeparator
        {
            get { return '|'; }
        }

7、声明几个私有变量
        /// <summary>
        /// 用于存每组的全选复选框ID
        /// </summary>
        private string _checkAllIDString;
        /// <summary>
        /// 用于存每的项复选框ID
        /// </summary>
        private string _checkItemIDString;
        /// <summary>
        /// 每行有一个组的所有项复选框
        /// </summary>
        private Dictionary<int, string> _checkItemIDDictionary = new Dictionary<int, string>();

8、重写OnRowDataBound以给我们声明的那些私有变量赋值。
        /// <summary>
        /// OnRowDataBound
        /// </summary>
        /// <param name="e"></param>
        protected override void OnRowDataBound(GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                // GridViewRow的每个TableCell
                for (int i = 0; i < e.Row.Cells.Count; i++)
                {
                    // TableCell里的每个Control
                    for (int j = 0; j < e.Row.Cells[i].Controls.Count; j++)