1

Often I have a table or a list, and I want to create an event when a given row is clicked, and do something specific to the clicked row. To do so, I have been defining data() within click(). Sometimes I just send a piece of data and other times I send the entire row.

Is the way I am doing this the best way, or is there a better way? Is it best to send just the required data to the dialog, or send the entire object over (i.e. row in my case) and extract data within the dialog?

Thanks

$("#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 回答