Question

有人可以解释如何使用来自ajax请求的数据为数据单元添加工具提示。

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

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

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

这就是我的表格设置方式：

<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

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

我必须为自己编辑引导程序表库以适应此解决方案。

对于任何想知道如何在数据单元上实现工具提示的人来说，这就是我解决它的方法。

原始来源： 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工具提示。

基于ajax的引导表

1 个答案: