renrenqian123 2010-03-31 09:52
浏览 307
已采纳

jsp页面到js,使用jquery显示详细信息

[size=medium][b]我现在想做一个功能,就是在displaytag的“显示详情”这列,鼠标上移就显示相应productId对应产品的详细信息。

想在displaytag的“查看详情”这一列跳到js文件,该怎么写?和js文件中的这句话:var as = $("a[name=showProductDetail]");有关系吗?我想用a标签过去的。
我这样写能在js当中接收到productId的值吗? 发到对应的action里应该怎么接收呢?

返回的内容可以在对应的showProductInfo div块里显示吗?

新手, 没有什么分数了,还是想请讲的明白点。

jsp页面代码:[/b][/size]

[code="java"]<%@ page contentType="text/html; charset=utf-8" language="java"
import="java.sql.*" errorPage=""%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



rel="stylesheet" />
当前招标项目详情
    <script type="text/javascript" src="../jsx/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript" src="../jsx/dijit/dijit.js"></script>
    <script type="text/javascript" src="../jsx/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../jsx/jquery/jquery.form.js"></script>
    <script type="text/javascript" src="../js/productInfo.js"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"></link>
    <link rel="stylesheet" type="text/css" href="css/infoDiv.css"></link>

</head>

<body>
    <div id="body">
        <div id="info">
            <!--客户当前招标项目详细资料-->
            <display:table name="bidDetailList" id="bidDetail" pagesize="5"
                requestURI="showBidAndTenderInfos.action?bidId=${bidDetail.bidId}">
                <display:column property="bidId" title="招标项目编号" sortable="true" />
                <display:column property="productId" title="产品编号" sortable="true" />
                <display:column property="productNum" title="产品数量" sortable="true" />
                <display:column title="查看详情">
                                        </display:column>
            </display:table>

            <div id="showProductInfo">
                    正在载入产品信息... 
            </div>
        </div>
</body>

[/code]

以下是productInfo.js:
[code="java"]$(document).ready(function () {
var infoNode = $("#showProductInfo");
var as = $("a[name=showProductDetail]");
infoNode.hide();

as.mouseover(function (event) {
    var aNode = $(this);
    var productId = aNode.attr("productId");
    var myEvent = event || window.event;
    infoNode.css("left", myEvent.clientX - 50 + "px").css("top", myEvent.clientY + 20 + "px");
    var url = "showProductInfo.action?productId=" + productId;
    $.get(url, null, function (data) {
        infoNode.html(data);
        infoNode.show();
    });
});
as.mousemove(function (event) {
     var myEvent = event || window.event;
     infoNode.css("left", myEvent.clientX - 50 + "px").css("top", myEvent.clientY + 20 + "px");
});

as.mouseout(function () {
    infoNode.hide();
});

});[/code]

action部分代码:
[code="java"]public String showProductInfo() throws Exception{

    int productId=Integer.parseInt(request.getParameter("productId"));

    this.productInfo = this.projectService.findProductInfobyProductId(productId);
    StringBuilder result=new StringBuilder();
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out=response.getWriter();
    if (productInfo!= null) {
         result.append("类型:"+productInfo.getType()+"<br>");
         out.println(result);
    }
    else
    {
         out.println("wu");
    }
    return null;
}[/code]
  • 写回答

2条回答 默认 最新

  • wshwrf 2010-04-04 08:25
    关注

    JQ我已经N久没用了,不是很熟悉了,不过
    infoNode.html(data);这句不是已经把东西传回来了?难道你没有看到结果?
    var productId = aNode.attr("productId");这个有值不?
    你查看,1>JS里有没有URL,是不是完整的,
    2>Action里有没有得到参数,你想打印,DEBUG随便,能让你知道就行.
    3>Action返回后,JS的DATA有没有东西Alert看看,或是DEBUG.
    如果这些都正常.那剩下的infoNode.html不就可以了.

    正在载入产品信息...

    好像是这样的:有一堆链接.然后你鼠标放上一个链接,就到服务器里搜索,然后结果返回,在鼠标附近显示这个DIV是不是,这个DIV默认的定位方式,好像是根据它的父结点,的,所以鼠标移动跟它没关系.改下CSS,position=absolute绝对定位,才可以移动:


    或是你的nfoNode.css("left", myEvent.clientX - 50 + "px").css("top", myEvent.clientY + 20 + "px").css("position","absolute");
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制