`
isiqi
  • 浏览: 15950661 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

GridView控件改变CheckBox选中的行的样式

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


控件开发
1、新建一个继承自GridView的类。
/**////<summary>
///继承自GridView
///</summary>

[ToolboxData(@"<{0}:SmartGridViewrunat='server'></{0}:SmartGridView>")]
publicclassSmartGridView:GridView
{
}

2、新建一个ChangeRowCSSByCheckBox实体类,有两个属性
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;

usingSystem.ComponentModel;

namespaceYYControls.SmartGridView
{
/**////<summary>
///通过行的CheckBox的选中与否来修改行的样式
///实体类
///</summary>

[TypeConverter(typeof(ExpandableObjectConverter))]
publicclassChangeRowCSSByCheckBox
{
privatestring_checkBoxID;
/**////<summary>
///根据哪个ChecxBox来判断是否选中了行,指定该CheckBox的ID
///</summary>

[
Description(
"根据哪个ChecxBox来判断是否选中了行,指定该CheckBox的ID"),
Category(
"扩展"),
DefaultValue(
""),
NotifyParentProperty(
true)
]
publicstringCheckBoxID
{
get{return_checkBoxID;}
set{_checkBoxID=value;}
}


privatestring_cssClassRowSelected;
/**////<summary>
///选中行的样式的CSS类名
///</summary>

[
Description(
"选中行的样式的CSS类名"),
Category(
"扩展"),
DefaultValue(
""),
NotifyParentProperty(
true)
]
publicstringCssClassRowSelected
{
get{return_cssClassRowSelected;}
set{_cssClassRowSelected=value;}
}


/**////<summary>
///ToString()
///</summary>
///<returns></returns>

publicoverridestringToString()
{
return"ChangeRowCSSByCheckBox";
}

}

}


3、在继承自GridView的类中加一个复杂对象属性,该复杂对象就是第2步创建的那个ChangeRowCSSByCheckBox
privateChangeRowCSSByCheckBox_changeRowCSSByCheckBox;
/**////<summary>
///通过行的CheckBox的选中与否来修改行的样式
///</summary>

[
Description(
"通过行的CheckBox的选中与否来修改行的样式"),
Category(
"扩展"),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
PersistenceMode(PersistenceMode.InnerProperty)
]
publicvirtualChangeRowCSSByCheckBoxChangeRowCSSByCheckBox
{
get
{
if(_changeRowCSSByCheckBox==null)
{
_changeRowCSSByCheckBox
=newChangeRowCSSByCheckBox();
}

return_changeRowCSSByCheckBox;
}

}

4、新建一个JavaScriptConstant类,把我们要用到的javascript存在一个常量里
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;

namespaceYYControls.SmartGridView
{
/**////<summary>
///javascript
///</summary>

publicclassJavaScriptConstant
{
internalconststringjsChangeRowClassName=@"<scripttype=""text/javascript"">
//<![CDATA[
functionyy_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属性
functionyy_SetRowSelectedAttribute(id,bln)
{
document.getElementById(id).attributes['yy_selected'].value=bln;
}
//以id结尾的CheckBox执行两次click事件
functionyy_DoubleClickCheckBox(id)
{
varallInput=document.all.tags('INPUT');
     for(vari=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){
varreg=newRegExp(oString+""$"");
returnreg.test(this);
}
//]]>
</script>
";
}

}


5、重写OnPreRender方法,注册上面那段客户端脚本
/**////<summary>
///OnPreRender
///</summary>
///<paramname="e"></param>

protectedoverridevoidOnPreRender(EventArgse)
{
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",@"<scripttype=""text/javascript"">yy_DoubleClickCheckBox();</script>"
);
}

}

}

6、重写OnRowDataBound以通过调用相关的javascript函数实现我们想要的功能。
/**////<summary>
///OnRowDataBound
///</summary>
///<paramname="e"></param>

protectedoverridevoidOnRowDataBound(GridViewRowEventArgse)
{
if(e.Row.RowType==DataControlRowType.DataRow)
{
if(!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CheckBoxID)&&!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CssClassRowSelected))
{
foreach(TableCelltcine.Row.Cells)
{
//如果发现了指定的CheckBox
if(tc.FindControl(ChangeRowCSSByCheckBox.CheckBoxID)!=null)
{
CheckBoxchk
=tc.FindControl(ChangeRowCSSByCheckBox.CheckBoxID)asCheckBox;
stringcssClassUnchecked="";

//根据RowState的不同,取消行的选中后<tr>的不同样式(css类名)
switch(e.Row.RowState)
{
caseDataControlRowState.Alternate:
cssClassUnchecked
=base.AlternatingRowStyle.CssClass;
break;
caseDataControlRowState.Edit:
cssClassUnchecked
=base.EditRowStyle.CssClass;
break;
caseDataControlRowState.Normal:
cssClassUnchecked
=base.RowStyle.CssClass;
break;
caseDataControlRowState.Selected:
cssClassUnchecked
=base.SelectedRowStyle.CssClass;
break;
default:
cssClassUnchecked
="";
break;
}


//给行增加一个yy_selected属性,用于客户端判断行是否是选中状态
e.Row.Attributes.Add("yy_selected","false");

//添加CheckBox的click事件的客户端调用代码
color: #0
分享到:
评论

相关推荐

    GridView控件应用十个经典实例

    1、数据绑定并实现分页功能 2、选中编辑取消删除数据项 3、GridView正反双向排序的功能 4、GridView控件中DropDownList控件的绑定 ...8、删除GridView控件行信息弹出确认提示框 9、在GridView控件中实现在动编号

    gridview控件的使用(九宫式的的排列)

    1、鼠标经过行时改变行的样式 CssClassMouseOver - 鼠标经过行时行的样式的CSS类名 2、给字段标题加上排序状态 设置其SortTip下的4个属性即可 SortAscImage - 升序提示图片 SortAscText - 升序提示文本 ...

    GridView分页和选择某条记录

    GridView选择某条记录 和 分页 vs2010做的示例 很简单

    GridView控件72绝技

    鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView某一行时改变该行的背景色方法二 GridView实现删除时弹出确认对话框 GridView实现自动编号 GridView实现自定义时间货币等字符串格式 GridView实现...

    在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox

     在前面的教程里我们探讨了如何为GridView控件添加radio buttons列。当用户最多只能选择一项数据时,我们可以在用户界面里添加radio buttons列,而有时候,我们需要选择任意多项数据。比如,基于Web的邮箱客户端列...

    ASP.NET使用GridView控件的9个经典实例

    摘要:.NET源码,控件组件,GridView 环境下使用GridView控件的9个经典实例,数据库文件是SqlServer,存放在目录的Database文件夹下,这... 8、删除GridView控件行信息弹出确认提示框  9、在GridView控件中实现在动编号

    asp.net常用Web服务器控件

    实例 删除GridView控件行信息弹出确认提示框 实例 在GridView控件中实现自动编号 实例 GridView控件实现主细表 实例 查看当前页详细信息 实例 单元格中指定字符串固定长度 实例 供求信息网审核发布信息 实例 根据...

    GridView使用集合

    1、JavaScript设置GridView行的背景颜色,单偶行的背景颜色,鼠标停留行背景,鼠标选中时的行背景 2、GridView的JavaScript中的行单击,双击、删除提示框、快捷键事件 3、GridView设置属性,单元格文本颜色,单元格...

    Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行

    Insus.NET对Gridview使用CheckBox单选与全选功能再次进行简单演示,选中的行,使用高亮显示,让用户一目了然看到哪一行被选择了。本例中,使用前端脚本Javascript来实现。还是先看看Insus.NET做出来的效果: Insus...

    第7章 数据绑定控件

    实例219 一次性编辑GridView控件的所有行 中的数据 347 实例220 嵌套DropDownList控件根据库存量 设置商品停售 348 实例221 嵌套CheckBox实现批量删除和更新 供求信息 349 实例222 结合CheckBox实现密码重置 (MD5...

    datagridview点击复选框删除

    通过点击datagridview复选框删除所选项

    C#控件gridview

    鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView某一行时改变该行的背景色方法二 GridView实现删除时弹出确认对话框 GridView实现自动编号 GridView实现自定义时间货币等字符串格式 GridView实现...

    gridview扩展

    控件使用 1、鼠标经过行的时候改变该行的样式,鼠标离开行的时候恢复该行的样式 使用方法(设置属性): MouseOverCssClass - 鼠标经过行时行的 CSS 类名 &lt;br&gt;2、对多个字段进行复合排序;升序、降序的...

    ASP.NET 控件的使用

    11.1.9 在GridView控件中使用ViewState 349 11.2 在GridView控件中使用字段 349 11.2.1 使用BoundField 350 11.2.2 使用CheckBoxField 352 11.2.3 使用CommandField 353 11.2.4 使用ButtonField 355 11.2.5 使用...

    GridView用法大合集

    里面包含了GRIDVIEW的数据绑定并实现分页功能、选中,编辑,取消,删除、实现正反双向排序功能、DropDownList控件的绑定、通过CheckBox删除选中记录、实现跨页面多选、删除GridView 控件行信息弹出确认提示框、实现...

    在ASP.NET 2.0中操作数据之十二:在GridView控件中使用TemplateField

    比如说,CheckBoxField将被呈现为一个CheckBox,其选中状态由某特定数据字段的值来决定;ImageField则将某特定数据字段呈现为一个图片,当然,这个数据字段中应该放的是图片类型的数据。超级链接和按钮的状态取决于...

    利用sender的Parent获取GridView中的当前行(获取gridview的值)

    获取GridView当行有好几个方法:1 加RowCommand事件中,判断请求的发出按钮控件名,根据传递的参数来获取当前行中我们需要的参数。2 GridView设置datakeynames方式。以上方法实现不再累赘。 今天给大家介绍一种最方便...

    一个ViewGrid控件

    7、行的指定复选框选中的时候改变该行的样式,行的指定复选框取消选中的时候恢复该行的样式 使用方法(设置CheckedRowCssClass复合属性): CheckBoxID - 模板列中 数据行的复选框ID CssClass - 选中的行的 CSS ...

    ASP.NET.4揭秘

    11.1.9 在gridview控件中使用viewstate397 11.2 在gridview控件中使用字段398 11.2.1 使用boundfield398 11.2.2 使用checkboxfield401 11.2.3 使用commandfield402 11.2.4 使用buttonfield404 11.2.5 使用...

    asp .net demo

    GridView 获取选中复选框 AspNetPager DropDownList 验证控件 CustomValidator 自定义验证控件 DetailsView DetailsView 数据插入与更新 JS 版 日历控件 FileUpload 上传文件 DataList ...

Global site tag (gtag.js) - Google Analytics