上接扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
2007-01-25 08:19
681 查看
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
[源码下载]
/// <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
[源码下载]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
- 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
- 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
- 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
- 扩展GridView控件 行的指定复选框选中时改变行的样式
- 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
- 扩展GridView控件(1) - 鼠标经过行时改变行的样式
- GridView控件（七）——改变通过CheckBox选中的行的样式
- 扩展GridView控件(1) - 鼠标经过行时改变行的样式
- 扩展GridView控件(1) - 鼠标经过行时改变行的样式
- 扩展GridView控件（一）——鼠标经过行时改变行的样式
- 扩展GridView控件(1) - 鼠标经过行时改变行的样式
- 扩展GridView控件(1) - 鼠标经过行时改变行的样式
- 扩展GridView控件(1) - 鼠标经过行时改变行的样式
- 扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
- 扩展GridView控件(10) - 自定义分页样式
- GridView控件（一）——鼠标经过行时改变行的样式
- 扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
- winform中GridView控件在选中一行后改变选中行的背景颜色
- 上接扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）