bootstrap 3 确认 cakephp 中的删除模式
Posted
技术标签:
【中文标题】bootstrap 3 确认 cakephp 中的删除模式【英文标题】：bootstrap 3 confirm delete modal in cakephp 【发布时间】：2014-07-21 18:06:28 【问题描述】：嗨，我有一个记录表，其中每一行都有一个删除链接。你会发现 cakephp 用于删除操作：
public function delete($id)
if ($this->request->is('get'))
throw new MethodNotAllowedException();
if ($this->Category->delete($id))
$this->Session->setFlash( 'Votre élément a été supprimé.','default',array(),'success');
return $this->redirect(array('action' => 'index'));
所以当我单击删除按钮时，会显示一个原始的 javascript 确认对话框以确认视图中的删除操作。这是一个包含删除链接的 index.ctp ：
<!--table content-->
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>title</th>
<th>Actions</th>
</tr>
<?php foreach ($categorys as $category): ?>
<tr>
<td><?php echo $category['Category']['title']; ?></td>
<td>
<?php
echo $this->html->link('View',
array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
array('class' => 'btn btn-info btn-sm active')
); ?>
<?php
echo $this->Html->link(
'Edit', array('action' => 'edit', $category['Category']['id']),
array('class' => 'btn btn-primary btn-sm active')
);
?>
<?php
echo $this->Form->postLink(
'Delete',
array('action' => 'delete', $category['Category']['id']),
array('confirm' => 'Do you want really to delete thi element?','class' => 'btn btn-danger btn-sm active')
);
?>
</td>
</tr>
<?php endforeach; ?>
<?php unset($category); ?>
</table>
所以对于我想要的后链接，当我点击链接时，它会显示一个引导确认模式，如下所示：
<!-- Modal -->
<div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Category deletion</h4>
</div>
<div class="modal-body">
Do you really want to delete thi element?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-danger danger">Confirm</a>
</div>
</div>
</div>
</div>
谁能帮我使用 cake php 的 jshelper 来创建一个引导模式对话框而不是默认的。
谢谢。
【问题讨论】：
你用的是什么版本的bootstrap，是bootstrap 3吗？ 【参考方案1】：我编辑我的答案并改进代码
在您的索引页面上而不是 postLink，创建一个将调用模式的按钮或链接，即
<?php
echo $this->Html->link(
$this->Html->tag('i', '', array('class' => 'glyphicon glyphicon-trash')),
'#',
array(
'class'=>'btn btn-danger btn-confirm',
'data-toggle'=> 'modal',
'data-target' => '#ConfirmDelete',
'data-action'=> Router::url(
array('action'=>'delete',$category['Category']['id'])
),
'escape' => false),
false);
?>
在您的模态中添加 postLink 而不是确认消息，而不是消息 put false：
<?php
echo $this->Form->postLink(
'Confirm',
array('action' => 'delete'),
array('class' => 'btn btn-danger btn-sm active'),
false,
)
);
?>
在 bootstrap.js 之后添加这个 js 代码
$(document).ready(function()
$(".btn-confirm").on("click", function ()
var action = $(this).attr('data-action');
$("form").attr('action',action);
);
);
或按照 user1655410 的建议添加此 js 代码
$('#ConfirmDelete').on('show.bs.modal', function(e)
$(this).find('form').attr('action', $(e.relatedTarget).data('action'));
);
【讨论】：
在循环中添加模态并不好。如果有 100 个类别呢？将创建 100 个模态。最好使用ajax。 @Salines 您发送给我的 javascript 代码不起作用它给出了错误 /cateogories/delete 不存在，因为它没有更新帖子表单的操作，所以我使用了这个代码对我来说很好用：$('#ConfirmDelete').on('show.bs.modal', function(e) $(this).find('form').attr('action', $(e. relatedTarget).data('action')); );您应该更新您的帖子以将其作为解决方案 我的 javascript 代码工作正常，将此代码放在加载 jquery 和引导 js 文件之后。这是简短的截屏视频screencast-o-matic.com/watch/c21niLnBGJ。请务必在第一个代码示例中添加 btn-confirm 类。 – 我也将您的代码作为我的答案的解决方案。 是的，对不起，我忘记了 btn-confirm 类，所以你的解决方案也可以。【参考方案2】：AJAX（这更灵活，但下面还有另一个简单的解决方案）： 更新类别列表的视图：将删除链接更改为：//此按钮将触发 ajax 调用，添加 ajx div 和脚本
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>title</th>
<th>Actions</th>
</tr>
<?php foreach ($categorys as $category): ?>
<tr>
<td><?php echo $category['Category']['title']; ?></td>
<td>
<?php
echo $this->Html->link('View',
array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
array('class' => 'btn btn-info btn-sm active')
); ?>
<?php
echo $this->Html->link(
'Edit', array('action' => 'edit', $category['Category']['id']),
array('class' => 'btn btn-primary btn-sm active')
);
?>
<?php
echo $this->Html->link(
'Delete',
"#",
array("class"=>"btn btn-danger delete-btn", "data-id"=>$category['Category']['id'])
);
?>
</td>
</tr>
<?php endforeach; ?>
<?php unset($category); ?>
</table>
//add this div
<div id="ajax_modal"></div>
//add this script
<script type="text/javascript">
$(".delete-btn").click(function()
$.ajax(
type: "POST",
data:
category_id:$(this).attr("data-id"),
,
url: "<?php echo $this->base;?>/categories/ajax_show_delete_modal", //ajax function
success:function(data)
$("#ajax_modal").html(data);
);
);
</script>
在您的类别控制器中添加此功能：
public function ajax_show_delete_modal()
$category_id = isset($_POST['category_id']) ? $_POST['category_id'] : 0;
$this->set("category_id", $category_id);
$this->layout = "ajax";
添加到您的应用程序/视图/类别/：ajax_show_delete_modal.ctp
<div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Category deletion</h4>
</div>
<div class="modal-body">
Do you really want to delete this element?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a href="<?php echo $this->base.'/categories/delete/'.$category_id;?>" class="btn btn-danger danger">Confirm</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#trigger").click();
</script>
另一种解决方案，很简单：
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>title</th>
<th>Actions</th>
</tr>
<?php foreach ($categorys as $category): ?>
<tr>
<td><?php echo $category['Category']['title']; ?></td>
<td>
<?php
echo $this->Html->link('View',
array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
array('class' => 'btn btn-info btn-sm active')
); ?>
<?php
echo $this->Html->link(
'Edit', array('action' => 'edit', $category['Category']['id']),
array('class' => 'btn btn-primary btn-sm active')
);
?>
<?php
echo $this->Html->link(
'Delete',
"#",
array("class"=>"btn btn-danger delete-btn", "data-id"=>$category['Category']['id']) //$category['Category']['id'])
);
?>
</td>
</tr>
<?php endforeach; ?>
<?php unset($category); ?>
</table>
<a data-target="#ConfirmDelete" role="button" data-toggle="modal" id="trigger"></a>
<div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Category deletion</h4>
</div>
<div class="modal-body">
Do you really want to delete this element?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="ajax_button"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".delete-btn").click(function()
$("#ajax_button").html("<a href='<?php echo $this->base;?>/categories/delete/"+ $(this).attr("data-id")+";?>' class='btn btn-danger'>Confirm</a>");
$("#trigger").click();
);
【讨论】：
以上是关于bootstrap 3 确认 cakephp 中的删除模式的主要内容，如果未能解决你的问题，请参考以下文章
cakePHP & Twitter Bootstrap - 查看
cakephp 3如何向paginator排序类添加active？