javascript - jQuery-JTable:通过单击父行打开子表？

Question

我正在尝试在 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: 添加列并使用切换按钮显示子项的传统路线是否有效。但是，我真的希望能够单击行上的任意位置并让它展开一个新表格。任何帮助将不胜感激。

Answer 1

您必须将选择选项添加到主表(选择:true)并使用selectionChanged函数。在此回调中，您可以使用“selectedRows”打开子项(如果 multipleselect 未激活，则更容易)

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

希望对你有用