Twitter Bootstrap 테이블 셀에 collapse.js 사용 [거의 완료]

Twitter Bootstrap 테이블 셀에 collapse.js 사용 [거의 완료]

---

거래 (크레딧 및 차변)를 나열하는 계정 페이지에서 작업 중입니다. 사용자가 테이블 행을 클릭하면 확장되어 더 많은 정보가 표시되기를 바랍니다.

나는 트위터 부트 스트랩을 사용하고 있으며 문서를 살펴 봤는데 이것이 내가 가진 결과입니다.

<table class="table table-striped" id="account-table">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

참조 : http://jsfiddle.net/2Dj7Y/

유일한 문제는 잘못된 위치에 "드롭 다운 정보"가 표시된다는 것입니다. 테이블 상단에 인쇄하는 대신 새 행을 추가하고 싶습니다.

나는 또한 새 테이블 행을 추가하려고 시도했습니다 (행만 표시하고 축소 작업은 없음 (첫 번째 행에만 적용됨))

 <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
            <td>1</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.00</td>
             <tr id="demo1" class="demo out collapse"> 
                    <td>1</td>
                    <td>05 May 2013</td>
                    <td>Credit Account</td>
                    <td class="text-success">$150.00</td>
                    <td class="text-error"></td>
                    <td class="text-success">$150.00</td>
                </tr>    

        </tr>

http://jsfiddle.net/ypuEj/ 참조

건배, 도와 주셔서 감사합니다

---

아직 이걸 지나쳤는지 모르겠지만 오늘 매우 비슷한 작업을해야했고 여러분이 묻는 것처럼 바이올린이 작동하도록했습니다. 기본적으로 그 아래에 다른 테이블 행을 만들고 아코디언을 사용했습니다. 제어. 나는 단지 붕괴를 사용해 보았지만 그것을 작동시킬 수 없었고 아코디언을 사용하는 어딘가에서 예제를 보았다.

다음은 업데이트 된 바이올린입니다. http://jsfiddle.net/whytheday/2Dj7Y/11/

여기에 코드를 게시해야하므로 접을 수있는 각 "섹션"이 어떻게 생겼는지->

<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
    <td>1</td>
    <td>05 May 2013</td>
    <td>Credit Account</td>
    <td class="text-success">$150.00</td>
    <td class="text-error"></td>
    <td class="text-success">$150.00</td>
</tr>

<tr>
    <td colspan="6" class="hiddenRow">
        <div class="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>

---

Tony의 대답을 확장 하고 Dhaval Ptl의 질문에 대답 하여 진정한 아코디언 효과를 얻고 한 번에 하나의 행만 확장 할 수 있도록 show.bs.collapse에 대한 이벤트 처리기를 다음과 같이 추가 할 수 있습니다.

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

I modified his example to do this here: http://jsfiddle.net/QLfMU/116/

---

If you're using Angular's ng-repeat to populate the table hackel's jquery snippet will not work by placing it in the document load event. You'll need to run the snippet after angular has finished rendering the table.

To trigger an event after ng-repeat has rendered try this directive:

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');
            });
        }
    }
}
});

Complete example in angular: http://jsfiddle.net/ADukg/6880/

I got the directive from here: Use AngularJS just for routing purposes

ReferenceURL : https://stackoverflow.com/questions/16389775/twitter-bootstrap-use-collapse-js-on-table-cells-almost-done