用jQuery为我的webPart设置效果时出现的问题及解决方法.

最近一直在搞MOSS开发,天天忙得没头没脑的,也没来得及整理一下开发和学习方面的东西.今天遇到一个搞笑的问题,于是记录一下.

前几天写了一个webPart用来输出新闻列表,webPart本身倒没什么,是用QuickPart和UserControl来弄的,在UserControl中有一个GridView,然后把取到的SPList的数据作为GridView的数据源.很简单.

但是,因为是门户站点,这个webPart在首页上可能会出现N次,为了速度着想,就把GridView改成html代码来完成了,也就是把SPList列表中取到的数据直接用<div><ul><li><span> 来写,然后在ascx页面上直接输出.格式如下:

     < div  class = "" >
         < ul >
             < li  class = "" >                                               //<li>充当行  
                 < span  class = "" >   < img  />      </ span >            //<span>充当列
                 < span  class = "" >   < a ></ a >      </ span >
                .
             </ li >             
            ..
         </ ul >
     </ div >

这倒也没什么,很简单.

然后,想要对这些行和列进行一些操作,比如,对行可能会要求能够呈现斑马线效果等,对列呢,则是要求可以定制的显示哪几列.

于是我就想到可以用js来完成,最熟悉的是jQuery,就用他了,所以给<li><span>分别设置了class属性,以便jQuery中取到他们,然后直接设置奇数行的background就可以实现斑马线,对某一列设置为hide就可以让他不显示,OK.也没问题.

 

结果今天我在首页同时加入两个这个webPart 就出问题了:因为,我为了让这个webPart可以复用,所以class这个属性不是写死的,而是作为一个EditorPart属性提供给用户的,也就是说,这N个class的值是用变量的,这样你每个使用此webPart的地方都可以设置不同的CSS样式,结果就是这个地方出问题了:

ascx页面要得到当前EditorPart中用户设置的CSS样式,所以要写成类似这样:

 var titleCSS = "<%=BodyTitleSpanCSS%>";

来取得样式,然后才能在jQuery中得到该CSS样式代表的Html节点,

如果只是使用一个这个webPart倒不会出问题,但如果页面中同时写了多个此webPart,那么每个webPart实例都会有一个:

var titleCSS = "<%=BodyTitleSpanCSS%>";

 这样一来,该出现的效果就没了,或者是只有第一个加进来的webPart才会有效果,其他的都没有.

 

想了半天,没解决,问老大,于是解决如下.

在后台代码里设置clientId.这个ClientId是唯一的,哪怕是生成Html后也是唯一的.

然后在声明变量的时候,变量名写成动态的:

var <%=strClientID%>_titleCSS = "<%=BodyTitleSpanCSS%>";

这样的话,即使首页使用了多个该webPart,每个webPart的clientId不一样,也就不会出现var的变量名相同导致的问题了.

 

生平第一次知道,声明变量时,变量名都可以是动态的....汗!!!

叽里咕噜估计也没讲清楚.记录一下了.