4

Tenho uma tabela e estou tentando criar um menu de ação ao clicar botão direito em cada row da tabela.

Está funcionando parcialmente o problema que não consigo fazer o script selecionar o menu de contexto para cada linha ele está pegando sempre o último.

Criei um fiddle para facilitar os testes do script e vou postar o código abaixo também:

<style type="text/css">
    .skills {
        background: #A6A6A5;
        padding: 20px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("table").contextmenu({
            delegate: "tbody tr",
            menu: ".table tbody tr .skills:first-child"
        });
    });
</script>

<h1>Shao Kan Game World</h1>

<!-- Os dados na tabela são ficticios e nao tem intencao de insultar os personagens -->

<table class="table table-bordered table-hover table-striped" style="width: 500px; margin: 0 auto;">
    <thead>
        <tr>
            <th>Personagem</th>
            <th>Poder</th>
            <th>Actions</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Luke</td>
            <td>Espadinha</td>
            <td class="skills">
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>SABRE DE LUZ</li>
                </ul>
            </td>
        </tr>

        <tr>
            <td>Robocop</td>
            <td>Metralhadora</td>
            <td class="skills">
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>BAZUCAAAA</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

O que preciso é ao clicar sobre o Robocop ele exibir a UL que contém Bazuca e ao clicar sobre o Luke ele exibir o Sabre de Luz.

1
  • 1
    vlw pela edição @brasofilo!
    – Trxplz0
    Commented 22/08/2014 às 21:27

4 Respostas 4

4

Usando o exemplo do @Peoplee, adaptei para automatizar o processo assim:

$('td.ativar').each(function(){
    $(this).contextmenu({
        menu: $(this).next().next().children('ul') // podemos usar jQuery aqui
    });
});

Coloquei a classe ativar nos <td>'s Luke e Robocop, e o menu vai ser definido através de um objeto jQuery usando o <ul> filho do segundo next(td).

Obs.: a classe skills está sendo usado no <td> e no <ul> e isso parece problemático. Removi do <td> no meu exemplo.

$('td.ativar').each(function(){
  $(this).contextmenu({
    menu: $(this).next().next().children('ul')
  });
});
.skills {
    background: #A6A600;
    padding: 20px;
}
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js"></script>
    
  <h1>Shao Kan Game World</h1>

<table class="table table-bordered table-hover table-striped" style="width: 500px; margin: 0 auto;">
    <thead>
        <tr>
            <th>Personagem</th>
            <th>Poder</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ativar'>Luke</td>
            <td>Espadinha</td>
            <td>
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>SABRE DE LUZ</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td class='ativar'>Robocop</td>
            <td>Metralhadora</td>
            <td>
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>BAZUCAAAA</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

2
  • Obrigado pela ajuda!
    – Trxplz0
    Commented 22/08/2014 às 23:57
  • Poderia colocar $(this).parent().find('ul.skills'); para ser mais automatizado, pois assim se adicionar mais colunas (td) não será necessário atualizar o Javascript.
    – KaduAmaral
    Commented 10/10/2014 às 20:49
3

Você não pode usar a mesma configuração para definir dois menus diferentes, você terá que criar um para cada menu diferente.

Isso ocorre porque o contextmenu usa um seletor para definir qual menu será usado, e não tem como você diferenciar qual menu será usado em um seletor. Veja no código do plugin: jquery.ui-contextmenu.js linha 124

Uma solução rápida seria essa: http://jsfiddle.net/0t9e19rp/2/

2

Melhorando a resposta do @brasofilo, o processo não precisa de classes adicionais além da classe .table-context na tabela (resposta Peoplee) e por linha, pegando sempre a última coluna como menu de contexto (resposta Brasofilo).

$(".table-context tbody tr").each(function() {
    var element = $(this);

    element.contextmenu({
       menu: element.children("td:last").children("ul")
    });
});
1
  • Perfeito, sabia que tinha jeito de simplificar :)
    – brasofilo
    Commented 25/08/2014 às 12:56
-1

Simplesmente remova :first-child em menu:

$(document).ready(function () {
    $("table").contextmenu({
        delegate: "tbody tr",
        menu: ".table tbody tr .skills"
    });
});

JsFiddle atualizado

1
  • 1
    Não da certo, fica 1 sobre o outro já tentei também!
    – Trxplz0
    Commented 22/08/2014 às 21:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .