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

Question

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

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

我尝试使用 load 事件等待表加载，但这似乎不起作用

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

我需要什么 jquery 才能等待 $table 在我做某事之前完全加载？

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

您可以覆盖许多事件：

    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 2

试试

.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 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 中可用后触发。

完整的活动列表可在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