javascript - Meteor和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

当通过 HTML 定义 rowStyle 时，我遇到了类似的问题。解决办法是通过JS将函数传给表。这同样适用于任何需要传递给 bootstrap-table 的函数。

例如:

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