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

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

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

作者： webabcd

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

介绍
扩展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#

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 CheckedRowCssClassFunction : ExtendFunction
        {
                 /// <summary>
                 /// 构造函数
                 /// </summary>
                 public CheckedRowCssClassFunction()
                        : base()
                {

                }

                 /// <summary>
                 /// 构造函数
                 /// </summary>
                 /// <param name="sgv">SmartGridView对象</param>
                 public CheckedRowCssClassFunction(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 = "";
                        scriptString += String.Format( "yy_sgv_crGridView_pre.push('{0}');", Helper.Common.GetChildControlPrefix( this._sgv));
                        scriptString += String.Format( "yy_sgv_crCheckbox_post.push('{0}');", this._sgv.CheckedRowCssClass.CheckBoxID);
                        scriptString += String.Format( "yy_sgv_crClassName = '{0}';", this._sgv.CheckedRowCssClass.CssClass);

                         // 注册向数组中添加成员的脚本
                         if (! this._sgv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format( "yy_sgv_checkedRowCssClass_{0}", this._sgv.ClientID)))
                        {
                                 this._sgv.Page.ClientScript.RegisterClientScriptBlock
                                (
                                         this._sgv.GetType(),
                                        String.Format( "yy_sgv_checkedRowCssClass_{0}", this._sgv.ClientID),
                                        scriptString,
                                         true
                                );
                        }
                }
        }
}

 

/*正式版的实现 结束*/

 

/*测试版的实现 开始*/

 

介绍
在GridView中如果每行都有复选框的话，选中了某个复选框则修改该复选框所在行的样式，这是经常要用到的功能，因此我们来扩展一下GridView控件。


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

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

 

2、新建一个ChangeRowCSSByCheckBox实体类，有两个属性

using System;
using System.Collections.Generic;
using System.Text;

using System.ComponentModel;

namespace YYControls.SmartGridView
{
         /// <summary>
         /// 通过行的CheckBox的选中与否来修改行的样式
         /// 实体类
         /// </summary>
        [TypeConverter( typeof(ExpandableObjectConverter))]
         public class ChangeRowCSSByCheckBox
        {
                 private string _checkBoxID;
                 /// <summary>
                 /// 根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID
                 /// </summary>
                [
                Description( "根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID"),
                Category( "扩展"),
                DefaultValue(""),
                NotifyParentProperty( true)
                ]
                 public string CheckBoxID
                {
                        get { return _checkBoxID; }
                        set { _checkBoxID = value; }
                }

                 private string _cssCla***owSelected;
                 /// <summary>
                 /// 选中行的样式的 CSS 类名
                 /// </summary>
                [
                Description( "选中行的样式的 CSS 类名"),
                Category( "扩展"),
                DefaultValue(""),
                NotifyParentProperty( true)
                ]
                 public string CssCla***owSelected
                {
                        get { return _cssCla***owSelected; }
                        set { _cssCla***owSelected = value; }
                }

                 /// <summary>
                 /// ToString()
                 /// </summary>
                 /// <returns></returns>
                 public override string ToString()
                {
                         return "ChangeRowCSSByCheckBox";
                }
        }
}

 

3、在继承自GridView的类中加一个复杂对象属性，该复杂对象就是第2步创建的那个ChangeRowCSSByCheckBox

private ChangeRowCSSByCheckBox _changeRowCSSByCheckBox;
                 /// <summary>
                 /// 通过行的CheckBox的选中与否来修改行的样式
                 /// </summary>
                [
                Description( "通过行的CheckBox的选中与否来修改行的样式"),
                Category( "扩展"),
                DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
                PersistenceMode(PersistenceMode.InnerProperty)
                ]
                 public virtual ChangeRowCSSByCheckBox ChangeRowCSSByCheckBox
                {
                        get
                        {
                                 if (_changeRowCSSByCheckBox == null)
                                {
                                        _changeRowCSSByCheckBox = new ChangeRowCSSByCheckBox();
                                }
                                 return _changeRowCSSByCheckBox;
                        }
                }

 

4、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里

using System;
using System.Collections.Generic;
using System.Text;

namespace YYControls.SmartGridView
{
         /// <summary>
         /// javascript
         /// </summary>
         public class JavaScriptConstant
        {
                 internal const string jsChangeRowClassName = @"<script type=""text/javascript"">
                 //<![CDATA[
                function yy_ChangeRowClassName(id, cssClass, isForce)
                {
                        objRow = document.getElementById(id);
                         // 如果row的yy_selected属性是'false'或者没有yy_selected属性或者要求强制设置
                         // 那么修改该行的className
                         if (!objRow.attributes['yy_selected'] || objRow.attributes['yy_selected'].value == ' false' || isForce == true)
                        {
                                document.getElementById(id).className = cssClass;
                        }
                }
                 // 设置行的yy_selected属性
                function yy_SetRowSelectedAttribute(id, bln)
                {
                        document.getElementById(id).attributes['yy_selected'].value = bln;
                }
                 // 以id结尾的CheckBox执行两次click事件
                function yy_DoubleClickCheckBox(id)
                {
                        var allInput = document.all.tags('INPUT');
    　　　　　 for (var i=0; i < allInput.length; i++)    
    　　　　　{
    　　　　　         if (allInput[i].type == 'checkbox' && allInput[i].id.endWith('checkitem'))
     　　　　         {
                                         // 触发click事件而不执行yy_ClickCheckItem()函数
                                        isInvokeClickCheckItem = false;
        　　　　　　        allInput[i].click();
                                        isInvokeClickCheckItem = false;
                                        allInput[i].click();
     　　　　　　 }            
    　　　　　}

                }
                String.prototype.endWith = function(oString){        
                        var reg = new RegExp(oString + ""$"");        
                         return reg.test( this);
                }    
                 //]]>
                </script>";
        }
}

 

 

未完待续>>

转载于:https://blog.51cto.com/webabcd/345528