0

我正在尝试使用 jQuery 和 dataTables 插件在表格的每一行中添加一个 jQuery 对话框。我想添加特定于每一行的对话框数据。我在其他帖子中看到您可以想到两种方法：1）每行一个对话框。2）所有行只有一个对话框，然后用特定数据填充它。

在这个例子中，我在一个表中有一个课程列表，包括名称（nombre）、代码（codigo）和模式（modo）。对于每一行，都有一个按钮（修饰符），应该显示一个对话框来编辑该课程的数据。当然，在每个对话框中，都必须加载该行的数据。

我的想法（在其他帖子中查看了其他想法）是将对话框放在行内，这样我就可以从该行加载数据。

我创建了一个类（masInfo），并在 Javascript 代码中放置了一个函数，该函数应该在按钮之后打开对话框。但它不起作用。

你有什么主意吗？谢谢。

HTML Y JSP

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link type="text/css"
                href="css/milk.css" rel="stylesheet" />
    <title>Paginadores tablas</title>
    </head>
    <body>
        <%
            CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
            ArrayList<Curso> cursos = catalogoCursos.getCursos();
        %>
        <div id="miTabla">
            <form id="formulario" name="formulario" method="post">
                <table id="tabla">
                    <thead>
                        <tr>
                            <th>Nombre </th>
                            <th>Código </th>
                            <th>Modo de juego </th>
                            <th> Acción </th>
                        </tr>
                    </thead>
                    <tbody>
                    <%
                        for(Curso curso: cursos) {
                    %>
                        <tr>
                            <td><%=curso.getNombre()%></td>
                            <td><%=curso.getCodigo()%></td>
                            <td><%=curso.getStringModo()%></td>
                            <td> 
                                <input type="button" class="masInfo" value="modificar"/>
                                <div title="Modificar curso">
                                    <table>
                                        <tr>
                                            <td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
                                            <td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
                                            <td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
                                        </tr>
                                    </table>
                                </div> 
                            </td>
                            </td>
                        </tr>
                    <%
                        }
                    %>
                    </tbody>
                </table>
            </form>
        </div>

    </body>
    </html>

JAVASCRIPT

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.custom.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript">
    (function($) {
        // Dialog
        $('.masInfo').next().dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Borrar": function() {
                    document.formulario.submit();
                    $(this).dialog("close");
                },
                "Cancelar": function() {
                    $(this).dialog("close");
                }
            }
        });

        // Dialog Link
        $('.masInfo').click(function(){
            $('#dialog').dialog('open');
            return false;
        });
    });
4

1 回答 1

1

您最好只使用一个对话框并在单击按钮时在对话框中填充相关信息。您当前执行此操作的方式将导致大量重复的输入元素。

因此，HTML 看起来像：

<div id="miTabla">
    <table id="tabla">
        <thead>
            <tr>
                <th>Nombre </th>
                <th>Código </th>
                <th>Modo de juego </th>
                <th> Acción </th>
            </tr>
        </thead>
        <tbody>
        <%
            for(Curso curso: cursos) {
        %>
            <tr>
                <td><%=curso.getNombre()%></td>
                <td><%=curso.getCodigo()%></td>
                <td><%=curso.getStringModo()%></td>
                <td> 
                    <input type="button" class="masInfo" value="modificar"/>
                </td>
                </td>
            </tr>
        <%
            }
        %>
        </tbody>
    </table>
</div>
<div title="Modificar curso" id="ModificarDialog">
    <form id="formulario" name="formulario" method="post">
        <table>
            <tr>
                <td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
                <td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
                <td><input type="text" name="mod_modo" id="mod_modo" /></td>
            </tr>
        </table>
    </form>
</div> 
​​​

JavaScript 将更改为：

(function($) {
    // Dialog
    $('#ModificarDialog').dialog({
        autoOpen: false,
        width: 600,
        buttons: {
            "Borrar": function() {
                document.formulario.submit();
                $(this).dialog("close");
            },
            "Cancelar": function() {
                $(this).dialog("close");
            }
        }
    });

    // Dialog Link
    $('.masInfo').click(function(){
        var cells = $(this).parent().find('td');
        $('#mod_monbre').val(cells.eq(0).text());
        $('#mod_codigo').val(cells.eq(1).text());
        $('#mod_modo').val(cells.eq(2).text());
        $('#dialog').dialog('open');
        return false;
    });
});​
于 2012-09-23T11:38:06.733 回答