Eu estou trabalhando em uma página de contas que lista as transactions (créditos e débitos). Eu gostaria que o usuário pudesse clicar em uma linha da tabela e ela se expandisse mostrando mais informações.
Eu estou usando o twitter bootstrap e examinei a documentação e esse é o resultado que eu tenho
# Date Description Credit Debit Balance 1 05 May 2013 Credit Account $150.00 $150.00 Demo1
Veja: http://jsfiddle.net/2Dj7Y/
O único problema é que ele exibe as “informações suspensas” no lugar errado, eu gostaria de adicionar uma nova linha, em vez de imprimir na parte superior da tabela
- Como exibir uma tree recolhível no AngularJS + Bootstrap
- Alterar o ponto de interrupção de colapso da barra de boot de bootstrap sem usar MENOS
- Bootstrap 3 – desativa o colapso da barra de navegação
- bootsrap nav-bar recolhível não pode fazê-lo funcionar
Eu também tentei adicionar em uma nova linha da tabela (que apenas exibe a linha, e nenhuma ação de recolhimento (aplicado apenas na primeira linha)
1 05 May 2013 Credit Account $150.00 $150.00 1 05 May 2013 Credit Account $150.00 $150.00
Veja http://jsfiddle.net/ypuEj/
Felicidades e obrigado pela vossa ajuda
Eu não tenho certeza se você já passou por isso, mas eu tive que trabalhar em algo muito semelhante hoje e eu tenho o seu violino trabalhando como você está perguntando, basicamente o que eu fiz foi fazer outra linha de tabela sob ele, e então usei o acordeão ao controle. Eu tentei usar apenas colapso, mas não consegui fazê-lo funcionar e vi um exemplo em algum lugar no SO que usava acordeão.
Aqui está o seu violino atualizado: http://jsfiddle.net/whytheday/2Dj7Y/11/
Desde que eu preciso postar código aqui é o que cada “seção” dobrável deve se parecer ->
1 05 May 2013 Credit Account $150.00 $150.00 Demo1
Expandindo a resposta de Tony, e também respondendo à pergunta de Dhaval Ptl, para obter o verdadeiro efeito do acordeão e permitir que apenas uma linha seja expandida por vez, um manipulador de events para show.bs.collapse pode ser adicionado da seguinte forma:
$('.collapse').on('show.bs.collapse', function () { $('.collapse.in').collapse('hide'); });
Eu modifiquei o exemplo dele para fazer isso aqui: http://jsfiddle.net/QLfMU/116/
Se você estiver usando o ng-repeat de Angular para preencher o snippet de jquery do hackel de tabela, não funcionará colocando-o no evento de carregamento de documento. Você precisará executar o snippet depois que o ângulo terminar de renderizar a tabela.
Para acionar um evento após a reprodução do ng-repeat, tente esta diretiva:
var app = angular.module('myapp', []) .directive('onFinishRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } } });
Exemplo completo em angular: http://jsfiddle.net/ADukg/6880/
Eu obtive a diretiva daqui: Use AngularJS apenas para fins de roteamento
Intereting Posts