关于Struts2: 在 s:iterator中 动态插入内容 的问题

时间:2021-04-25 18:37:11
     <s:iterator value="pm.datas" id="msg"> 
          <p> 主题: 
          <s:property value="title"></s:property>
        &nbsp;发表于&nbsp;
          <s:property value="date"></s:property>
        &nbsp;by&nbsp;
          <s:property value="user.username"></s:property>
        &nbsp;&nbsp;
          <a href="" onclick="return toReply(${msg.id});">
  <font size="2pt" color="#EE4000">
           回复该留言</font></a></p>
   <p> 内容: 
           <s:property value="content"></s:property></p>
        <div id="replyarea"></div>
        <hr><br/>
        </s:iterator> 


       上面是一段 遍历容器代码,使用 Struts2 的 s:iterator 标签。你可能看到了, 下面是有一段 
       <div id="replyarea"></div>

       其视图如下:

       主题: XXX  发表于 XXX  回复该留言【超链接】
       内容: XXX

       <div 区域>
             replyarea【当点击“回复该留言”链接时,在这里显示form表单】
       </div 区域>

       我的意图是: 当我点击某条留言的“回复该留言”时,将在该留言“内容”下面的replyarea区域中显示一段form表单。form 表单的编写已经解决。

问题是,当我点击某条留言的“回复该留言时”,  它总是在第一条留言内容的下面显示form表单,而不是在相应留言的内容下面显示。也就是说,form表单的显示位置有问题。

       到底应该怎么做,才能使其在所选择的留言的内容下面的位置上显示form表单? 这个问题似乎与CSS定位有关,但又牵扯到struts标签,因此在这里提问。

       望各位大虾不吝赐教。小弟在线等……

4 个解决方案

#1


当点击回复该留言的时候,得到触发这个事件的对象,然后获得该对象的坐标,你通过计算后,就可以把那个Form定位到触发这个事件的对象之下呀。

#2


问题是,采用什么定位呢? 因为留言内容下面原来是空的, 当点击链接时, 将“凭空”出现一个form 表单, 这个表单有可能覆盖掉下面的留言内容。

采用怎样的定位,才能使表单定位到相应的位置上,同时,使后面的留言自动地向下挪移呢?
绝对定位基本是不可能的; 相对定位的话,我先试试,不知道能不能使后面的留言因为表单的出现而自动向下移动。

#3


还有一种思路就是, 不使用定位技术, 而是使每个迭代元素都有一个<div id="replyarea[i]", class="replyarea">;每个 <div>元素 与 每个被迭代的元素msg 绑定起来。这样,点击每个msg时,可以在对应的迭代元素相应的<div></div> 自动插入 form 表单。 不过这种思想,如何根据迭代的元素标记实现 <div id="replyarea[i]"> 呢?

<div id="replyarea"+"${msg.id}"></div> ? 

然后在 js 中  

var replyarea = document.getElementById("replyarea" + msgId); 这里 msgId = ${msg.id} 可以通过参数传进来?

感觉  CSS 定位还是比较简单, 只要一个 div 元素, 关键是, 如何将 div 定位到相应留言内容的下面,而使后面的留言自动下移(以免生成的form表单覆盖了后面的内容,就不好看了)?

#4


问题解决了。虽然有点笨拙, 呵呵

页面中, <div id="replyarea${msg.id}"></div> 仍然放入 <s:iterator> 里面, 就如上面一样,不过 id 号后面增加了 ${msg.id} 使得每个 div 跟每条留言绑定;

然后在 js 中: 

function toReply(msgId)
{
       var str="";
       str += "<form action='saveReply.action?msgId="+ msgId + "'" + " method='post'>";
       str += "<textarea name='reply.content' id='replytext' col='45' row='10'></textarea>";
       str += "<input type='button' value='取消'> onclick='return cancel(msgId);'>&nbsp;&nbsp;";
       str += "<input type='submit' value='提交' onclick='return validateReply();'>"
       str += "</form>";
       var areapos = "replyarea"+msgId;
       var replyarea = document.getElementById(areapos);
       var replytext = document.getElementById("replytext");
       replyarea.innerHTML = str;  
            
       return false;
 }

return cancel(msgId); 写法有点问题, 不过,大问题已经解决。这个我再纠正一下啊。

#1


当点击回复该留言的时候,得到触发这个事件的对象,然后获得该对象的坐标,你通过计算后,就可以把那个Form定位到触发这个事件的对象之下呀。

#2


问题是,采用什么定位呢? 因为留言内容下面原来是空的, 当点击链接时, 将“凭空”出现一个form 表单, 这个表单有可能覆盖掉下面的留言内容。

采用怎样的定位,才能使表单定位到相应的位置上,同时,使后面的留言自动地向下挪移呢?
绝对定位基本是不可能的; 相对定位的话,我先试试,不知道能不能使后面的留言因为表单的出现而自动向下移动。

#3


还有一种思路就是, 不使用定位技术, 而是使每个迭代元素都有一个<div id="replyarea[i]", class="replyarea">;每个 <div>元素 与 每个被迭代的元素msg 绑定起来。这样,点击每个msg时,可以在对应的迭代元素相应的<div></div> 自动插入 form 表单。 不过这种思想,如何根据迭代的元素标记实现 <div id="replyarea[i]"> 呢?

<div id="replyarea"+"${msg.id}"></div> ? 

然后在 js 中  

var replyarea = document.getElementById("replyarea" + msgId); 这里 msgId = ${msg.id} 可以通过参数传进来?

感觉  CSS 定位还是比较简单, 只要一个 div 元素, 关键是, 如何将 div 定位到相应留言内容的下面,而使后面的留言自动下移(以免生成的form表单覆盖了后面的内容,就不好看了)?

#4


问题解决了。虽然有点笨拙, 呵呵

页面中, <div id="replyarea${msg.id}"></div> 仍然放入 <s:iterator> 里面, 就如上面一样,不过 id 号后面增加了 ${msg.id} 使得每个 div 跟每条留言绑定;

然后在 js 中: 

function toReply(msgId)
{
       var str="";
       str += "<form action='saveReply.action?msgId="+ msgId + "'" + " method='post'>";
       str += "<textarea name='reply.content' id='replytext' col='45' row='10'></textarea>";
       str += "<input type='button' value='取消'> onclick='return cancel(msgId);'>&nbsp;&nbsp;";
       str += "<input type='submit' value='提交' onclick='return validateReply();'>"
       str += "</form>";
       var areapos = "replyarea"+msgId;
       var replyarea = document.getElementById(areapos);
       var replytext = document.getElementById("replytext");
       replyarea.innerHTML = str;  
            
       return false;
 }

return cancel(msgId); 写法有点问题, 不过,大问题已经解决。这个我再纠正一下啊。