Question

经过2天的研究，我决定寻求帮助，因为我无法继续前进。

我在我的网站中显示用户表。每行都有用户数据和删除用户按钮。

如果您按下删除按钮，则必须显示模式，询问您是否要删除该特定用户。这就是为什么我必须发送一个用户名参数。

该模态是图例的确认模式：您确定要删除//用户名//？

问题是我知道如何发送参数但不能将其与jquery删除功能集成。也不清楚如何删除行，因为我真的是js和jquery的新手。

到目前为止，这就是我所拥有的（请注意我使用Smarty模板引擎）：

<tbody>
    {foreach $frontusers as $frontuser}
    <tr>
    {if $frontuser->frontavatar_id eq null}
       <td><img src="{site_url()}assets/img/avatar.png" alt="" /></td>
       {else}
       <td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td>
    {/if}
    <td class="hidden-phone">{$frontuser->username}</td>
    <td>{$frontuser->name}</td>
    <td>{$frontuser->lastname}</td>
    <td class="hidden-phone">{$frontuser->email}</td>
    <td class="hidden-phone">{$frontuser->state}</td>
    <td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td>

    {if $frontuser->status eq 2}
       <td ><span class="label label-success">Activo</span></td>
    {else}
       <td ><span class="label label-warning">No Activo</span></td>
    {/if}

    <td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Modificar</a></td>

    <td><a href="#" data-id="{$frontuser->id}" class="btn mini red-stripe confirm-delete" role="button">Delete</a></td>
    </tr>

    <!-- modal -->
    <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
       <h3 id="myModalLabel3">Delete</h3>
    </div>
    <div class="modal-body">
       <p>Are you sure you want to delete user ....?</p>
    </div>
    <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button data-dismiss="modal" class="btn red" id="btnYes">Confirm</button>
    </div>
    </div>
    <!-- end modal -->

    {foreachelse}
<tr>
       <td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td>
     </tr>
    {/foreach}
</tbody>

这是我的js文件（我是从this link获得的）

$('#myModal3').on('show', function() {
var id = $(this).data('id'),
    removeBtn = $(this).find('.red');
})

$('.confirm-delete').on('click', function(e) {
e.preventDefault();

var id = $(this).data('id');
$('#myModal3').data('id', id).modal('show');
  });

$('#btnYes').click(function() {
// handle deletion here
var id = $('#myModal3').data('id');
$('[data-id='+id+']').remove();
$('#myModal3').modal('hide');
   });

所以，总而言之，我需要调整我的代码来执行以下操作：

将用户名作为参数发送到模态
如果按下确认按钮，则删除整行

更新

模态正在起作用，我的意思是它打开和关闭。 modal的确认按钮仅删除行中的“删除按钮”，而不是整行。

Answer 1

最后可以让它发挥作用。这里有一个简短的版本（没有ajax和聪明且有编码的用户）在线和工作：

http://bootply.com/97366

查看：

<tbody> {foreach $frontusers as $frontuser} <tr> {if $frontuser->frontavatar_id eq null} <td><img src="{site_url()}assets/img/avatar.png" alt="" /></td> {else} <td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td> {/if} <td class="hidden-phone">{$frontuser->username}</td> <td>{$frontuser->name}</td> <td>{$frontuser->lastname}</td> <td class="hidden-phone">{$frontuser->email}</td> <td class="hidden-phone">{$frontuser->state}</td> <td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td> {if $frontuser->status eq 2} <td ><span class="label label-success">Activo</span></td> {else} <td ><span class="label label-warning">No Activo</span></td> {/if} <td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Edit</a></td> //here in data-title i store the username so later i can "catch it" in the jquery function <td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="{$frontuser->username}" data-id="{$frontuser->id}">Delete</a></td> </tr>  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h3 id="myModalLabel3">Delete</h3> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button> <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button> </div> </div>  {foreachelse} //no users are in the db <tr> <td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td> </tr> {/foreach} </tbody>

Js文件：

//after first function is triggered, modal shows and this function runs $('#myModal').on('show', function() { //catch the id for later deletion, and username to display on modal var id = $(this).data('id'), username = $(this).data('usern'); $('#myModal .modal-body p').html("Do you want to delete user: " + '<b>' + username + '</b>' + ' ?'); }) //when clicking "delete" button from a row, this is the first function that runs $('.confirm-delete').on('click', function(e) { e.preventDefault(); //catch the user id and username var id = $(this).data('id'); var user = $(this).data('title'); //assign to the modal id and username $('#myModal').data('id', id).modal('show'); $('#myModal').data('usern', user).modal('show'); }); $('#btnYes').click(function() { var id = $('#myModal').data('id'); //sending to php the row to be deleted from the db $.ajax({ url: 'deleteFrontUser', type: 'POST', data: 'id='+id, success: function(html){ //removing entire row $('[data-id='+id+']').parents('tr').remove(); $('#myModal').modal('hide'); } }); return false; });

将参数发送到模态然后删除行

1 个答案: