简化包含不同输入框的jQuery个条件

Question

说明

每个 table 行的最后一列都包含一个删除图标。这些图标用带有相应数据库 ID 的锚标记包裹。用户将单击该图标以删除该特定行（某些 ID 不打算删除，例如系统管理员）。

在某些情况下，用户可以通过开发者工具手动更改 ID。因此，当用户单击该图标时，将触发函数 fn_deleteRow 并调用 ajax GetDelUser。如果用户有权删除，对话框应显示按钮 Yes/No，否则对话框应仅显示带有按钮 Ok 的警告消息。

我的问题

如果用户无权删除某些 ID，在数据库验证后，对话框按钮应该只显示 Ok 而不是 Yes/No。如何使用下面的代码使其动态化？

$(document).ready(function() {
  function fn_deleteRow(id) {
    $.confirm({
      backgroundDismiss: true,
      icon: 'fa fa-exclamation',
      theme: 'modern',
      closeIcon: true,
      animation: 'scale',
      type: 'red',
      content: function() {
        var self = this;
        return $.ajax({
          url: 'action/<?php echo basename(__FILE__);?>',
          dataType: 'json',
          data: 'GetDelUser&id=' + id,
          method: 'post'
        }).done(function(data) {
          console.log(data);
          if (data.status == 'success') {
            self.setContentAppend('<h3>' + data.name + '</h3>');
          } else {
            self.setContentAppend('<div>' + data.message + '</div>');
          }
        }).fail(function() {
          self.setContentAppend('<div>Fail!</div>');
        }).always(function() {
          //self.setContentAppend('<div>Always!</div>');
        })
      },
      contentLoaded: function(data, status, xhr) {
        //this.setContentAppend('<div>Content loaded!</div>');
      },
      onContentReady: function() {
        //this.setContentAppend('<div>Content ready!</div>');
      },
      title: 'Confirm to delete:',
      buttons: {
        'Yes': {
          btnClass: 'btn-red',
          action: function() {
            var self = this;
            self.setContent('Checking callback flow');
            return $.ajax({
              url: 'action/<?php echo basename(__FILE__);?>',
              dataType: 'json',
              data: 'ConfirmDelete&id=' + id,
              method: 'post'
            }).done(function(data) {
              console.log(data);
              self.setContentAppend('<div>Done!</div>');
              $.notify({
                message: data.message
              }, {
                type: data.status,
                placement: {
                  from: "top",
                  align: "left"
                },
                newest_on_top: true,
                delay: 0
              });
              if (data.status == 'success') {
                $('#userTable').DataTable()
                  .row(row.parents('tr'))
                  .remove()
                  .draw();
              }
            }).fail(function() {
              self.setContentAppend('<div>Fail!</div>');
            }).always(function() {
              self.setContentAppend('<div>Always!</div>');
            });
          }
        },
        /*cancel: function () {
          $.alert('Canceled!');
        },*/
        'No': {
          btnClass: 'btn-blue'
        }
      }
    });
  }

  $(document).on("click", ".btnDelete", function(e) {
    e.preventDefault();
    var row = $(this);
    var id = row.attr('id');
    console.log(id);

    fn_deleteRow(id);
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="table-responsive">
  <table id="userTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Status</th>
        <th>Created Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td><a href="user-master-detail.php?id=3">Jeff</a></td>
        <td></td>
        <td></td>
        <td>Active</td>
        <td>2017-11-10 00:00:00</td>
        <td><a href="" class="btnDelete" id="3"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
      </tr>
      <tr>
        <td></td>
        <td><a href="user-master-detail.php?id=2">Wong Ching Chong</a></td>
        <td>myemail@domain.com</td>
        <td>0123456789</td>
        <td>Active</td>
        <td>2017-05-10 12:20:19</td>
        <td><a href="" class="btnDelete" id="2"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
      </tr>
      <tr>
        <td></td>
        <td><a href="user-master-detail.php?id=1">System Administrator</a></td>
        <td></td>
        <td>0198765432</td>
        <td>Active</td>
        <td>2017-03-29 20:34:51</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

在不允许的情况下使用 $.alert，在允许的情况下使用 $.confirm，并将它们移动到 ajax success 函数中，而不是调用 $.confirm默认并发送 ajax 呼叫。

简化包含不同输入框的jQuery个条件

Simplify jQuery conditions that contains different input boxes

html

javascript

jquery

jquery-confirm

说明

我的问题