扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）

/*正式版的实现 开始*/

/*联动复选框 开始*/
var yy_sgv_ccGridView_pre = new Array(); // cs中动态向其灌数据（GridView内控件ID的前缀数组）
var yy_sgv_ccAll_post = new Array(); // cs中动态向其灌数据（全选复选框ID的后缀数组）
var yy_sgv_ccItem_post = new Array(); // cs中动态向其灌数据（项复选框ID的后缀数组）

function yy_sgv_ccCheck(e)    
{
/// <summary>单击复选框时</summary>

        var evt = e || window.event; // FF || IE
        var obj = evt.target || evt.srcElement    // FF || IE

        var ccIndex = -1;
        for (var i=0; i<yy_sgv_ccGridView_pre.length; i++)
        {        
                if (obj.id.yy_sgv_startsWith(yy_sgv_ccGridView_pre[i]))
                {
                        ccIndex = i;
                        break;
                }
        }
        
        if (ccIndex != -1)
        {
                if (obj.id.yy_sgv_endsWith(yy_sgv_ccAll_post[i]))
                {
                        yy_sgv_ccCheckAll(ccIndex, obj.checked);
                }
                else if (obj.id.yy_sgv_endsWith(yy_sgv_ccItem_post[i]))
                {
                        yy_sgv_ccCheckItem(ccIndex);
                }
        }
}

function yy_sgv_ccCheckAll(ccIndex, isCheckAll)
{
/// <summary>设置全选复选框的状态</summary>

        var elements =    document.getElementsByTagName("INPUT");
        
        for (i=0; i< elements.length; i++)    
        {                
                if (elements[i].type == 'checkbox'    
                        && elements[i].id.yy_sgv_startsWith(yy_sgv_ccGridView_pre[ccIndex])    
                        && elements[i].id.yy_sgv_endsWith(yy_sgv_ccItem_post[ccIndex]))    
                {
                        elements[i].checked = isCheckAll;
                        
                        if (yy_sgv_crClassName != '')
                        {
                                yy_sgv_changeCheckedRowCssClass(elements[i], yy_sgv_crClassName, false);
                        }
                }
        }        
}

function yy_sgv_ccCheckItem(ccIndex)
{
/// <summary>单击项复选框时</summary>

        var elements =    document.getElementsByTagName("INPUT");
        
        var checkedNum = 0;
        var uncheckedNum = 0;
        
        for (i=0; i< elements.length; i++)    
        {                
                if (elements[i].type == 'checkbox'    
                        && elements[i].id.yy_sgv_startsWith(yy_sgv_ccGridView_pre[ccIndex])    
                        && elements[i].id.yy_sgv_endsWith(yy_sgv_ccItem_post[ccIndex]))    
                {
                        if (elements[i].checked)
                        {
                                checkedNum++;
                        }
                        else
                        {
                                uncheckedNum++;
                        }
                }
        }
        
        if (uncheckedNum == 0)
        {
                yy_sgv_ccCheckCheckbox(yy_sgv_ccGridView_pre[ccIndex], yy_sgv_ccAll_post[ccIndex], true)
        }
        else
        {
                yy_sgv_ccCheckCheckbox(yy_sgv_ccGridView_pre[ccIndex], yy_sgv_ccAll_post[ccIndex], false)
        }
}

function yy_sgv_ccCheckCheckbox(pre, post, isCheckAll)
{
/// <summary>设置项复选框的状态</summary>

        var elements =    document.getElementsByTagName("INPUT");
        
        for (i=0; i< elements.length; i++)    
        {                
                if (elements[i].type == 'checkbox'
                        && elements[i].id.yy_sgv_startsWith(pre)    
                        && elements[i].id.yy_sgv_endsWith(post))    
                {
                        elements[i].checked = isCheckAll;
                        break;
                }
        }        
}

function yy_sgv_ccListener()
{
/// <summary>监听所有联动复选框的单击事件</summary>

        var elements =    document.getElementsByTagName("INPUT");
        
        for (i=0; i< elements.length; i++)    
        {                
                if (elements[i].type == 'checkbox')    
                {
                        for (j=0; j<yy_sgv_ccGridView_pre.length; j++)
                        {
                                if (elements[i].id.yy_sgv_startsWith(yy_sgv_ccGridView_pre[j])    
                                        && (elements[i].id.yy_sgv_endsWith(yy_sgv_ccAll_post[j]) || elements[i].id.yy_sgv_endsWith(yy_sgv_ccItem_post[j])))
                                {
                                        yy_sgv_addEvent(elements[i], 'click', yy_sgv_ccCheck);    
                                        break;
                                }
                        }
                }
        }        
}
        
if (document.all)
{
        window.attachEvent(' yy_sgv_ccListener)
}
else
{
        window.addEventListener('load', yy_sgv_ccListener, false);
}
/*联动复选框 结束*/

using System;
using System.Collections.Generic;
using System.Text;

using System.Web.UI.WebControls;
using System.Web.UI;

namespace YYControls.SmartGridViewFunction
{
        /// <summary>
        /// 扩展功能：联动复选框（复选框的全选和取消全选）
        /// </summary>
        public class CascadeCheckboxFunction : ExtendFunction
        {
                /// <summary>
                /// 构造函数
                /// </summary>
                public CascadeCheckboxFunction()
                        : base()
                {

                }

                /// <summary>
                /// 构造函数
                /// </summary>
                /// <param name="sgv">SmartGridView对象</param>
                public CascadeCheckboxFunction(SmartGridView sgv)
                        : base(sgv)
                {

                }

                /// <summary>
                /// 扩展功能的实现
                /// </summary>
                protected override void Execute()
                {
                        this._sgv.PreRender += new EventHandler(_sgv_PreRender);
                }

                /// <summary>
                /// SmartGridView的PreRender事件
                /// </summary>
                /// <param name="sender"></param>
                /// <param name="e"></param>
                void _sgv_PreRender(object sender, EventArgs e)
                {
                        // 构造向数组中添加成员的脚本
                        string scriptString = "";
                        foreach (CascadeCheckbox cc in this._sgv.CascadeCheckboxes)
                        {
                                scriptString += String.Format("yy_sgv_ccGridView_pre.push('{0}');", Helper.Common.GetChildControlPrefix(this._sgv));
                                scriptString += String.Format("yy_sgv_ccAll_post.push('{0}');", cc.ParentCheckboxID);
                                scriptString += String.Format("yy_sgv_ccItem_post.push('{0}');", cc.ChildCheckboxID);
                        }

                        // 注册向数组中添加成员的脚本
                        if (!this._sgv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format("yy_sgv_cascadeCheckbox_{0}", this._sgv.ID)))
                        {
                                this._sgv.Page.ClientScript.RegisterClientScriptBlock
                                (
                                        this._sgv.GetType(),
                                        String.Format("yy_sgv_cascadeCheckbox_{0}", this._sgv.ID),
                                        scriptString,
                                        true
                                );
                        }
                }
        }
}

/*正式版的实现 结束*/

/*测试版的实现 开始*/

/// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}

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>";
        }
}

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";
                }
        }
}