扩展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('onload', 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 _cssClassRowSelected;

/// <summary>

/// 选中行的样式的 CSS 类名

/// </summary>

[

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

Category("扩展"),

DefaultValue(""),

NotifyParentProperty(true)

]

public string CssClassRowSelected

{

get { return _cssClassRowSelected; }

set { _cssClassRowSelected = 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>";

}

}

5、重写OnPreRender方法，注册上面那段客户端脚本

/// <summary>

/// OnPreRender

/// </summary>

/// <param name="e"></param>

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

if ((!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CheckBoxID)

&& !String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CssClassRowSelected))

|| !String.IsNullOrEmpty(CssClassMouseOver))

{

// 注册实现改变行样式的客户端脚本

if (!Page.ClientScript.IsClientScriptBlockRegistered("jsChangeRowClassName"))

{

Page.ClientScript.RegisterClientScriptBlock(

this.GetType(),

"jsChangeRowClassName", JavaScriptConstant.jsChangeRowClassName

);

}

// 注册调用双击CheckBox函数的客户端脚本

if (!Page.ClientScript.IsStartupScriptRegistered("jsInvokeDoubleClickCheckBox"))

{

Page.ClientScript.RegisterStartupScript(

this.GetType(),

"jsInvokeDoubleClickCheckBox", @"<script type=""text/javascript"">yy_DoubleClickCheckBox();</script>"

);

}

}

}

6、重写OnRowDataBound以通过调用相关的javascript函数实现我们想要的功能。

/// <summary>

/// OnRowDataBound

/// </summary>

/// <param name="e"></param>

protected override void OnRowDataBound(GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

if (!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CheckBoxID) && !String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CssClassRowSelected))

{

foreach (TableCell tc in e.Row.Cells)

{

// 如果发现了指定的CheckBox

if (tc.FindControl(ChangeRowCSSByCheckBox.CheckBoxID) != null)

{

CheckBox chk = tc.FindControl(ChangeRowCSSByCheckBox.CheckBoxID) as CheckBox;

string cssClassUnchecked = "";

// 根据RowState的不同，取消行的选中后<tr>的不同样式（css类名）

switch (e.Row.RowState)

{

case DataControlRowState.Alternate:

cssClassUnchecked = base.AlternatingRowStyle.CssClass;

break;

case DataControlRowState.Edit:

cssClassUnchecked = base.EditRowStyle.CssClass;

break;

case DataControlRowState.Normal:

cssClassUnchecked = base.RowStyle.CssClass;

break;

case DataControlRowState.Selected:

cssClassUnchecked = base.SelectedRowStyle.CssClass;

break;

default:

cssClassUnchecked = "";

break;

}

// 给行增加一个yy_selected属性，用于客户端判断行是否是选中状态

e.Row.Attributes.Add("yy_selected", "false");

// 添加CheckBox的click事件的客户端调用代码

string strOnclickScript = "";

if (!String.IsNullOrEmpty(chk.Attributes["onclick"]))

{

strOnclickScript += chk.Attributes["onclick"];

}

strOnclickScript += ";if (this.checked) "

+ "{yy_ChangeRowClassName('" + e.Row.ClientID + "', '" + ChangeRowCSSByCheckBox.CssClassRowSelected + "', true);"

+ "yy_SetRowSelectedAttribute('" + e.Row.ClientID + "', 'true')} "

+ "else {yy_ChangeRowClassName('" + e.Row.ClientID + "', '" + cssClassUnchecked + "', true);"

+ "yy_SetRowSelectedAttribute('" + e.Row.ClientID + "', 'false')}";

chk.Attributes.Add("onclick", strOnclickScript);

break;

}

}

}

}

base.OnRowDataBound(e);

}

控件使用
添加这个控件到工具箱里，然后拖拽到webform上，设置CheckBoxID属性为模板列的项复选框的ID，CssClassRowSelected属性设置为选中行的样式的CSS类名，则可以实现改变通过CheckBox选中的行的样式的功能。
ObjData.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.ComponentModel;

/// <summary>

/// OjbData 的摘要说明

/// </summary>

public class OjbData

{

public OjbData()

{

//

// TODO: 在此处添加构造函数逻辑

//

}

[DataObjectMethod(DataObjectMethodType.Select, true)]

public DataTable Select()

{

DataTable dt = new DataTable();

dt.Columns.Add("no", typeof(string));

dt.Columns.Add("name", typeof(string));

for (int i = 0; i < 30; i++)

{

DataRow dr = dt.NewRow();

dr[0] = "no" + i.ToString().PadLeft(2, '0');

dr[1] = "name" + i.ToString().PadLeft(2, '0');

dt.Rows.Add(dr);

}

return dt;

}

}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>SmartGridView</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<yyc:SmartGridView ID="SmartGridView1" runat="server" DataSourceID="ObjectDataSource1"

AutoGenerateColumns="false">

<Columns>

<asp:TemplateField>

<itemtemplate>

<%# Container.DataItemIndex + 1 %>

</itemtemplate>

</asp:TemplateField>

<asp:TemplateField ItemStyle-Width="100px">

<itemtemplate>

<asp:checkbox id="checkitem" runat="server" />

</itemtemplate>

</asp:TemplateField>

<asp:BoundField DataField="no" HeaderText="序号" />

<asp:BoundField DataField="name" HeaderText="名称" />

</Columns>

<ChangeRowCSSByCheckBox CheckBoxID="checkitem" CssClassRowSelected="SelectedRow" />

</yyc:SmartGridView>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"

TypeName="OjbData"></asp:ObjectDataSource>

</div>

</form>

</body>

</html>

/*测试版的实现结束*/

OK
[源码下载]

posted @ 2007-01-25 08:19 webabcd 阅读(12987) 评论(31) 编辑收藏举报

刷新页面返回顶部