4

目标

我有一个带有项目表的网页。每个项目旁边都有一个删除按钮。单击该按钮时，我想

  • 要求用户确认
  • 从数据库中删除相应的项目
  • 从列表中删除该项目的行

当前解决方案

现在，我正在做这样的事情：

$('button.delete').click(function(){
  thisRow = $(this).parent();
  itemID = $(this).parent().attr('id');
  if (confirm('Are you sure?')){
   $.post('/manage_items.php', {"action":"delete", "itemid":itemID}, function(){
     thisRow.hide("slow").remove();
   });
  } 
}

该解决方案之所以有效，是因为每个button.delete人都可以确定它属于哪一行和哪一项，并采取相应的行动。

所需的解决方案

我想使用 jQuery UI 对话框，而不是笨拙的“确定或取消”警报框。但我不确定如何让对话框知道在任何给定的点击时它应该处理哪一行和哪一项。

以下是您的设置方式：

1）定义一个对话框div

<div class="dialogbox" id="confirmdeleteitem" title="Really DELETE this item?">
   <p>Gee golly, are you s-s-s-sure you want to do that?!</p>
</div>

2）设置对话框行为

$('#cofirmdeleteitem').dialog({
    //other options - not relevant here
    buttons: {
        "Nevermind": function() {
            //do nothing
        },
        "Alright! Woo!": function(){
            //do something
        }
    }
});

3）设置将打开对话框的点击事件

$('button.delete').click(function(){
    $('#confirmdeleteitem').dialog('open');    
});

在这最后一步中，我希望能够将一些信息传递给对话框——例如，单击了哪个删除按钮。但我看不出有办法做到这一点。

我可以div.dialog在前面的每个项目行中插入一个隐藏对话框，或者在单击其按钮后将一个隐藏对话框插入到特定行中。然后$(this).parent()引用将抓住正确的行......

有没有更简单的方法来做到这一点？

4

5 回答 5

2

最终在 click 函数本身中设置对话框行为是最直接的。实际上，它与我原来的例子并没有太大的不同。

$('button.delete').click(function(){
    thisRow = $(this).parent().parent();
    thisRow.css("background-color","red");
    skuid = $(this).parent().parent('tr').attr('id').substr(5);
    $('#dialogbox').dialog({
      autoOpen: false,
      modal: true,
      draggable: true,
      width: 600,
      buttons: {
        "Actually, I can just mark it inactive": function() {
          thisRow.css("background-color","inherit");
          $(this).dialog("close");
        },
        "This SKU needs to be deleted": function() {
          $.post('/intranet/backstage/modify_sku_info.php', {"action":"delete", "skuid":skuid}, function(result){
            thisRow.hide("slow").remove();
          });
          $(this).dialog("close");
        }
      }
    });
    $('#dialogbox').dialog('open');
    return false;
  });

由于在被调用div#dialogbox之前不会被隐藏$('#dialogbox').dialog()，我只是给它一个内联样式display:none.

如果我最终需要一些可以概括的东西，就像hyun建议的那样，我会重新讨论这个问题。

于 2009-12-14T22:57:46.250 回答
2

我做这样的事情：

        function ConfirmationDialog(title, question, options) {
            var d = $('<div title="' + title + '"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + question + '</p></div>');
            d.dialog({
                bgiframe: true,
                resizable: false,
                height: 190,
                width: 350,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: options
            });
        }

然后从点击事件中调用我的函数。

于 2009-12-14T19:45:22.333 回答
1

您可以将行存储在全局变量中，如下所示：

var deletingId;
$('button.delete').click(function() {
    deletingId = $(this).parent().attr('id');

    $('#confirmdeleteitem').dialog('open');    
});
$('#confirmdeleteitem').dialog({
    //other options - not relevant here
    buttons: {
        "Never mind": function() { },
        "Alright! Woo!": function(){
            $.post(
                '/manage_items.php', 
                { action: "delete", itemid: deletingId },
                function() {
                    $('#' + deletingId).hide("slow").remove();
                }
            );
        }
    }
});

这仅在对话框为模态时才有效；否则，用户可能会单击两个不同的删除链接，并且您需要多个对话框。

于 2009-12-14T19:40:36.693 回答
0

为什么你不能只调用一个设置方法来构建你认为合适的对话框？

setupMyDialog( '#confirmdeleteitem', info1, info2 ); 
$('#confirmdeleteitem').dialog...

或者，在显示对话框之前将信息存储在全局空间中。请记住，您的 javascript 变量可以具有全局范围，或者您可以在对象/函数（只是对象）上任意存储信息。

myDataStore = {};

myDataStore.row = foo;
myDataStore.col = bar;
于 2009-12-14T19:42:45.300 回答
0

您可以将“rel”属性添加到对话框并将其存储在那里。这样您就不必担心全局变量，而且它在语义上还不错，因为您正在定义对话框和行之间的关系。所以它只是 $('#confirmdeleteitem').attr('rel', $(this).parent().attr('id').dialog('open');

于 2009-12-14T19:52:08.167 回答