AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-07 1107
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
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，麻烦，所以扩展它。


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



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



文章标签：
JavaScript
前端开发
C#
索引
技术小胖子
目录
相关文章
热爱技术的小郑
|
3月前
|
JavaScript 前端开发
复选框的全选和取消
该博客文章提供了HTML和JavaScript代码实现复选框的全选和取消全选功能，并展示了测试结果的截图。
热爱技术的小郑
28 0
复选框的全选和取消
刘志辉~
|
3月前
点击全选，使所有复选框被选中
点击全选，使所有复选框被选中
刘志辉~
45 0
祈澈菇凉
|
开发者
jeDate日期控件的使用以及选中后点确定按钮关闭功能
jeDate日期控件的使用以及选中后点确定按钮关闭功能
祈澈菇凉
158 0
小小工匠
|
XML Java API
按钮和复选框控件
按钮和复选框控件
小小工匠
88 0
授客
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
授客
401 0
我是咔咔
【Layui】关于单选框的选中状态，下拉框默认显示
【Layui】关于单选框的选中状态，下拉框默认显示
我是咔咔
648 0
【Layui】关于单选框的选中状态，下拉框默认显示
相信光的奥特王小懒
表单全选以及取消全选的制作
表单全选以及取消全选的制作
相信光的奥特王小懒
146 0
表单全选以及取消全选的制作
DS小龙哥
QT应用编程: QTableWidget删除选中的多行与全选、取消全选
QT应用编程: QTableWidget删除选中的多行与全选、取消全选
DS小龙哥
1086 0
QT应用编程: QTableWidget删除选中的多行与全选、取消全选
swjian1997
|
C#
C# DataGridview控件自动下拉到最后一行
有时候使用DataGridView难免会在最后插入一条数据，如果插入的数据超过滚动条显示的行数，那么默认情况下不会显示到最后一行。增加以下代码一直将滚动条拉倒最低。 this.dataGridView1.
swjian1997
2629 0
技术小胖子
|
索引
上接扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
技术小胖子
950 0