TreeView结合UpdatePanel使用时，SelectedNodeStyle不生效的解决方案

在某些时候，使用UpdatePanel可以极大的提升开发效率并且获得比较好的用户体验，尤其是做SharePoint开发时。老早就看过MSDN上申明UpdatePanel对TreeView不支持，前段时间在使用时，果然不行，比如选择了某节点但是选择样式压根就不起作用。但是我一向是有问题就解决问题，没问题找问题，抱着这种心态，总算解决了该问题。下面说下解决方案吧：

 

   1: <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
   2: <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
   3: <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
   4:     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
   5: <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
   6: <%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
   7: <%@ Import Namespace="Microsoft.SharePoint" %>
   8: <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
   9:     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  10: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BusinessContactsUserControl.ascx.cs"
  11:     Inherits="SP_FuDeng.WebParts.BusinessContacts.BusinessContactsUserControl" %>
  12: <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
  13: <style>
  14:     .HeaderStyle td
  15:     {
  16:         cursor: pointer;
  17:     }
  18:     
  19:     .Current
  20:     {
  21:         background-color: rgb(240, 131, 0);
  22:     }
  23:     .txt
  24:     {
  25:         width: 96%;
  26:         margin: 0px 2px 0px 2px;
  27:     }
  28:     .SelectedNodeStyle
  29:     {
  30:         color: #003687;
  31:         border: solid 1px #71a9ff;
  32:         background-color: #c6ddff;
  33:         padding: 2px 2px 2px 2px;
  34:     }
  35: </style>
  36: <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
  37: </asp:ScriptManagerProxy>
  38: <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  39:     <tr>
  40:         <td id="leftlist" class="leftbg" valign="top" width="180">
  41:             <div style="width: 175px; overflow: auto; height: 470px;">
  42:                 <asp:TreeView ID="tv_Orgs" runat="server" OnSelectedNodeChanged="tv_Orgs_SelectedNodeChanged"
  43:                     ImageSet="Simple" NodeIndent="10">
  44:                     <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
  45:                     <NodeStyle Font-Bold="false" Font-Names="Verdana" Font-Size="12px" ForeColor="Black"
  46:                         HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px"/>
  47:                     <ParentNodeStyle Font-Bold="False" />
  48:                     <SelectedNodeStyle Font-Size="14px" ForeColor="#DD5555"
  49:                         HorizontalPadding="5px" VerticalPadding="0px" CssClass="SelectedNodeStyle" />
  50:                 </asp:TreeView>
  51:             </div>
  52:         </td>
  53:         <td valign="top">
  54:             <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="upInfo" runat="server">
  55:                 <ProgressTemplate>
  56:                     <div style="width: 100%; text-align: center;">
  57:                         <strong><span style="font-size: 20px; color: Blue;">正在加载数据，请稍后...</span></strong>
  58:                     </div>
  59:                 </ProgressTemplate>
  60:             </asp:UpdateProgress>
  61:             <asp:UpdatePanel ID="upInfo" runat="server">
  62:                 <ContentTemplate>
  63:                     <table border="0" cellspacing="0" width="100%">
  64:                         <tr>
  65:                             <td class="rt_dh">
  66:                                 <%--<div class="search_bg">
  67:                                     <asp:TextBox runat="server" CssClass="search" ID="txtSearch" />&nbsp; <a runat="server"
  68:                                         onserverclick="btnSearch_ServerClick" id="btnSearch">
  69:                                         <img align="absmiddle" border="0" src="/images/search.png" /></a>
  70:                                 </div>--%>
  71:                                 <table border="0" cellpadding="0" cellspacing="1" class="table" id="tbContacts" style="border: 1px solid rgb(240, 131, 0);">
  72:                                     <%-- <tr>
  73:                                         <td colspan="5" style="text-align: right">
  74:                                             <asp:ImageButton ID="ImageButton1" ImageUrl="/images/search.png" OnClick="btnSearch_ServerClick"
  75:                                                 runat="server" />
  76:                                         </td>
  77:                                     </tr>--%>
  78:                                     <tr class="HeaderStyle">
  79:                                         <td style="width: 95px;">
  80:                                             <span>英文名</span>
  81:                                         </td>
  82:                                         <td style="width: 69px">
  83:                                             <span>姓名</span>
  84:                                         </td>
  85:                                         <td style="width: 69px">
  86:                                             <span>员工编号</span>
  87:                                         </td>
  88:                                         <td>
  89:                                             <span>邮箱</span>
  90:                                         </td>
  91:                                         <td style="width: 99px">
  92:                                             <span>手机</span>
  93:                                         </td>
  94:                                         <td style="width: 107px">
  95:                                             <span>座机</span>
  96:                                         </td>
  97:                                         <td>
  98:                                             <span>部门</span>
  99:                                         </td>
 100:                                     </tr>
 101:                                     <tr class="HeaderStyle">
 102:                                         <td style="width: 95px;">
 103:                                             <asp:TextBox runat="server" ID="txtDisplayName" Width="86" CssClass="txt" />
 104:                                         </td>
 105:                                         <td style="width: 69px">
 106:                                             <asp:TextBox runat="server" ID="txtChineseName" Width="60" CssClass="txt" />
 107:                                         </td>
 108:                                         <td style="width: 69px">
 109:                                             <asp:TextBox runat="server" ID="txtEmployeeNo" Width="60" CssClass="txt" />
 110:                                         </td>
 111:                                         <td>
 112:                                             <asp:TextBox runat="server" ID="txtEmail" CssClass="txt" />
 113:                                         </td>
 114:                                         <td style="width: 99px">
 115:                                             <asp:TextBox runat="server" Width="90" ID="txtCellPhone" CssClass="txt" />
 116:                                         </td>
 117:                                         <td style="width: 107px">
 118:                                             <asp:TextBox runat="server" Width="98" ID="txtExtensionNo" CssClass="txt" />
 119:                                         </td>
 120:                                         <td>
 121:                                             <asp:ImageButton ID="ImageButton2" ImageUrl="/images/search.png" OnClick="btnSearch_ServerClick"
 122:                                                 runat="server" />
 123:                                         </td>
 124:                                     </tr>
 125:                                     <asp:Repeater runat="server" ID="rptContacts">
 126:                                         <ItemTemplate>
 127:                                             <tr class='<%# Container.ItemIndex%2==0?"AlternatingRowStyle": "RowStyle"%>' onmouseout="changeback(this);"
 128:                                                 onmouseover="changeto(this);">
 129:                                                 <td style="width: 95px;">
 130:                                                     <a href="javascript:void(0);" onclick='<%# string.Format("ShowMyWin(\"{0}\",\"/_LAYOUTS/extend/ShowInfo.aspx?username={1}\");",Eval("DisplayName"),Server.UrlEncode(Eval("EmoloyeeADAccount").ToString())) %>'>
 131:                                                         <%# Eval("DisplayName") %></a>
 132:                                                 </td>
 133:                                                 <td style="width: 69px">
 134:                                                     <%# Eval("ChineseName") %>
 135:                                                 </td>
 136:                                                 <td style="width: 69px">
 137:                                                     <%# Eval("EmployeeNo") %>
 138:                                                 </td>
 139:                                                 <td>
 140:                                                     <%# Eval("Email") %>
 141:                                                 </td>
 142:                                                 <td style="width: 99px">
 143:                                                     <%# Eval("CellPhone") %>
 144:                                                 </td>
 145:                                                 <td style="width: 107px">
 146:                                                     <%# Eval("ExtensionNo")%>
 147:                                                 </td>
 148:                                                 <td>
 149:                                                     <%# Eval("department")%>
 150:                                                 </td>
 151:                                             </tr>
 152:                                         </ItemTemplate>
 153:                                     </asp:Repeater>
 154:                                 </table>
 155:                                 <div class="meneame">
 156:                                     <webdiyer:AspNetPager ID="anp_DataPages" runat="server" PageSize="10" OnPageChanged="anp_DataPages_PageChanged"
 157:                                         CustomInfoHTML="第%CurrentPageIndex%页，共%PageCount%页，每页%PageSize%条" ShowCustomInfoSection="Left">
 158:                                     </webdiyer:AspNetPager>
 159:                                 </div>
 160:                             </td>
 161:                         </tr>
 162:                     </table>
 163:                 </ContentTemplate>
 164:                 <Triggers>
 165:                     <asp:AsyncPostBackTrigger ControlID="tv_Orgs" EventName="SelectedNodeChanged" />
 166:                 </Triggers>
 167:             </asp:UpdatePanel>
 168:         </td>
 169:     </tr>
 170: </table>

后台代码如下：

   1: protected void tv_Orgs_SelectedNodeChanged(object sender, EventArgs e)
   2: {
   3:     BindData(true);
   4:     ScriptManager.RegisterClientScriptBlock(upInfo, upInfo.GetType(), Guid.NewGuid().ToString("N"), @"
   5:     $(function(){
   6:         $('#leftlist td.SelectedNodeStyle').removeClass('SelectedNodeStyle').find('a.SelectedNodeStyle').removeClass('SelectedNodeStyle');
   7:         $('#'+" + tv_Orgs.ClientID + @"_Data.selectedNodeID.value).parent().addClass('SelectedNodeStyle');
   8:     })", true);
   9: }

从上面可以看出，关键代码在后台注册JS，其中 $('#'+" + tv_Orgs.ClientID + @"_Data.selectedNodeID.value).parent().addClass('SelectedNodeStyle');是比较重要的，这个“tv_Orgs.ClientID + @"_Data.selectedNodeID.value”，是在TreeView向客户端注册的js中找出来的，是用来获取选择节点的ID，有兴趣的可以看看微软有关TreeView的JS，没压缩的。

这里顺便说下，UpdatePanel结合Menu时，也会存在问题，比如菜单显示不出来，这个原因是Menu菜单的JS未注册，可以先移除UpdatePanel，找出Menu注册JS的那几个链接，然后手动加到页面上即可。

在UpdatePanel中使用某些控件时，你可能会遇到很多杂七杂八的问题，遇到了请不要慌，其实仔细琢磨下，都是有解决方案的。

说几个感受：

  • 有问题并不可怕，可怕的是没有解决方案。
  • 很多后台解决不了或者很难解决的问题，使用前台JS却很容易搞定。
  • 多一项技能，有时候就是多一条活路。多会一门语言，有时候就是多打开一扇理解的天窗。
时间： 2024-10-12 02:41:39

TreeView结合UpdatePanel使用时，SelectedNodeStyle不生效的解决方案的相关文章

jquery.validate使用时遇到的问题

  这篇文章主要介绍了jquery.validate使用时遇到的问题的解决方法的汇总,真是应了那句老话,会者不难难者不会,这里记录一下,有需要的小伙伴可以参考下. 问题一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <script src="../js/jquery.js"></s

设定的按钮在界面运行使用时出现错误

问题描述 设定的按钮在界面运行使用时出现错误 10C 其catlog中的代码:05-11 03:07:40.315 15986-15986/org.crazyit.multithreadclient W/System.err﹕ java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.os.Handler.sendMessage(android.os.Message)' on a null

tab（标签）在使用时的禁忌

回国正好赶上百度用户体验部主办的 UXday 活动,我们小组讨论的话题是tab(标签)在使用时的禁忌. 我们讨论的话题集中在一个点上:如何处理海量的tab? 首先回顾一下Tab的历史.这里的tab,是一类交互元素的统称,既包括在web设计中的导航,也包括在浏览器等桌面软件中的使用.被称为tab的交互元素一般有如下两个特性: 同时具有动作和状态两个含义.tab之所以流行,一个原因就是因为它既方便操作,同时又能够让用户清楚地知道自己目前在哪个位置(tab) 从信息架构的角度来看,tab之间的内容一般

Lua math.fmod使用时的小数问题

  这篇文章主要介绍了Lua math.fmod使用时的小数问题,math.fmod用于取模运算,使用小数时可能会遇到不可预料的结果,所以应该避免使用小数,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 lua math.fmod使用注意小数: --Returns the remainder of the division of x by y. function math.fmod (x, y) end

QQ输入法手机版在酷派D530使用时如何删除自造词

  QQ输入法手机版在酷派D530使用时删除自造词的方法如下: 自造词目前可以清空,但暂不支持逐项删除,更多功能请留意后续版本的更新.

php的crc32函数使用时需要注意的问题

  这篇文章主要介绍了php的crc32函数使用时需要注意的问题(不然就是坑) ,需要的朋友可以参考下 前几天写了一个分表程序,用的hash算法是crc32.分表的函数如下: 复制代码 代码如下: function _getHash($username) { $hash = crc32($username) % 512; return $hash; } function _getTable($username) { $hash = self::_getHash($username); retur

酷盘使用时是否必须安装酷盘客户端

酷盘使用时不一定要安装酷盘客户端,可以随时通过酷盘网站m 上传下载文件.如果上传下载较大量的文件,推荐使用客户端,保证更快速稳定的传输.另外,如果希望在手机上使用酷盘,也可以安装酷盘客户端.

Python中运算符使用时的优先级

  这篇文章主要介绍了讲解Python中运算符使用时的优先级,是Python学习当中的基础知识,需要的朋友可以参考下 运算符优先级来确定条件的表达式中的分组.这会影响一个表达式如何计算.某些运算符的优先级高于其他;例如,乘法运算符的优先级比加法运算更高. 例如x=7 + 3* 2;这里,x被赋值13,而不是20,因为运算符*的优先级比+更高,所以它首先乘以3 * 2,然后加7. 这里,具有最高优先级运算符出现在表格上方,那些最低的显示在底部.在一个表达式,更高的优先级运算符将首先计算. 例如:

电脑正常使用时提示Windows主进程已停止工作如何解决

  电脑正常使用时提示Windows主进程已停止工作如何解决          1.打开C盘--Windows--System32; 2.找到rundll32.exe文件; 3.右击rundll32.exe,选择"属性" 4.点击切换到"安全"; 5.点击"编辑"按钮; 6.勾选完全控制--允许,点击确定即可; 7.或者从其他正常使用的电脑中拷贝C:/windows/system32下的rundll32文件,并粘贴到有问题电脑的相同目录下替换即可