前一阵子,有位仁兄问我:“怎么样得到点击某节点时击发一个返回服务器处理的事件?”
我给了他以下函数,并告知他TreeView的AutoPostBack一定要打开(值为True):
private void TreeView1_SelectedIndexChange(object sender, Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs e)
{
TreeNode node=new TreeNode();
node=TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex);
string sIndex;
sIndex = TreeView1.SelectedNodeIndex;
if (sIndex.IndexOf(".")>=0 )
{
sIndex = sIndex.Substring(0,sIndex.LastIndexOf("."));
}
InitTree(node,sIndex);
}
事后,没几天,他又问:“为什么点击已经选过的节点没有反应?怎么解决?急急急...........”
其实这是TreeView的一个BUG,SelectedIndexChange是节点索引的改变事件,如果某个节点已经被选中,那它就不能触发该事件,那怎么解决呢?
我们来看看TreeView控件在前台生成的代码吧:
<tvns:treeview id="TreeView1" selectedStyle="background-color:blue;" selectedNodeIndex="0" HelperID="__TreeView1_State__" systemImagesPath="/webctrl_client/1_0/treeimages/" onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)" onfirequeuedevents="javascript: window.setTimeout('__doPostBack(\'TreeView1\',\'\')', 0, 'JavaScript')" style="background-color:YellowGreen;height:362px;width:112px;">
其中有一个触发该事件的函数就是queueEvent(,),看到触发条件没有:if (event.oldTreeNodeIndex != event.newTreeNodeIndex),我们现在是(event.oldTreeNodeIndex == event.newTreeNodeIndex),怎么办?
别急,我们自己给它加上一个onclick事件来调用该函数就OK了,注意里面的参数也要变喔,否则会出错滴。看看我的代码先:
在后台page_load区加入:
TreeView1.Attributes["onclick"] = "javascript: if(this.clickedNodeIndex != null)this.queueEvent('onselectedindexchange', '' + ',' + this.clickedNodeIndex)";
强调:其中的if(this.clickedNodeIndex != null)要有,否则你点在TreeView除节点以外的地方一样会触发该事件,而函数会找不到节点的索引值的。
深入探讨:
.net的后台代码经服务器编译后发送到客户端,生成相应的脚本,它的返回都是靠前台事件启动的,来让我们看看它在前台都生成了什么。
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["Form1"];
}
else {
theform = document.Form1;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
看到没有,它生成了两个隐藏的input,它是用来干什么的呢?告诉你吧,它们一个是用来暂存触发事件的控件的ID的,另一个则是用来暂存触发时的参数的,前台事件会把这两个参数传给__doPostBack()函数,而真正起作用的正是这个__doPostBack()函数,如果我们自己给它加上一个调用的事件,比如:TextBox1.Attributes["onclick"] = "__doPostBack(Button1,'')",那它不仅可以返回服务器处理,还能调用其它控件的特有函数呢。这样你能做些什么改变自己去想想吧,不过我要说明一点,这个__doPostBack()函数不是每次后台编译都生成,拉出一个TreeView或者DataGrid它就会有,如果没有也不用急,我们可以在后台添加它。