1

多くの場合、テーブルまたはリストがあり、特定の行がクリックされたときにイベントを作成し、クリックされた行に固有のことをしたいと考えています。そのために、click() 内で data() を定義しています。データの一部だけを送信することもあれば、行全体を送信することもあります。

私がこれを行っている方法は最善の方法ですか、それともより良い方法がありますか? 必要なデータのみをダイアログに送信するか、オブジェクト全体 (つまり、私の場合は行) を送信してダイアログ内でデータを抽出するのが最善ですか?

ありがとう

$("#someTable tbody").on("click", "a.doIt", function() {
    $("#dialog").data('id',$(this).parent().parent().attr('data-id')).dialog("open");
    //$("#dialog").data('id',$(this).parent().parent()).dialog("open");
    return false;
});
$("#dialog").dialog({
    open        : function() {
        alert($(this).data('id')+' is available.');
        //alert($(this).data('row').attr('data-id')+' is available.');
    },
    buttons     : [
        {
            text    : 'CLOSE',
            "class"  : 'gray',
            click    : function() {
                alert($(this).data('id')+' is available.');
                //alert($(this).data('row').attr('data-id')+' is available.');
                $(this).dialog("close");
            }
        }
    ]    
});


<table id="someTable">
    <tbody>
        <tr data-id="123"><td><a href="javascript:void(0)" class="doIt">aaa</a></td><td>bbb</td></tr>
        <tr data-id="321"><td><a href="javascript:void(0)" class="doIt">ccc</a></td><td>ddd</td></tr>
        <tr data-id="111"><td><a href="javascript:void(0)" class="doIt">eee</a></td><td>fff</td></tr>
    </tbody>
</table>
4

1 に答える 1

1

このようにui-dialogのデータを渡すことができます

document.getElementById('dialog-modal').innerHTML = '<span style="font-family:sans-serif;font-size:18px">'+str+'</span>';
    $( "#dialog-modal" ).dialog({
        height: 120,
        modal: true,
        resizable:false,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });
    $(".ui-dialog-titlebar").hide();

必要なIDのinnerHTMLを変更して、ダイアログボックスを開くことができます。

更新しました：

$("#someTable tbody").on("click", "a.doIt", function() {
$("#dialog").html($(this).parent().parent().attr('data-id').html());

$("#dialog").dialog({
        height: 120,
        modal: true,
        resizable:false,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });});
于 2012-11-27T16:49:07.067 に答える