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 "-//W 3C //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>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)