Question

我有一个带表的jsp页面。我在表格中有两个链接，用于编辑和删除。当我单击删除链接时，会出现一个弹出窗口，当我确认删除时，我需要将页面转移到其动作类。以下是代码的各个部分。 jsp页面：

<%-- 
Document   : newjsp1
Created on : 4 Dec, 2015, 9:49:07 AM
Author     : najee
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>

    <%-- other codes here  --%>
    <table class="table">
        <thead>
            <tr>
                <th> Employee ID </th>
                <th> First Name </th>
                <th> Second Name </th>
                <th> Date of Birth </th>
                <th> Emirates Id </th>
                <th> Type Of Employee </th>
                <th style="width: 3.5em;"></th>
            </tr>
        </thead>
        <s:iterator value="empco">

            <tr>

                <td><s:property value="e_id"/></td>
            <td><s:property value="fname"/></td>
            <td><s:property value="sname"/></td>
            <td><s:property value="birthdate"/></td>
            <td><s:property value="emiratesid"/></td>
            <td><s:property value="typeofemployee"/></td>
            <td>
            <s:url var="IdValue" action="EditStaffDetails"><s:param name="IdValue"><s:property value="e_id"/></s:param></s:url><a href="${IdValue}"><i class="fa fa-pencil"></i></a>
            <a href="#myModal" role="button" data-toggle="modal"><i class="fa fa-trash-o" ></i></a> <%-- delete link --%>
            </td>
            </tr>
        </s:iterator> 
    </table>
    <%-- other codes here  --%>

    <div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Delete Confirmation</h3>
                </div>
                <div class="modal-body">
                    <p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the user?<br>This cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <form action="deleteEmployee" method="post">    
                        <input type="hidden" name="employeeId" value="<s:property value="e_id"/>" />
                               <input type="submit" value="Delete" name="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>

 <%-- other codes here  --%>

</body>

当我单击行中的删除链接时，我想将相应列Employee Id中的值传递给弹出窗口中的输入框employeeId。

感谢您的帮助！

Answer 1

在触发具有id值的模态的链接中放置属性data-id，将click事件绑定到该链接并将数据传递给模态隐藏输入

<table class="table">
    <thead>
        <tr>
            <th> Employee ID </th>
            <th> First Name </th>
            <th> Second Name </th>
            <th> Date of Birth </th>
            <th> Emirates Id </th>
            <th> Type Of Employee </th>
            <th style="width: 3.5em;"></th>
        </tr>
    </thead>
    <s:iterator value="empco">

        <tr>

            <td><s:property value="e_id"/></td>
        <td><s:property value="fname"/></td>
        <td><s:property value="sname"/></td>
        <td><s:property value="birthdate"/></td>
        <td><s:property value="emiratesid"/></td>
        <td><s:property value="typeofemployee"/></td>
        <td>
        <s:url var="IdValue" action="EditStaffDetails"><s:param name="IdValue"><s:property value="e_id"/></s:param></s:url><a href="${IdValue}"><i class="fa fa-pencil"></i></a>
        <a href="#myModal" data-id="${IdValue}" role="button" data-toggle="modal"><i class="fa fa-trash-o" ></i></a> <%-- delete link --%>
        </td>
        </tr>
    </s:iterator> 
</table>
<%-- other codes here  --%>

<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Delete Confirmation</h3>
            </div>
            <div class="modal-body">
                <p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the user?<br>This cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <form action="deleteEmployee" method="post">    
                    <input type="hidden" name="employeeId" value="null" />

                           <input type="submit" value="Delete" name="Submit" />
                </form>
            </div>
        </div>
    </div>
</div>

JS：

$('a[href="#myModal"]').on('click',function(){
   var id = $(this).attr('data-id');
  $('input[name="employeeId"]').val(id);
});

http://jsfiddle.net/ttdswa2e/

或：

$('#myModal').on('show.bs.modal',function(e){
       var id = $(e.relatedTarget).attr('data-id');
      $('input[name="employeeId"]').val(id);
    });

http://jsfiddle.net/z9eqxhey/

传递值从链接弹出窗口

1 个答案: