擴展GridView控件(4) - 聯動複選框（複選框的全選和取消全選）

GridView既強大又好用。爲了讓它更強大、更好用，咱們來寫一個繼承自GridView的控件。
[索引頁]
[×××]

擴展GridView控件(4) - 聯動複選框（複選框的全選和取消全選）

做者：webabcd

/*正式版的實現 開始*/

介紹
擴展GridView控件：
聯動複選框（複選框的全選和取消全選）。選中指定的父複選框，則設置指定的全部子複選框爲選中狀態；取消選中指定的父複選框，則設置指定的全部子複選框爲取消選中狀態。若是指定的全部子複選框爲均選中狀態，則設置指定的父複選框爲選中狀態；若是指定的全部子複選框至少有一個爲取消選中狀態，則設置指定的父複選框爲取消選中狀態

使用方法（設置CascadeCheckboxes集合屬性）：
ParentCheckboxID - 模板列中 父複選框ID
ChildCheckboxID - 模板列中 子複選框ID
YYControls.Helper.SmartGridView中的靜態方法
List<DataKey> GetCheckedDataKey(GridView gv, int columnIndex)
List<DataKey> GetCheckedDataKey(GridView gv, string checkboxId)


關鍵代碼
js

/*聯動複選框 開始*/
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);
}
/*聯動複選框 結束*/

 

c#

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

 

/*正式版的實現 結束*/

 

/*測試版的實現 開始*/

 

介紹
平時使用GridView的時候常常要給每行加一個複選框，而後還須要放置一個單獨的全選複選框，經過單擊它來讓這些複選框全選或取消全選，每次實現這樣的功能都要寫一段javascript，麻煩，因此擴展它。


控件開發
一、新建一個繼承自GridView的類。

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

 

二、新建一個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>";
        }
}

 

三、新建一個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";
                }
        }
}

 

 

 

未完待續>>