上接扩展GridView控件(7) - 行的指定复选框选中时改变行的样式-优快云博客

本文介绍了一种使用ASP.NET自定义控件实现智能GridView的方法，通过重写OnPreRender和OnRowDataBound方法，注册客户端脚本来改变行样式。此外，还展示了如何通过CheckBox选择行并更改其样式。

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
[源码下载]