Gridview 中动态嵌入和执行 js 代码

本文详细介绍了如何在 GridView 的特定控件上动态嵌入 JavaScript 事件,包括修改事件、输入框的 onblur 事件等。通过在后台调用脚本并替换 HTML 结构,实现事件响应功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用GridView, 有时会需要在 删除、更新、修改、页面跳转前做数据的验证或计算,但js代码在一开始时写不进去的,

如<button onclick= "sampe()">、 <a Href= onclick=  "sampe()">、<input type=text onblur= "sampe()">,

这些对gridView编程时都是不存在的,只有在页面解析时才会出现的控件,或嵌入到GridViewRow的控件,在解析后出现N个,

这些控件的没有可操控的id,或id(client)在解析后重复,不能在js中使用document.getElementById("id").value找到。

即使可以在后台使用XX.clientID定位到控件,也很难嵌入需要的js代码和响应事件(click)。


而在前台,gridview会解析成table,可以经常看到类似这样的代码

<tr style="background-color:LightSkyBlue;">
	<td><span>15</span> </td>
	<td>408109070115</td>
	<td>张三</td>
	<td style="width:80px;"> </td>
	<td style="width:80px;"> </td>
	<td style="width:70px;"> </td>
	<td style="width:120px;"> </td>
	<td><a href="javascript:__doPostBack('ctl00$Body$gvDetail','Edit$7')">修改</a></td>
</tr>
…………
<tr style="background-color:LightSkyBlue;">
	<td><span>7</span></td>
	<td>408109070107</td>
	<td>李斯</td>
	<td style="width:80px;">
	<input name="ctl00$Body$gvDetail$ctl08$ctl00" type="text" title="平时成绩" /></td>
	<td style="width:80px;"><input name="ctl00$Body$gvDetail$ctl08$ctl01" type="text" title="试卷成绩" /></td>
	<td style="width:70px;"><input name="ctl00$Body$gvDetail$ctl08$ctl02" type="text" title="总成绩" /></td>
	<td style="width:120px;"><input name="ctl00$Body$gvDetail$ctl08$ctl03" type="text" title="备注" /></td>
	<td><a href="javascript:__doPostBack('ctl00$Body$gvDetail$ctl08$ctl04','')">保存</a> 
		<a href="javascript:__doPostBack('ctl00$Body$gvDetail','Cancel$6')">取消</a></td>
</tr>

而我们就是要响应

<td><a href="javascript:__doPostBack(&#39;ctl00$Body$gvDetail&#39;,&#39;Edit$7&#39;)">修改</a></td>

中的事件<a onclick="validate()">

或<td style="width:80px;"><input name="ctl00$Body$gvDetail$ctl08$ctl01" type="text" title="试卷成绩" /></td>

中的事件<input onblur="validate()">

那么这些事件怎么动态嵌入到html中呢?

解决方案: 

1、首先通过写js脚本将'<a'替换为 '<a onclick="validate()" '

2、后台在数据绑定是调用替换脚本 injectJavascript(id);

注意:js只能嵌到,<td>....</td>之间,

因为在C#中使用 GridView.Rows[index].Cells[index].ClientID,而不能使用GridView.Rows[index].ClientID

至于为什么,没有找到,经验不足啊。

sample :

js脚本

function injectJavascript(id)   //在id控件中的<a>注入onclick事件的js
{
	var oldHtml = window.document.getElementById(id.id).innerHTML; //获取控件下的Html
	//注释:这个地方为什么要用双id(id.id)我也没有弄太明白,没有深究,有时间再看看
	//		使用时用单id提示 can't read property 'innerHTML' of null(chrome自带的js调试器)
	//		这应该视情况而定的吧,也许跟我传入的id有关
	var arrayHtml = oldHtml.split('<a');    //拆分字符串
	var script = "alert("嵌入成功");"     //真正需要执行的脚本或js的自定义函数,也许可使用外部脚本,没有试过
	var injection = arrayHtml[0];       //拼接
	for (var i = 1; i < arrayHtml.length; i++) {
		if (arrayHtml[i].indexOf('onclick') == -1) {    //嵌入的事件
			injection += " <a onclick=\"" + script + "\" " + arrayHtml[i];  //嵌入事件的相应代码
		}
		else {
			injection += " <a " + arrayHtml[i];
		}
	}
	window.document.getElementById(id.id).innerHTML = injection;          //注入Html
}

后台 C#


//嵌入的位置千奇百样,根据自己的需要在合适的地方嵌入
protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
	if (e.Row.RowType == DataControlRowType.Pager)
	{	//对换页的页号嵌入控件js脚本
		string script = "<script>injectJavascript(" +e.Row.Cells[0].ClientID + ");</script>";
		//注意这传入的id。如果id无效会出现js脚本中注释的错误
		if (!Page.ClientScript.IsStartupScriptRegistered("click"))
		{
			Page.ClientScript.RegisterStartupScript(this.GetType(), "click", script);
		}      
	}
}


参考:http://www.cnblogs.com/ltenai/archive/2007/06/27/797179.

http://blog.youkuaiyun.com/hanxcloveyou/article/details/3057505











                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值