Метеор и Bootstrap стол, Как вызвать функцию detailFormatter

Question

Я использую Bootstrap table

1: http://bootstrap-table.wenzhixin.net.cn/. Я добавил This Package для импорта Bootstrap-table.

 <table id="table" class="table table-striped" 
     data-toolbar="#toolbar" 
     data-detail-view="true" 
     data-height="460" 
     data-pagination="true" 
     data-search="true" 
     data-sort-name="name" 
     data-sort-order="desc" 
     data-unique-id="id" 
     data-page-list="[10, 25, 50, 100, ALL]" 
     data-detail-formatter="detailFormatter" 
     data-show-export="true" 
     data-show-refresh="true" 
     data-show-columns="true" 
     data-row-style="rowStyle" 
     data-export-types="['csv']"> 
    <thead> 
    <tr> 
     <th data-field="id" data-sortable="true">id</th> 
     <th data-field="question" data-sortable="true">question</th> 
     <th data-field="answer" data-sortable="true">answer</th> 
     <th data-field="category" data-visible="true" data-tableexport-display="always">category</th> 
    </tr> 
    </thead> 
</table> 

Сво работает нормально, но у меня есть функцию detailFormatter, который должен быть вызван для создания строки детализации материала. в основном пытаюсь добиться This

Так что в моих JS, я добавил функцию detailFormatter, но не работаю, поэтому, где я должен поставить detailFormatter функции для работы.

if (Meteor.isClient) { 

function detailFormatter(index, row) { 
alert("detailFormatter 1") 
       var html = []; 
       $.each(row, function (key, value) { 
        console.log("key: "+key); 
        if(key=="answer") { 
         html.push('<p><b>' + key + ':</b> <textarea class="form-control">' + value + '</textarea> </p>'); 
         html.push('<button type=button class=update-btn>Update</button>'); 

        } 
        if(key=="category"){ 


         console.log("category:: "+value) 

         if(value=="application_related"){ 
           html.push('<select class="form-control"><option selected value="application_related">Application Related</option><option value="application_status">Application Status</option></select>'); 
         } else { 
          html.push('<select class="form-control"><option selected value="application_related">Application Related</option><option value="application_status" selected>Application Status</option></select>'); 
         } 

         $('select').first().val("application_status"); 

         //$('select option[value="' + value + '"]') 
        } 
        if(key=="id"){ 
         html.push('<input type="hidden" class="id" value='+ value + '></input>'); 
         console.log("category:: "+value) 
        } 
       }); 
       return html.join(''); 
     } 

}

Answer 1

Я столкнулся с подобной проблемой с RowStyle, когда определяется с помощью HTML. Решение состоит в том, чтобы передать функции в таблицу через JS. То же самое относится к любой функции, которая должна быть передана в bootstrap-таблицу.

Например:

Template.results.onRendered(function(){ 
    this.$('#table').bootstrapTable({detailFormatter : myFormatterFunction, rowStyle : myRowStyleFunction}); 
};