Question

在我的meteor应用程序中，我有下表，它包含在数据表中）：

<template name="IntroductionWizard_Step_2">
   <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Introduction Wizard Step 2: </h3>
                        <h3>Select an Application to describe</h3>
                    </div>
                    <table class="table table-hover table-bordered" id="apptable">
                        <thead>
                            <tr>
                            <th>App ID</th>
                                <th>App Name</th>
                                <th>In Scope</th>
                                <th>App Owner</th>
                                <th>BU</th>
                            </tr>
                        </thead>

                        <tbody>
                            {{#each appList}}
                                {{>appRow}}
                            {{/each}}
                        </tbody>
                    </table>
                    <br />

                </div>
                <br/>
            </div>
        </div>
    </div>
</template>

<template name="appRow">
     <tr>
     <td>{{AppId}} </td>
        <td>{{AppName}} </td>
        <td>{{InScope}} </td>
        <td>{{AppOwner}}</td>
        <td>{{Bu}}</td>
     </tr>
</template>

以下是此数据表的处理程序：

Template.IntroductionWizard_Step_2.rendered = function(){
  console.log('wizard.js: IntroductionWizard_Step_2 is rendered');

  /* Init the table */
    oTable = $('#apptable').dataTable( );

$("#apptable tbody tr").on('click',function(event) {
    $("#apptable tbody tr").removeClass('row_selected');    
    $(this).addClass('row_selected');
  });  
}

我的问题是：如何捕获所选/单击的表格行的值？

Answer 1

首先，您可能希望使用Meteor's own template helpers而不是jQuery事件处理程序。但无论如何，在click事件处理程序中，event.target对象应引用被点击的tr。

因此，您需要做的就是更新appRow模板，以便每个tr代码都包含id或data-someIdentifierOfYourChoosing属性，其中包含_id或您尝试跟踪该行的其他标识符。然后在处理程序中，$(event.target).prop('id')或$(event.target).data('someIdentifierOfYourChoosing')应该检索它。

编辑以下是一个示例（未经测试）：

<template name="appRow">
  <tr data-mongoId="{{_id}}">
    <td>{{AppId}}</td>
    <td>{{AppName}}</td>
    <td>{{InScope}}</td>
    <td>{{AppOwner}}</td>
    <td>{{Bu}}</td>
  </tr>
</template>

和

Template.appRow.events({
  "click tr": function (event) {
    var theRowThatWasClicked = event.target;
    var mongoIdOfThatRow = $(event.target).data("mongoId");
    // Then do whatever you want with those values; update the database, etc.

    // Copying/updating your code from your comment for completeness:
    var aPos = oTable.fnGetPosition(event.target);
    var aData = oTable.fnGetData(aPos[0]);
    var value = fnGetSelected( oTable ).AppName;
    console.log(aData);
    $("#apptable tbody tr").removeClass('row_selected');
    $(event.target).addClass('row_selected');
  });

另请参阅Meteor文档的Live HTML templates部分。

带有DataTables的Meteor app：如何捕获所选表行的值

1 个答案: