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

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]

[align=center]扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
[/align]

作者：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，麻烦，所以扩展它。

控件开发
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";


}


}


}

未完待续>>