扩展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(' yy_sgv_crListener)
}
else
{
window.addEventListener('load', yy_sgv_crListener, false);
}
/*行的指定复选框选中时改变行的样式 结束*/
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的类。
/// 继承自GridView
/// </summary>
[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}
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 _cssCla***owSelected;
/// <summary>
/// 选中行的样式的 CSS 类名
/// </summary>
[
Description("选中行的样式的 CSS 类名"),
Category("扩展"),
DefaultValue(""),
NotifyParentProperty(true)
]
public string CssCla***owSelected
{
get { return _cssCla***owSelected; }
set { _cssCla***owSelected = value; }
}
/// <summary>
/// ToString()
/// </summary>
/// <returns></returns>
public override string ToString()
{
return "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;
}
}
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>";
}
}
转载于:https://blog.51cto.com/webabcd/345528
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式相关推荐
- 在 GridView 控件中添加一列复选框51
简介 在前面的教程中 , 我们学习了如何为 GridView 控件添加一列 单选 按钮来选择一个特定的记录.当用户被限制最多只能从网格中选中一项时,一列单选按钮是一个非常恰当的用户界面.然而,有时我们 ...
- 判断鼠标不在控件上_VB常用控件属性讲解单选按钮、复选框总结
1 单选按钮.复选框做为VB编程中的选择性控件,在实际程序中有着广泛的应用,所以熟练掌握其特殊属性的用法就很重要了! 单选按钮.复选框的实际应用图 复选框(CheckBox)控件 属性 说明 Name ...
- vb html单选按钮,VB常用控件属性讲解--单选按钮、复选框总结
属性说明 Name复选框控件的名称 Alignment设置标题文本的对齐方式, 取值为: 0 左对齐 1 右对齐 Appearance是否用立体效果绘制,取值为: 0 平面 1 3D(立体) ...
- JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代 知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
- 为tableview添加带控件的单元格如复选框checkbox与combbox单元格
我们常常会有这样的需求,为QTableView增加复选框checkbox和选择下拉框combbox,毕竟依靠键盘输入不是很好约束其规范性.下面我们逐个来介绍.完成之后的效果如下: 一.准备TableV ...
- 使用easyui框架form控件,单选按钮radio或复选框checkbox样式问题
为什么80%的码农都做不了架构师?>>> easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio ...
- Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件
在web开发中,带checkbox的tree是一个很有用的东东,比如权限选择.分类管理,如果不用sl,单纯用js+css实现是很复杂的,有了SL之后,就变得很轻松了 解决方案一: 利用Silvelri ...
- 关于怎么获取Repeater控件复选框选中的那一行的数据
关于怎么获取Repeater控件复选框选中的那一行的数据 1.首先你要有一个repeater控件,并且里面有复选框控件 2.废话不多话,直接上代码 Dim i As Integer'Car是repea ...
- 扩展GridView控件——为内容项添加拖放及分组功能
引言 相信大家对GridView都不陌生,是非常有用的控件,用于平铺有序的显示多个内容项.打开任何WinRT应用或者是微软合作商的网站,都会在APP中发现GridView的使用."Tiles ...
最新文章
- MODEL COMPRESSION VIA DISTILLATION AND QUANTIZATION 论文笔记
- 强软弱虚引用,只有体会过了,才能记住
- 【修正】销售开票BAPI实例:BAPI_BILLINGDOC_CREATEMULTIPLE
- windows live writer向cnblog发布文章设置(转)
- 3.2 使用pytorch搭建AlexNet并训练花分类数据集
- ubuntu 安装cmake
- 训练日志 2018.10.7
- JDK1.7 深入理解 LinkedHashMap
- mysql服务启动成功后卸载_安装,启动与卸载Mysql系统服务(MYSQL常见问题)
- 激光点云常用数据集整理
- 将Firefox浏览器的Google工具栏拖动到浏览器底部
- DSP TMS320F280049C之捕获eCAP(1)
- idea项目名称重命名
- 计算机网络——路由器接口及静态路由配置
- 查找一个字符串中的所有子串的位置
- RetianNet在DDSM(4)
- swust oj 971
- gel和react哪个厉害_gel、react、boost三种材料的跑鞋哪个更强呢?
- win11,google chrome没有声音怎么办
- 图数据库(七):Neo4j中Cypher语言where关键字
热门文章
- 测试一款CSDN免费下载软件
- MM32F3277 MicroPython 的定时器功能
- 第十六届全国大学生智能车竞赛比赛获奖证书格式说明以及下载链接
- 2021年春季学期-信号与系统-第十三次作业参考答案-第六小题
- BH38旋转编码器初步测试
- 利用二极管的P-N结的I-V特性测量Boltzmann常数
- java 反射遍历_java使用反射遍历类的字段
- ceph 代码分析 读_Ceph OSD磁盘异常流量问题分析
- centos查看python版本_CentOS系统python默认版本由python2改为python3
- java arraylist 序列化_无法序列化/反序列化ArrayList