1

我正在尝试通过以下方式在 jsp 页面中构建项目列表：我有一个 Spring Mvc 控制器，它返回模型中的搜索结果。我可以通过 jsp 中的以下代码访问此模型中的对象：

<c:forEach var="listItem" items="${poiList}">
            <div class="manageListItem">
                <table>
                    <tr>
                        <td><c:out value="${listItem.getName()}"/></td>
                        <td><c:out value="${listItem.getAddress()}"/></td>
                        <td><c:out value="${listItem.getType()}"/></td>
                        <td><c:out value="${listItem.getRating()}"/></td>
                    </tr>
                </table>
            </div>
</c:forEach>

列表打印得很好。但是，我希望每个项目都可以点击并在点击时重定向到某个页面（更像是向控制器发送另一个请求）。

到目前为止，我已经尝试过 jquery，但是如果我不在那里构建列表，我将无法访问请求所需的 listItem 的 ID。如果我能以某种方式将它作为参数传递给 manageListItem div 的 onClich 属性，那就太好了，但这似乎是不可能的。我也可以在 jQuery 中完成所有操作，但这看起来更简洁，而且我不知道如何在 jQuery 中访问模型的属性 :)

实现此功能的最佳方法是什么？

4

4 回答 4

1

您可以在行上放置一个 onclick 侦听器，并且可以像往常一样使用 JSP EL 引用项目 ID。看看这个例子： 

<c:forEach var="listItem" items="${poiList}">
  <div class="manageListItem">
    <table>
      <tr onclick="alert('I clicked on '+${listItem.id});">
        <td><c:out value="${listItem.getName()}"/></td>
        <td><c:out value="${listItem.getAddress()}"/></td>
        <td><c:out value="${listItem.getType()}"/></td>
        <td><c:out value="${listItem.getRating()}"/></td>
      </tr>
    </table>
  </div>
</c:forEach>

你总是可以调用另一个函数，或者在 onclick 部分中有 jQuery 的东西；要点是您可以使用 JSP EL 构建可以对事件做出反应的 javascript 代码。

于 2013-04-14T21:53:53.960 回答
0

如果您没有提到您的浏览器要求是什么，但大多数“现代”浏览器将支持使用data-属性。在你的情况下：

<c:forEach var="listItem" items="${poiList}">
            <div class="manageListItem" data-item-id="${listItem.getId()}">
                <table>
                    <tr>
                        <td><c:out value="${listItem.getName()}"/></td>
                        <td><c:out value="${listItem.getAddress()}"/></td>
                        <td><c:out value="${listItem.getType()}"/></td>
                        <td><c:out value="${listItem.getRating()}"/></td>
                    </tr>
                </table>
            </div>
</c:forEach>

现在，使用jquery data()方法很简单：

$('div.manageListItem').click(function(evt) {
     var id = $(this).data('itemId');
     alert('Huzzah, you clicked on ' + id);
});

仅供参考，如果您创建一个具有名为 属性的元素，则data-my-item-id需要使用 jquery 检索它myItemId。首字母之后的所有内容都data-转换为驼峰式。

于 2013-04-14T22:36:20.833 回答
0 
$(document).on('click', '.manageListItem td', function(e){
    //i think the value is just the text in the TD, no?
    window.location = window.location.protocol + '//' + window.location.host + '?listItemId=' + $(this).text()
});

使用 jQuery .on()，我们可以委托监听静态元素的事件。对于动态元素，这将确保它们仍然可以触发事件。.on()接受 3 个参数：事件、我们想要触发事件的元素，当然还有在事件触发时运行的回调函数。

根据您上面的标记，我假设您在其中打印的值td是您的 listItemId。

线window.location = window.location.protocol + '//' + window.location.host + '?listItemId=' + $(this).text()

会抢协议

http:

然后我们用两个尾部正斜杠连接字符串//（如果没有 http/https，// 在 URL 仍然有效之前）。

然后我们抓取主机位置

stackoverflow.com

然后我们在 TD 内附加一个带有文本的查询字符串。

?listItemId=8

例如，如果您c:out打印了 8，那么整个 url 看起来像

http://stackoverflow.com?listItemId=8

于 2013-04-14T21:00:41.137 回答
0

谢谢你的所有这些想法！

最后，我发现将重定向命令直接写入标签的 onClick 属性是最简单的：

<c:forEach var="listItem" items="${poiList}">
            <div class="manageListItem" onclick="window.location.replace('/poi/display/' + ${listItem.id})">
                <table>
                    <tr>
                        <td><c:out value="${listItem.getName()}"/></td>
                        <td><c:out value="${listItem.getAddress()}"/></td>
                        <td><c:out value="${listItem.getType()}"/></td>
                        <td><c:out value="${listItem.getRating()}"/></td>
                    </tr>
                </table>
            </div>
        </c:forEach>

这样，每个被点击的列表项都会发送一个带有自己 ID 的请求，并且控制器会按预期处理该请求。

于 2013-04-15T18:54:30.057 回答