1

それぞれの子テーブルが表示されるように、 jTableの行全体をクリック可能にしようとしています。Jules Colles ( here ) による行のクリック イベント用の素敵なコード スニペットを見つけましたが、メソッドをそれと統合する方法がわかりませんopenChildTable。私の試みたコードは次のとおりです。

  <div id="UsernameTable"></div>

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

      $('#UsernameTable').jtable({
        title: 'Username Table',
        paging: true,
        sorting: true,
        defaultSorting: 'Name ASC',
        openChildAsAccordion: true,
        actions: {
            listAction: 'doStuff.php?action=list'
        },
        fields: {
          ID: {
            key: true,
            create: false,
            edit: false,
            list: false
          }
          Name: {
            title: 'Name',
            width: '25%'
          },
          Comment: {
            title: 'Comment',
            width: '50%'
          },
          Date: { 
            title: 'Date',
            width: '25%',
            type: 'date',
            create: false,
            edit: false
          }
        },
        recordsLoaded: function(event, userData) {
          $('.jtable-data-row').click(function() {
            var row_id = $(this).attr('data-record-key');
            //alert('clicked row with id '+row_id);
            $('#UsernameTable').jtable('openChildTable', row_id, {
              actions: {
                  listAction: 'doStuff.php?action=listChild&ID=' + userData.record.ID
              },
              fields: {
                  ID: {
                      type: 'hidden',
                      defaultValue: userData.record.ID
                  },
                  SecondKey: {
                      key: true,
                      create: false,
                      edit: false,
                      list: false
                  },
                  DOB: {
                      title: userData.record.Name + '\'s Date of Birth',
                      width: '25%',
                      type: 'date'
                  },
                  Hometown: {
                      title: 'Hometown',
                      width: '50%',
                      type: 'textarea'
                  },
                  Age: {
                      title: 'Age',
                      width: '25%'
                  }
                }
              }, function (data) {
                  data.childTable.jtable('load');
            });
          });
        }
      });
    });
  </script>

私は他のすべてを個別にテストしたので、PHP と MySQL がすべて正常に動作していることがわかります。display:また、列を追加し、トグル ボタンを使用して子を表示するという従来の方法で機能することも確認しました。しかし、ここでも、行の任意の場所をクリックして、新しいテーブルを展開できるようにしたいと考えています。どんな助けでも大歓迎です。

4

2 に答える 2

0

選択オプションをメイン テーブルに追加し (selecting: true)、selectionChanged 関数を使用する必要があります。このコールバック内で、'selectedRows' を使用して子を開くことができます (multipleselect がアクティブでない場合は簡単です)。

selectionChanged: function () {
   $selectedRows.each(function () {             
   // Open child stuff
   });
},

それがあなたに役立つことを願っています

于 2014-02-05T15:59:11.290 に答える