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却很容易搞定。
  • 多一项技能,有时候就是多一条活路。多会一门语言,有时候就是多打开一扇理解的天窗。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券