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

使用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('ctl00$Body$gvDetail','Edit$7')">修改</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.csdn.net/hanxcloveyou/article/details/3057505