使用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.youkuaiyun.com/hanxcloveyou/article/details/3057505