屏蔽TreeView服务器端事件,添加有效的客户端事件


2008-1-15 17:02 .Net,Javascript&jQuery 2个评论1967

最近项目需要使用TreeView,客户说点击一下刷屏很不爽,查了查TreeView,发现MS居然不提供客户端响应事件的功能,也就说一定要使用服务器端响应事件,这个白痴的MS,很多时候TreeView是不需要服务器响应的,居然把什么都做到服务器中去,想考验服务器的水平啊。
先是到网上找了一大堆资料,结果发现都不能解决问题,过程就不说了,结果才是别人的,过程就留给自己吧。最后还是自己想办法,基本的思路是从客户端相办法。在客户端用javascript把树的节点链接中的onclick及href给替换掉,有了这个思路就好解决了。看代码:

     var treeView = document.getElementById("<% = this.treeClass.ClientID %>");  //获取容器对象
     var items = treeView.getElementsByTagName("A");  //获取所有A的tag(也就是链接了)
   //循环替换
     for(var i = 0; i < items.length; i++)
     {
         var eventStr = items[i].href;
        //要判断链接中是否包含TreeView_ToggleNode,因为TreeView_ToggleNode这个函数是负责折叠的,所以不能置空
         if (eventStr.indexOf("TreeView_ToggleNode") == -1)
         {
             items[i].onclick = "";   //将链接的onclick事件置空
             items[i].href = "###";
         }
     }

然后我们在创建树的时候:

 TreeNode  node = new TreeNode();
 node.Value = value;
 node.Text = string.Format(
 "<span onclick="return ClickNode('{0}','{1}', this)">{0}</span>", 
 text, value);

这里的ClickNode就是客户端的JS代码了,你可以以任何的代码替代。实际上原理很简单:

  1. 通过TreeView的客户端ID,获取该容器下的所有链接
  2. 循环屏蔽节点的链接A的事件(onclick)及href
  3. 在链接的文本(最终输出<a></a>中间的内容)加入<span onclick=Event>Text</span>

说明:今天发现了一个方法,就是把node的SelectAction设置为TreeNodeSelectAction.Expand或者TreeNodeSelectAction.None可以解决这个问题,我为我自己的无知向读者道歉,并为自己未了解TreeView的功能而向微软抱怨及大放厥词感到羞愧。我决定不删除这篇文章,以警示我在以后的道路上谨慎求知。

无觅相关文章插件,快速提升流量

嗯,或者你也可以收听我的微博,腾讯微博(主要用这个,其他的看我的个人介绍)

我写博客常常出现错别字,常常错得还很离谱,有时候我自己看了第二遍都骂我自个儿,但我又不习惯重复审查,纠结啊...各位看到啥错别字或者不明白的地方,请给我留言指出来,感谢感谢。

  

  • 2个评论在 "屏蔽TreeView服务器端事件,添加有效的客户端事件"

  • xieyuanchang
    2009-11-17 17:13
    回复TA

    我的想法正好相反,我想让它响应事件,但是它没有做到。特来拜读你的文章

    • 涂雅
      2009-11-18 13:53
      回复TA

      你是要响应客户端的自定义事件吧,其实响应与屏蔽Treeview事件,只要把服务器的事件禁止,然后加上html标签,再在标签中加上js的事件就可以了,原理是一样的,希望你可以解决这个问题。

  • 评论敬告那些为做SEO而评论的朋友,本博不欢迎此类评论,请不要利用本博做关键字,一律封杀。

    绝不跨省追捕
    不会发垃圾邮件
    增加你的流量