javascript - 来自 Bootstrap 表的基于 Ajax 的数据的数据单元格上的工具提示

Question

有人可以解释如何为包含从 ajax 请求返回的数据的数据单元添加工具提示吗？

我在文档中找不到任何内容:

http://bootstrap-table.wenzhixin.net.cn/documentation/

我知道如何通过 HTML 标签在循环中填充数据来实现此目的，但当数据从 ajax 请求返回时自动填充时，似乎没有一种简单的方法可以做到这一点。

这就是我的 table 的设置方式:

<table id="stockLineTable" class="table table-bordered table-condensed table-striped" data-toggle="table" data-classes="" data-toolbar="#filter-bar"
    data-search="true"
    data-show-refresh="true"
    data-show-columns="true"
    data-minimum-count-columns="2"
    data-pagination="true"
    data-page-list="[25, 50, 100, 200]"
    data-show-footer="true"
    data-show-export="true"
    data-show-filter="true"
    data-click-to-select="true"
    data-page-size="25"
    data-export-types="['csv', 'doc', 'excel']" style="display: none;"
    data-url="/Api/StockLine/GetStockLines"
    data-side-pagination="server"
    data-query-params-type=""
    data-sort-order="desc"
    data-row-style="rowStyle"
    data-query-params="queryParams">
    <thead>
        <tr>
            <th data-field="state" data-radio="true"></th>
            <th data-sortable="true" data-field="RowIndex" data-visible="false" data-switchable="false"></th>
            <th data-sortable="true" data-field="StockDetailID" data-visible="true" data-switchable="true">@Resource.ID</th>
            <th data-sortable="true" data-visible="true" data-switchable="true" data-field="Name">@Resource.Stock @Resource.Line</th>
            <th data-sortable="true" data-field="Size" data-switchable="true" data-visible="true">@Resource.Size</th>
            <th data-sortable="true" data-field="StockCategoryID" data-switchable="true" data-visible="true">@Resource.Category</th>
            <th data-sortable="true" data-field="StockLevel" data-sorter="dateSorter">@Resource.Qty @Resource.InStock</th>
            <th data-sortable="true" data-field="MinQuantityLevel">@Resource.Qty @Resource.OnOrder</th>
            <th data-sortable="false" data-field="Controls" data-switchable="false" data-visible="true"></th>
            <th data-sortable="false" data-field="AdHoc" data-switchable="false" data-visible="false"></th>
        </tr>
    </thead>
</table>

Answer 1

在与源代码进行斗争之后，我发现最快的解决方案是编辑源代码以实现我想要的目标，因为库中没有任何可用的功能。

我必须自己编辑 Bootstrap 表库才能适应此解决方案。

对于任何想知道如何在数据单元格上实现工具提示的人，这就是我所做的解决方案。

原始出处: https://github.com/wenzhixin/bootstrap-table/blob/develop/src/bootstrap-table.js

之前:

text = that.options.cardView ? ['<div class="card-view">',
    that.options.showHeader ? sprintf('<span class="title" %s>%s</span>', style,
        getPropertyFromOther(that.columns, 'field', 'title', field)) : '',
    sprintf('<span class="value">%s</span>', value),
    '</div>'
].join('') : [sprintf('<td%s %s %s %s %s %s %s>',
    id_, class_, style, data_, rowspan_, colspan_, title_), 
    value,
    '</td>'
].join('');

之后:

在第 1773 行之后的 initBody() 方法中，我编辑了第 1784 行以下内容:

var tooltip = value.length > 15 && field != "Controls";
var displayeValue = tooltip ? value.substring(0, 15) + "..." : value;
text = that.options.cardView ? ['<div class="card-view">',
    that.options.showHeader ? sprintf('<span class="bt-title" %s>%s</span>', style,
        getPropertyFromOther(that.columns, 'field', 'title', field)) : '',
    sprintf('<span class="value">%s</span>', value),
    '</div>'
].join('') : [sprintf('<td%s %s %s %s %s %s>', 
    id_, class_, style, data_, rowspan_, 'title="' + (tooltip ? value : '') + '"'),
    displayeValue,
    '</td>'
].join('');

当文本超过 15 个字符时，上面将显示 HTML 工具提示。