Question

因此DataTables API有一个父/子方法。我的目标是尽可能地将其转化为流星式的方式。这是指向网页的链接 - ＆gt; https://datatables.net/examples/api/row_details.html

到目前为止，我唯一能够添加带绿色+加号的圆圈。这是一个屏幕截图 - ＆gt; http://postimg.org/image/l48bfikjf/

由于我使用流星的东西可能会有所不同，所以我在点击事件上遇到错误，基本上我得到的表是未定义的，尽管我定义了它。以下是我试图转变为数据表父/子方法的流星代码的要点 - ＆gt;

＆＃13;

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

  var Tabular = null;

  if (Package['nicolaslopezj:tabular-materialize']) {
      Tabular = Package['nicolaslopezj:tabular-materialize'].Tabular;
  }

  if (Package['aldeed:tabular']) {
      Tabular = Package['aldeed:tabular'].Tabular;
  }

  if (!Tabular) {
    throw new Meteor.Error('orion', 'You must install tabular to use this package');
  }

var table = orion.pages.tabular = new Tabular.Table({
    name: 'PagesIndex',
    collection: orion.pages.collection,
    order: [[1, "desc"]],
    // autoWidth: false,
    columns: [
      {
        className:      'details-control',
        orderable:      false,
        data:           null,
        defaultContent: ''
      }, 
      { data: 'title', title: i18n('pages.schema.title')},
      { data: 'url', title: i18n('pages.schema.url'), render: function(val, type, doc) { return '<a href="' + RouterLayer.pathFor('page', doc) + '">' + RouterLayer.pathFor('page', doc) + '</a>'; } },
      { data: 'position', title: 'Order',
          render: function( val, type, doc) {
            return '<input data-id="' + doc._id + '" type="number" value="' + val + '" class="order-pages">'
          }
      }, 
      { data: 'actions', orderable: false, title: 'Actions',
          render: function (val,type,doc){
            return '<a href="' + Router.path('pages.update', doc) +'" class="btn waves-effect waves-light light-blue accent-4 user-btn-action">Edit</a>'
          },
         tmpl: Meteor.isClient && Template.actionBtns
      }
    ]
  });

Template.orionMaterializePagesIndex.onRendered(function(){
  $('.table').on('click', 'td.details-control', function () {
  
    console.log(table);
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
  });
});

＆＃13;

也许其中一位经验丰富的开发人员可以调试我在绿色圆圈上的点击事件中遇到错误的问题？

DataTables：我收到table.row不是函数，而使用meteor的结果：表格

0 个答案: