Question

我有一个基于javascript的bootstrapTable，可动态生成表和数据。

我在尝试将一些CSS样式和类应用于this question中生成的某些td时遇到问题。我已经意识到我认为我的问题是表没有完全加载导致我的代码无法工作。如果我手动编写表代码，它可以正常工作，但不能动态编写。

我尝试使用load事件等待表加载但似乎无法正常工作

$table.load(function() {
// do something
});

在我做某事之前，为了等待$table完全加载，我需要什么样的jquery？

javascript表

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 3849,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 100,
    pageList: [100, 200, 600, 1000],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'ID',
        title: 'ID',
        align: 'center',
        visible: false
    },{
        field: 'backlink',
        title: 'Backlink',
        align: 'left',
        width: '20'
    },{
        field: 'indexed',
        title: 'PI',
        align: 'center',
        width: '20',
    },{
        field: 'dindexed',
        title: 'DI',
        align: 'center',
        width: '20',
    },{
        field: 'moz',
        title: 'MOZ',
        align: 'center',
        width: '20',
    },{
        field: 'email',
        title: 'EM',
        align: 'center',
        width: '20'
    },{
        field: 'social',
        title: 'SOC+',
        align: 'center',
        width: '20'
    },{
        field: 'whois',
        title: 'WHO',
        align: 'center',
        width: '20'
    },{
        field: 'notes',
        title: 'NT',
        align: 'center',
        width: '20'
    },{
        field: 'removed',
        title: 'RM',
        align: 'center',
        width: '20'
    },{
        field: 'import_label',
        title: 'SR',
        align: 'center',
        width: '20'
    },{
        field: 'important',
        title: 'IM',
        align: 'center',
        width: '20'
    },{
        field: 'refresh',
        title: 'RF',
        align: 'center',
        width: '20',
        class: 'refreshstats'
    },{
        field: 'exempt',
        title: 'EX',
        align: 'center',
        width: '20',
    },{
        field: 'spammy',
        title: 'SP',
        align: 'center',
        width: '20',
    }]
});

Answer 1

尝试

.on('all.bs.table', function (e, name, args) {
                console.log('load-success');
            })

当然，在开启之前，请按照您的bootstrapTable来电话 http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#table-events

Answer 2

您可以覆盖许多事件：

    onAll: function (name, args) {
        return false;
    },
    onClickRow: function (item, $element) {
        return false;
    },
    onDblClickRow: function (item, $element) {
        return false;
    },
    onSort: function (name, order) {
        return false;
    },
    onCheck: function (row) {
        return false;
    },
    onUncheck: function (row) {
        return false;
    },
    onCheckAll: function () {
        return false;
    },
    onUncheckAll: function () {
        return false;
    },
    onLoadSuccess: function (data) {
        return false;
    },
    onLoadError: function (status) {
        return false;
    },
    onColumnSwitch: function (field, checked) {
        return false;
    },
    onPageChange: function (number, size) {
        return false;
    },
    onSearch: function (text) {
        return false;
    },
    onToggle: function (cardView) {
        return false;
    },
    onPreBody: function (data) {
        return false;
    },
    onPostBody: function () {
        return false;
    },
    onPostHeader: function () {
        return false;
    },
    onPreRows: function () {
        return false;
    },
    onPostRows: function () {
        return false;
    }

对此插件的工作原理一无所知，我建议您尝试onLoadSuccess或onPostRows：

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    ...
    onLoadSuccess: function() {
        // do something
    },
    ...
 });

Answer 3

查看文档时，会有一个onLoadSuccess事件在数据成功加载后触发。

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 3849,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 100,
    pageList: [100, 200, 600, 1000],
    minimumCountColumns: 2,
    clickToSelect: true,
    onLoadSuccess: function(){
      //do something after data has loaded
    },
    ....

Answer 4

如前所述，成功加载数据时会触发onLoadSuccess（load-success.bs.table）事件。

或者，可以使用onPostBody（post-body.bs.table）事件。它将在表体呈现并在DOM中可用后触发。

可以在 bootstrap-table/docs/_i18n/en/documentation/events.md

中找到完整的活动列表

Answer 5

解决方案

有两种方法可以实现这一点。

一是使用BootstrapTable提供的属性（下图中红色部分）

$('#TableID').bootstrapTable({
     // ...
    onLoadSuccess: function() {
        // ...
  },
})

另一个使用JS（下图中绿色部分）

JS

专注于绿色颜色

所以你可以尝试这样的事情

JS

const TABLE_ID = "myTable";
const table = $(`#${TABLE_ID}`)
table.on('load-success.bs.table', function (event, rowArray) { // I prefer to call ``data`` as ``rowArray``.
  // alert(JSON.stringify(rowArray));
})

// another example
table.on('click-cell.bs.table', function (event, field, value, row, td) {
  td = td[0]
  // ...
})

onClickCell | click-cell.bs.table (backup link)

HTML

<table id="myTable" class="table table-striped table-blue"
       data-toggle="table"
       data-search="true"
       data-search-highlight="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client"
       data-export-types='["csv", "json", "excel", "doc", "sql", "png"]'
       data-editable = '[false, true, false, false]'
       data-export-options='{
        "fileName": "products"
        }'
       data-url="https://jsonplaceholder.typicode.com/photos">
  <thead>
  <tr>
    <th data-sortable="true" data-field="id">Id</th>
    <th data-sortable="true" data-field="title">Title</th>
    <th data-sortable="true" data-field="url">URL</th>
    <th data-sortable="true" data-formatter="imageFormatter" data-field="thumbnailUrl">Thumbnail URL</th>
  </tr>
  </thead>
</table>

文档

请参考有用的文档

<块引用>

https://bootstrap-table.com/docs/api/events/#onloadsuccess

如果以后链接失效，请参考

<块引用>

wenzhixin/bootstrap-table/gh-pages/0cee7c935/docs/api/events

等到bootstrapTable完全加载后才做某事

5 个答案:

解决方案

JS

文档