0

jQueryとdataTablesプラグインを使用して、テーブルの各行にjQueryダイアログを追加しようとしています。各行に固有のダイアログ データを追加したい。他の投稿で、次の 2 つの方法が考えられることを見てきました。1) 行ごとに 1 つのダイアログ。2) すべての行に対して 1 つのダイアログのみを作成し、特定のデータを入力します。

この例では、テーブルに名前 (名前)、コード (codigo)、およびモード (modo) のコースのリストがあります。各行には、そのコースのデータを編集するためのダイアログを表示するボタン (modificar) があります。もちろん、各ダイアログで、その行のデータをロードする必要があります。

私のアイデア（他の投稿で他のアイデアを見た）は、ダイアログを行の中に入れて、その行からデータをロードできるようにすることです。

クラス (masInfo) を作成し、Javascript コードで、ボタンの後にダイアログを開く関数を配置しました。しかし、うまくいきません。

何か考えはありますか？ありがとう。

HTMLと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>

ジャバスクリプト

<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

ダイアログを 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 に答える