2016-08-04 15 views
1

ajaxリクエストから返されたデータを持つデータセルのツールチップを追加する方法を説明できる人がいますか?ブートストラップテーブルの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> 
+0

ajaxベースのツールチップが必要な場所あなたはそれを必要とするイベントですか? –

+0

私はそれがヘッダーで行うことは可能ですが、データ行には何もないように見える行に含まれるデータに必要です – Saleh

答えて

0

ライブラリで有効にする。

私は、この解決方法に対応するために自分自身のためにブートストラップテーブルライブラリを編集しなければなりませんでした。

データセルでツールチップを達成する方法を知りたい方は、これを解決するために私が行ったことです。

オリジナルソース: 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(''); 

後:私は1784行まで編集したライン1773の後initBody()メソッドで

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(''); 

上記はHTMLテキストが15文字を超える場合、ツールチップ。

関連する問題