前一阵子,有位仁兄问我:“怎么样得到点击某节点时击发一个返回服务器处理的事件?”
我给了他以下函数,并告知他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控件在前台生成的代码吧:
1<tvns:treeview helperid="__TreeView1_State__" id="TreeView1" oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" onfirequeuedevents="javascript: window.setTimeout('__doPostBack(\'TreeView1\',\'\')', 0, 'JavaScript')" onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)" selectednodeindex="0" selectedstyle="background-color:blue;" style="background-color:YellowGreen;height:362px;width:112px;" systemimagespath="/webctrl_client/1_0/treeimages/">
2
3其中有一个触发该事件的函数就是queueEvent(,),看到触发条件没有:if (event.oldTreeNodeIndex != event.newTreeNodeIndex),我们现在是(event.oldTreeNodeIndex == event.newTreeNodeIndex),怎么办?
4别急,我们自己给它加上一个onclick事件来调用该函数就OK了,注意里面的参数也要变喔,否则会出错滴。看看我的代码先:
5在后台page_load区加入:
6TreeView1.Attributes["onclick"] = "javascript: if(this.clickedNodeIndex != null)this.queueEvent('onselectedindexchange', '' + ',' + this.clickedNodeIndex)";
7强调:其中的if(this.clickedNodeIndex != null)要有,否则你点在TreeView除节点以外的地方一样会触发该事件,而函数会找不到节点的索引值的。
8
9深入探讨:
10.net的后台代码经服务器编译后发送到客户端,生成相应的脚本,它的返回都是靠前台事件启动的,来让我们看看它在前台都生成了什么。
11<input name="__EVENTTARGET" type="hidden" value=""/>
12<input name="__EVENTARGUMENT" type="hidden" value=""/>
13<script language="javascript">
14<!--
15function __doPostBack(eventTarget, eventArgument) {
16var theform;
17if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
18theform = document.forms["Form1"];
19}
20else {
21theform = document.Form1;
22}
23theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
24theform.__EVENTARGUMENT.value = eventArgument;
25theform.submit();
26}
27// -->
28</script>
29看到没有,它生成了两个隐藏的input,它是用来干什么的呢?告诉你吧,它们一个是用来暂存触发事件的控件的ID的,另一个则是用来暂存触发时的参数的,前台事件会把这两个参数传给__doPostBack()函数,而真正起作用的正是这个__doPostBack()函数,如果我们自己给它加上一个调用的事件,比如:TextBox1.Attributes["onclick"] = "__doPostBack(Button1,'')",那它不仅可以返回服务器处理,还能调用其它控件的特有函数呢。这样你能做些什么改变自己去想想吧,不过我要说明一点,这个__doPostBack()函数不是每次后台编译都生成,拉出一个TreeView或者DataGrid它就会有,如果没有也不用急,我们可以在后台添加它。</tvns:treeview>