реализовать свертывание кода для отчета с помощью jquery - PullRequest
Новая
       23

реализовать свертывание кода для отчета с помощью jquery

1 голос
/ 19 апреля 2010

Я пытаюсь свернуть или развернуть строки таблицы с помощью знака + и - в первом столбце, используя jquery. 

<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");

   });


});

Я пытаюсь использовать этот код. Но я хочу, чтобы ребенок родителя, на которого я нажимаю в одиночку, был переключен. Есть идеи как это сделать?

Пример HTML 

<table>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>

</table>

Редактировать: я пытаюсь поместить изображение + или - в той же строке, что и строка 1, строка 4, и пытаюсь получить дескриптор этого в сценарии Java для переключения между двумя изображениями. Кто-нибудь может мне помочь в этом?

Редактировать 1: можно ли свернуть все дерево при загрузке документа. Я начинающий с использованием XQuery.

Ответы [ 3 ]

1 голос
/ 19 апреля 2010

(в ответ на измененный код)

Существует два способа: либо изменить код, чтобы переключать только строки, следующие за нажатым заголовком: 

$("tr.header").click(function () { 
  $(this).nextUntil(".header").slideToggle("fast");
});

или используйте оригинальный код и перенесите разделы в TBODY: 

<table>
  <tbody>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>
  </tbody>
</table>
1 голос
/ 11 мая 2010

Взгляните на это, чтобы включить переключатель изображения:

Использование JQuery для поиска следующей строки таблицы

Я включил его в код, которым поделился Уманг, и похоже, что это работает для переключения изображение, а также строки под ним.

$ (документ) .ready (function () {

// Это свернет строки при начальной загрузке страницы $ ("tr.header"). nextUntil (". header"). slideToggle ("fast", function () { }); // end slideToggle

// Это расширит свернутую строку и переключит + и - изображения $ ("tr.header"). click (function () {

   $(this).nextUntil(".header").slideToggle("fast", function () { 
   }); //end slideToggle

   if ( ( $(this).hasClass('hidden') ) ) {
     $('img', this).attr("src", "plus.gif");
     $('img', this).attr("alt", "Click to expand row");
  } else {
     $('img', this).attr("src", "minus.gif");
     $('img', this).attr("alt", "Click to collapse row");
  }

   $(this).toggleClass('hidden');
   $(this).parent().next().toggle();

}); // конец клика

}); // конец document.ready

Вот связанный HTML, но вам придется удалить комментарии HTML вокруг тега img потому что это просто для того, чтобы не допустить, что stackoverflow думает, что я публикую реальное изображение.

1 строка 1 2 line2 3 line3 4 строка4 5 line5 6 line6
0 голосов
/ 19 апреля 2010

Ваш текущий код разворачивает / сворачивает дочерний элемент родительской строки. В вашем примере он сворачивает обе дочерние строки (data1, data2 и data3, data4)

Вы пытаетесь достичь чего-то другого здесь?

Umang

...