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

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。

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

介绍

扩展GridView控件：

联动复选框（复选框的全选和取消全选）。选中指定的父复选框，则设置指定的所有子复选框为选中状态；取消选中指定的父复选框，则设置指定的所有子复选框为取消选中状态。如果指定的所有子复选框为均选中状态，则设置指定的父复选框为选中状态；如果指定的所有子复选框至少有一个为取消选中状态，则设置指定的父复选框为取消选中状态

使用方法（设置CascadeCheckboxes集合属性）：

ParentCheckboxID - 模板列中父复选框ID

ChildCheckboxID - 模板列中子复选框ID

YYControls.Helper.SmartGridView中的静态方法

List<DataKey> GetCheckedDataKey(GridView gv, int columnIndex)

List<DataKey> GetCheckedDataKey(GridView gv, string checkboxId)

关键代码

/*联动复选框开始*/

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 checkedNum = 0;

var uncheckedNum = 0;

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>

if (elements[i].type == 'checkbox'

&& elements[i].id.yy_sgv_startsWith(pre)

&& elements[i].id.yy_sgv_endsWith(post))

function yy_sgv_ccListener()

/// <summary>监听所有联动复选框的单击事件</summary>

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()

/// <param name="sgv">SmartGridView对象</param>

public CascadeCheckboxFunction(SmartGridView sgv)

: base(sgv)

/// 扩展功能的实现

protected override void Execute()

this._sgv.PreRender += new EventHandler(_sgv_PreRender);

/// SmartGridView的PreRender事件

/// <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存在一个常量里

namespace YYControls.SmartGridView

/// javascript

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;

}

// 项复选框被单击

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.ComponentModel;

/// CheckboxAll 的摘要说明。

[ToolboxItem(false)]

public class CheckboxAll

private string _checkboxAllID;

/// 模板列全选复选框ID

public string CheckboxAllID

get { return _checkboxAllID; }

set { _checkboxAllID = value; }

private string _checkboxItemID;

/// 模板列项复选框ID

public string CheckboxItemID

get { return _checkboxItemID; }

set { _checkboxItemID = value; }

/// ToString()

/// <returns></returns>

public override string ToString()

return "CheckboxAll";

本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/345477，如需转载请自行联系原作者

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

继续阅读

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

七牛云-C#SDK-上传-前期准备

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条