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
[源码下载]
Feedback
请问怎样可以把数据源控件也集成上去啊,?这样就不用每次都另外加进页面了。什么时候可以把分页功能也加上去啊。好期待啊。。谢谢
@ivw
把数据源控件也集成上去?似乎没必要吧
等有时间的话我会扩展一下GridView的分页功能的
那如果不集成上去就要在每个页面里都另外加一个数据源控件啊,如果集成上去Gridview不是更方便吗?还有就是如果加上导出EXCEL或PDF功能那就更好了。在导出EXCEL的时候如果用window.showModalDialog弹出的窗口好像不能导出啊,用window.open就没问题。
能问一个和gridview相关的问题吗?
能不能把gridview变得像excel表格那样,随意改变数据最后点一个按钮就把数据都存到数据库中去。
期待你的答复阿,我现在被这个问题困扰找不到答案,希望你能给我点帮助
@ivw
就算把数据源控件集成到GridView,你做CRUD的时候不是仍然要指定数据源相关的那些参数,工作量并没有减少阿
我们一般导出EXCEL或PDF是从DataTable导出的,因为如果GridView有分页的话,导出的数据就只是当前页。
另外我觉得到出为EXCEL或PDF应该写成一个类库,而不是封装到控件里
我是这样想的,如果把导出功能放到分页栏那里,这样可以方便把数据导出去,自定义的gridview一定样用数据源才行吗,可以用gridview.databind()吗?
@windbell
要把GridView扩展出这样的功能那是相当困难的
不过如果你想实现这样的功能,可以用自己构造一个table,然后用javascript/ajax实现。
有一个很酷的例子
http://www.google.com/calendar/render
这是google上的个人日历,可以随意修改某个单元格,然后连保存都不用点,就自动存到数据库了
是啊,这个功能很实用,但要实现真的很麻烦,请问楼主,我想在后台添加一个模板列,这个列的功能是自动行号,应该怎样写呢?谢谢民
@ivw
好主意,谢谢提醒,这个周末就把这个功能加上
可以用GridView.DataBind()的方式,但是要实现编辑、分页之类的功能就要去写一些代码了,呵呵,还是用喜欢数据源控件啊
是啊,我也试过,但我见过一人控件虽然不是很强,但他把很多功能都集成进去,很方便,例如,分页啊,排序,导出功能啊,但我见他只用一个datagrid控件,不用加数据源的。刚才我试过添加个动态添加复选框和行号的功能,能就能添加,但问题是行号那里不知怎样写才好,添加的复选框列用不上你的全选功能,ID已经设成一样了。
@ivw
为什么要在后台写?
在前面写很方便
<asp:TemplateField>
<itemtemplate>
<%# Container.DataItemIndex + 1 %>
</itemtemplate>
</asp:TemplateField>
我想在控件了加个属性,控件它是否自动创建行号列。这样集成进去不是更好吗?
@ivw
原来是想这么做的,可是考虑到还要设置列的样式之类的,这样可能因为一个简单的功能弄出好多属性来,所以作罢了
如果能集成上去就方便很多了,不用拉控件出来后还要做这么多其它的代码。你能告诉我一下吗?
楼主,你给的那个网页链接我打不开阿,想看那个例子没办法啊
@ivw
可以在RowDataBound获取行的索引,然后根据行的索引给该行的某个单元格赋值,就ok了
@windbell
那就隔段时间再试试吧,不过我这里打开的速度挺快的
@ivw
我试了一下,动态添加复选框的话用不了我的全选功能,已经找到原因了,回家就去改
嗯,能加我的QQ,指点下我吗?我的Q是:120356614
@ivw
指点可不敢当,大家互相学习,我的Q:19020878
为什么我按照你的代码写下来,测试着友谊点问题。
当我选中checkbox,没有问题,
可是鼠标移动后,checkbox的样式就又变了,恢复默认的样式,和没有选中checkbox时是一样的。我错在哪里了?我是把你的代码重新复制了一遍的呀,应该没有问题。
请指点,急,在线等。
@卢哲
我测了一下,没问题啊
方便的话,把你的aspx页上的关于GridView的代码贴出来看看
我测了一下,发现一个问题,母板页+atlas 子页控件复选框无法选中,如果不用atlas就正常,请帮忙看看哦!
@英拓信息
我用asp.net ajax测了一下,没有问题的
不是很稳定,一会可以又不行,还有,固定表头的样式可以可以改变吗?谢谢
@英拓信息
如果要显示的数据量很大并且在客户端很迅速的操作的话,客户端运算有时会有问题
争取在下次的扩展ListView中解决
可以改变
设置HeaderStyle的样式
设置HeaderStyle的样式是可以改变,但是固定行的边框无法改变呀,我的意思不要显示固定行的边框
IE7.0下显示不正常
@英拓信息
可以的,设置GridView的Border就好了