jquery - 带有数据表的 Meteor 应用程序 : how to capture the value of selected table row

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');
  });

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