每个表的行在最后一列包含删除图标。图标包含带有相应数据库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>
答案 0 :(得分:0)
如果不是全部使用$.alert
,则允许使用$.confirm
并将其移至ajax success
函数内,而不是默认调用$.confirm
并发送ajax调用。