博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
阅读量:5956 次
发布时间:2019-06-19

本文共 7151 字,大约阅读时间需要 23 分钟。

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




扩展GridView控件(7) - 行的指定复选框选中时改变行的样式


作者:

InBlock.gif
/*正式版的实现 开始*/
介绍
扩展GridView控件:
行的指定复选框选中的时候改变该行的样式,行的指定复选框取消选中的时候恢复该行的样式

使用方法(设置CheckedRowCssClass复合属性): 
CheckBoxID - 模板列中 数据行的复选框ID
CssClass - 选中的行的 CSS 类名


关键代码
js
/*行的指定复选框选中时改变行的样式 开始*/ 

var yy_sgv_crGridView_pre = 
new Array(); 
// cs中动态向其灌数据(GridView内控件ID的前缀数组) 

var yy_sgv_crCheckbox_post = 
new Array(); 
// cs中动态向其灌数据(数据行的复选框ID的后缀数组) 

var yy_sgv_crClassName = ''; 
// cs中动态向其灌数据(css 类名) 


var yy_sgv_crCheckbox = 
new Array(); 
// Checkbox数组 

var yy_sgv_crCssClass = 
new Array(); 
// css 类名数组 


function yy_sgv_changeCheckedRowCssClass(obj, cssClass, enableChangeMouseOverCssClass) 


/// <summary>数据行的指定复选框选中行时改变行的样式</summary> 


        
if (yy_sgv_crClassName == '') 
return

         

        
var objChk = obj; 

        
var objTr = obj; 

         

        
do 

        { 

                objTr = objTr.parentNode; 

        }    

        
while (objTr.tagName != 
"TR"

         

        
if (objChk.checked) 

        { 

                yy_sgv_crCheckbox.push(objChk.id); 

                
if (yy_sgv_originalCssClassName != '' && enableChangeMouseOverCssClass) 

                { 

                        yy_sgv_crCssClass.push(yy_sgv_originalCssClassName); 

                } 

                
else 

                { 

                        yy_sgv_crCssClass.push(objTr.className); 

                } 

                         

                objTr.className = cssClass; 

                 

                
if (enableChangeMouseOverCssClass) 

                        yy_sgv_originalCssClassName = cssClass; 

        } 

        
else 

        { 

                
for (
var i=0; i<yy_sgv_crCheckbox.length; i++) 

                { 

                        
if (yy_sgv_crCheckbox[i] == objChk.id) 

                        { 

                                objTr.className = yy_sgv_originalCssClassName = yy_sgv_crCssClass[i]; 

                                yy_sgv_crCheckbox.splice(i, 1); 

                                yy_sgv_crCssClass.splice(i, 1); 

                                 

                                
break

                        } 

                } 

        } 



function yy_sgv_crCheck(e)    


/// <summary>单击数据行的复选框时</summary> 


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

        
var obj = evt.target || evt.srcElement    
// FF || IE 


        yy_sgv_changeCheckedRowCssClass(obj, yy_sgv_crClassName, 
true



function yy_sgv_crListener() 


/// <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_crGridView_pre.length; j++) 

                        { 

                                
if (elements[i].id.yy_sgv_startsWith(yy_sgv_crGridView_pre[j])    

                                        && elements[i].id.yy_sgv_endsWith(yy_sgv_crCheckbox_post[j])) 

                                { 

                                        yy_sgv_addEvent(elements[i], 'click', yy_sgv_crCheck);    

                                        
break

                                } 

                        } 

                } 

        }         


        

if (document.all) 


        window.attachEvent(' yy_sgv_crListener) 


else 


        window.addEventListener('load', yy_sgv_crListener, 
false); 


/*行的指定复选框选中时改变行的样式 结束*/ 

 
c#
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Text; 

InBlock.gif 

InBlock.gif
using System.Web.UI.WebControls; 

InBlock.gif
using System.Web.UI; 

InBlock.gif 

InBlock.gif
namespace YYControls.SmartGridViewFunction 

InBlock.gif

InBlock.gif        
/// <summary> 

InBlock.gif        
/// 扩展功能:行的指定复选框选中时改变行的样式 

InBlock.gif        
/// </summary> 

InBlock.gif        
public 
class CheckedRowCssClassFunction : ExtendFunction 

InBlock.gif        { 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// 构造函数 

InBlock.gif                
/// </summary> 

InBlock.gif                
public CheckedRowCssClassFunction() 

InBlock.gif                        : 
base() 

InBlock.gif                { 

InBlock.gif 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// 构造函数 

InBlock.gif                
/// </summary> 

InBlock.gif                
/// <param name="sgv">SmartGridView对象</param> 

InBlock.gif                
public CheckedRowCssClassFunction(SmartGridView sgv) 

InBlock.gif                        : 
base(sgv) 

InBlock.gif                { 

InBlock.gif 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// 扩展功能的实现 

InBlock.gif                
/// </summary> 

InBlock.gif                
protected 
override 
void Execute() 

InBlock.gif                { 

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

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// SmartGridView的PreRender事件 

InBlock.gif                
/// </summary> 

InBlock.gif                
/// <param name="sender"></param> 

InBlock.gif                
/// <param name="e"></param> 

InBlock.gif                
void _sgv_PreRender(
object sender, EventArgs e) 

InBlock.gif                { 

InBlock.gif                        
// 构造向数组中添加成员的脚本 

InBlock.gif                        
string scriptString = ""; 

InBlock.gif                        scriptString += String.Format(
"yy_sgv_crGridView_pre.push('{0}');", Helper.Common.GetChildControlPrefix(
this._sgv)); 

InBlock.gif                        scriptString += String.Format(
"yy_sgv_crCheckbox_post.push('{0}');"
this._sgv.CheckedRowCssClass.CheckBoxID); 

InBlock.gif                        scriptString += String.Format(
"yy_sgv_crClassName = '{0}';"
this._sgv.CheckedRowCssClass.CssClass); 

InBlock.gif 

InBlock.gif                        
// 注册向数组中添加成员的脚本 

InBlock.gif                        
if (!
this._sgv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format(
"yy_sgv_checkedRowCssClass_{0}"
this._sgv.ClientID))) 

InBlock.gif                        { 

InBlock.gif                                
this._sgv.Page.ClientScript.RegisterClientScriptBlock 

InBlock.gif                                ( 

InBlock.gif                                        
this._sgv.GetType(), 

InBlock.gif                                        String.Format(
"yy_sgv_checkedRowCssClass_{0}"
this._sgv.ClientID), 

InBlock.gif                                        scriptString, 

InBlock.gif                                        
true 

InBlock.gif                                ); 

InBlock.gif                        } 

InBlock.gif                } 

InBlock.gif        } 

InBlock.gif}
 
InBlock.gif
/*正式版的实现 结束*/
 
InBlock.gif
/*测试版的实现 开始*/
 
介绍
在GridView中如果每行都有复选框的话,选中了某个复选框则修改该复选框所在行的样式,这是经常要用到的功能,因此我们来扩展一下GridView控件。


控件开发
1、新建一个继承自GridView的类。
/// <summary> 

/// 继承自GridView 

/// </summary> 

InBlock.gif[ToolboxData(
@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")] 

InBlock.gif
public 
class SmartGridView : GridView 

InBlock.gif

InBlock.gif}
 
2、新建一个ChangeRowCSSByCheckBox实体类,有两个属性
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Text; 

InBlock.gif 

InBlock.gif
using System.ComponentModel; 

InBlock.gif 

InBlock.gif
namespace YYControls.SmartGridView 

InBlock.gif

InBlock.gif        
/// <summary> 

InBlock.gif        
/// 通过行的CheckBox的选中与否来修改行的样式 

InBlock.gif        
/// 实体类 

InBlock.gif        
/// </summary> 

InBlock.gif        [TypeConverter(
typeof(ExpandableObjectConverter))] 

InBlock.gif        
public 
class ChangeRowCSSByCheckBox 

InBlock.gif        { 

InBlock.gif                
private 
string _checkBoxID; 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// 根据哪个ChecxBox来判断是否选中了行,指定该CheckBox的ID 

InBlock.gif                
/// </summary> 

InBlock.gif                [ 

InBlock.gif                Description(
"根据哪个ChecxBox来判断是否选中了行,指定该CheckBox的ID"), 

InBlock.gif                Category(
"扩展"), 

InBlock.gif                DefaultValue(""), 

InBlock.gif                NotifyParentProperty(
true

InBlock.gif                ] 

InBlock.gif                
public 
string CheckBoxID 

InBlock.gif                { 

InBlock.gif                        get { 
return _checkBoxID; } 

InBlock.gif                        set { _checkBoxID = value; } 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
private 
string _cssClassRowSelected; 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// 选中行的样式的 CSS 类名 

InBlock.gif                
/// </summary> 

InBlock.gif                [ 

InBlock.gif                Description(
"选中行的样式的 CSS 类名"), 

InBlock.gif                Category(
"扩展"), 

InBlock.gif                DefaultValue(""), 

InBlock.gif                NotifyParentProperty(
true

InBlock.gif                ] 

InBlock.gif                
public 
string CssClassRowSelected 

InBlock.gif                { 

InBlock.gif                        get { 
return _cssClassRowSelected; } 

InBlock.gif                        set { _cssClassRowSelected = value; } 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// ToString() 

InBlock.gif                
/// </summary> 

InBlock.gif                
/// <returns></returns> 

InBlock.gif                
public 
override 
string ToString() 

InBlock.gif                { 

InBlock.gif                        
return 
"ChangeRowCSSByCheckBox"

InBlock.gif                } 

InBlock.gif        } 

InBlock.gif}
 
3、在继承自GridView的类中加一个复杂对象属性,该复杂对象就是第2步创建的那个ChangeRowCSSByCheckBox
InBlock.gif
private ChangeRowCSSByCheckBox _changeRowCSSByCheckBox; 

InBlock.gif                
/// <summary> 

InBlock.gif                
/// 通过行的CheckBox的选中与否来修改行的样式 

InBlock.gif                
/// </summary> 

InBlock.gif                [ 

InBlock.gif                Description(
"通过行的CheckBox的选中与否来修改行的样式"), 

InBlock.gif                Category(
"扩展"), 

InBlock.gif                DesignerSerializationVisibility(DesignerSerializationVisibility.Content), 

InBlock.gif                PersistenceMode(PersistenceMode.InnerProperty) 

InBlock.gif                ] 

InBlock.gif                
public 
virtual ChangeRowCSSByCheckBox ChangeRowCSSByCheckBox 

InBlock.gif                { 

InBlock.gif                        get 

InBlock.gif                        { 

InBlock.gif                                
if (_changeRowCSSByCheckBox == 
null

InBlock.gif                                { 

InBlock.gif                                        _changeRowCSSByCheckBox = 
new ChangeRowCSSByCheckBox(); 

InBlock.gif                                } 

InBlock.gif                                
return _changeRowCSSByCheckBox; 

InBlock.gif                        } 

InBlock.gif                }
 
4、新建一个JavaScriptConstant类,把我们要用到的javascript存在一个常量里
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Text; 

InBlock.gif 

InBlock.gif
namespace YYControls.SmartGridView 

InBlock.gif

InBlock.gif        
/// <summary> 

InBlock.gif        
/// javascript 

InBlock.gif        
/// </summary> 

InBlock.gif        
public 
class JavaScriptConstant 

InBlock.gif        { 

InBlock.gif                
internal 
const 
string jsChangeRowClassName = 
@"<script type=""text/javascript""> 

InBlock.gif                
//<![CDATA[ 

InBlock.gif                function yy_ChangeRowClassName(id, cssClass, isForce) 

InBlock.gif                { 

InBlock.gif                        objRow = document.getElementById(id); 

InBlock.gif                        
// 如果row的yy_selected属性是'false'或者没有yy_selected属性或者要求强制设置 

InBlock.gif                        
// 那么修改该行的className 

InBlock.gif                        
if (!objRow.attributes['yy_selected'] || objRow.attributes['yy_selected'].value == '
false' || isForce == 
true

InBlock.gif                        { 

InBlock.gif                                document.getElementById(id).className = cssClass; 

InBlock.gif                        } 

InBlock.gif                } 

InBlock.gif                
// 设置行的yy_selected属性 

InBlock.gif                function yy_SetRowSelectedAttribute(id, bln) 

InBlock.gif                { 

InBlock.gif                        document.getElementById(id).attributes['yy_selected'].value = bln; 

InBlock.gif                } 

InBlock.gif                
// 以id结尾的CheckBox执行两次click事件 

InBlock.gif                function yy_DoubleClickCheckBox(id) 

InBlock.gif                { 

InBlock.gif                        var allInput = document.all.tags('INPUT'); 

InBlock.gif         
for (var i=0; i < allInput.length; i++)    

InBlock.gif         { 

InBlock.gif                 
if (allInput[i].type == 'checkbox' && allInput[i].id.endWith('checkitem')) 

InBlock.gif                  { 

InBlock.gif                                        
// 触发click事件而不执行yy_ClickCheckItem()函数 

InBlock.gif                                        isInvokeClickCheckItem = 
false

InBlock.gif                      allInput[i].click(); 

InBlock.gif                                        isInvokeClickCheckItem = 
false

InBlock.gif                                        allInput[i].click(); 

InBlock.gif            }            

InBlock.gif         } 

InBlock.gif 

InBlock.gif                } 

InBlock.gif                String.prototype.endWith = function(oString){        

InBlock.gif                        var reg = 
new RegExp(oString + 
""$"");        

InBlock.gif                        
return reg.test(
this); 

InBlock.gif                }     

InBlock.gif                
//]]> 

InBlock.gif                </script>"; 

InBlock.gif        } 

InBlock.gif}
 
 
     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/345528,如需转载请自行联系原作者
你可能感兴趣的文章
源码解读Linux的limits.conf文件
查看>>
expdp 详解及实例
查看>>
C++中 栈的简单封装
查看>>
我的友情链接
查看>>
Linux常用命令--iconv
查看>>
varnish的了解与常用配置使用
查看>>
Product user profile information 没有导入
查看>>
DELL T410服务器U盘安装Centos7
查看>>
解读最具O2O属性—哈根达斯微信企业号的成功之道
查看>>
Sqlserver2008日志压缩
查看>>
linux更改语言
查看>>
centos7 修改mac地址
查看>>
<script>标签的加载解析执行
查看>>
恢复rm删除的文件(ext3
查看>>
账户注销完自动登录账户,并且不需要再点击屏幕的账户头像
查看>>
【Interface&navigation】按钮(29)
查看>>
Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析
查看>>
Server-01 How to Find the Remote Desktop Port
查看>>
Java--接口、抽象与继承
查看>>
通过IP判断登录地址
查看>>