web-dev-qa-db-ja.com

折りたたみ可能なテーブル行を作成する

私はDrupal 7テーブルを作成しようとしています。私は本当に質問されたことを実行したいと思っています https://stackoverflow.com/questions/801082/ how-to-implement-collapsible-table-rows-in-javascript

私は単にDrupal 7を形に曲げようとしています。遠くに、余分な「セクション」行を含むテーブルを作成し、HTMLクラスを割り当てました。折りたたむ行のID私の問題は、これを実行するために必要なJavaScriptとCSSです。

私の行は次のように作成されます：

foreach($results as $row) {
  ...
  if($row_needs_section_header) {
    $section_number++;
    $rows[] = array(
      'data' => array("Section $section_number"),
      'class' => (array('class' => 'collapsitablesection')),
      'id' => "collasitableheader$section_number",
    );
  }
  $rows[] = array(
    'data' => array(
       $column_1,
       $column_2,
       ...
    ),
    'id' => "collapsitable$section_number",
    'class' => array('class' => 'collasitable')),
  );
}

これは適切なHTMLを生成しているようで、折りたたまれる各行はセクション番号を含む「ID」にあり、「折りたたみ可能」のクラスも持っています。

「misc/collapse.js」を複製しようとしていますが、フィールドセットを操作する代わりに、特別なテーブル行を操作します。私はこれで途方に暮れています。次にどこへ行くかについて誰かが何か考えを持っていますか？

7javascripttheming
3
Ralph Bolton

次のように nextUntil() jQuery関数を使用できます。

(function ($) {
  Drupal.behaviors.collapsibleTable = {
    $('tr.collapsitablesection').toggle(
      function() {
        $(this).nextUntil('tr.collapsitablesection').hide();
      },
      function() {
        $(this).nextUntil('tr.collapsitablesection').show();
      }
    ).click();
  };
})(jQuery);

テーマのscript.jsにこれを追加します。新しいものを追加しない場合は、ドキュメントを参照してください。 テーマの.infoファイルの使用（Drupal 6および7） 。

4
tostinni

Tostinniの回答を改訂したので、セクションを定義するために2番目の折りたたみセクションの行は必要ありません。

ここにあるのは、メインの行（can-collapse-sectionクラス）です。クリックすると、その行の下のサブ行（can-collapse-rowクラス）の表示が切り替わります。

また、両方の状態に font-awesome アイコンを追加して、行を展開できる/展開されていることを示します。

(function($, Drupal) {
// Allows collapse of table rows with the can-collapse-row class
// Toggle is provided by the first row above with the can-collapse-section class
Drupal.behaviors.collapsibleTable = {
    attach: function(context, settings) {
        $('tr.can-collapse-section').toggle(
                function() {
                    $(this).nextUntil(':not(tr.can-collapse-row)').hide();
                    $(this).find("i").removeClass('icon-caret-down').addClass('icon-caret-right');
                },
                function() {
                    $(this).nextUntil(':not(tr.can-collapse-row)').show();
                    $(this).find("i").removeClass('icon-caret-right').addClass('icon-caret-down');
                }
        ).click();
    }
};

}（jQuery、Drupal））;

0
Whiskey