Meteor 和 Bootstrap 表,如何调用 detailFormatter 函数

Meteor and Bootstrap table, How to call detailFormatter function

本文关键字:调用 detailFormatter 函数 何调用 Bootstrap Meteor      更新时间:2023-09-26

我正在使用引导表

1:http://bootstrap-table.wenzhixin.net.cn/。我已经添加了这个包来导入引导表。

     <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="answerswer" data-sortable="true">answer</th>
        <th data-field="category" data-visible="true" data-tableexport-display="always">category</th>
    </tr>
    </thead>
</table>

它工作正常,但我有一个 detailFormatter 函数,必须调用它来创建行详细信息内容。 基本上我试图实现 这个

所以在我的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=="answerswer") {
                        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('');
        }

}

当通过 HTML 定义时,我在 rowStyle 中遇到了类似的问题。解决方案是通过 JS 将函数传递给表。这同样适用于需要传递给引导表的任何函数。

例如:

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