Question

我找到了showFooter属性。但我不知道如何为此自定义内容。

我只需填写总共8个中的3个......

所以表看起来基本上是这样的：

<div class="table-responsive">
    <table class="table table-bordered" id="tblKontoauszug">
        <thead>
            <tr>
                <th data-sortable="@sortable" data-sorter="dateSorter">Buchungsdat.</th>
                <th data-sortable="@sortable">Belegnr.</th>
                <th data-sortable="@sortable">BA</th>
                <th data-sortable="@sortable" data-sorter="betragSorter">Betrag</th>
                <th data-sortable="@sortable">Buchungstext</th>
                <th data-sortable="@sortable">Gegenkontoart</th>
                <th data-sortable="@sortable">Gegenkonto</th>
                <th data-sortable="@sortable">Bezeichnung</th>
            </tr>
            <tr class="info text-bold">
                <td>
                    @if ( Model.Zeilen.Count() > 0 )
                    {
                        <span>@Model.Zeilen.Min(b => b.Buchungsdatum).ToShortDateString()</span>
                    }
                </td>
                <td colspan="2">Anfangsbestand</td>
                <td class="text-right">@Model.Anfangsbestand.ToString("N")</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tfoot>
            <tr class="info text-bold">
                <td>
                    @if ( Model.Zeilen.Count() > 0 )
                    {
                        <span>@Model.Zeilen.Max( b => b.Buchungsdatum ).ToShortDateString()</span>
                    }
                </td>
                <td colspan="2">Endbestand</td>
                <td class="text-right @( Model.Endbestand < 0 ? "negative" : "")">@Model.Endbestand.ToString( "N" )</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
        <tbody>
            @foreach ( var zeile in Model.Zeilen )
            {
                <tr>
                    <td>@zeile.Buchungsdatum.ToShortDateString()</td>
                    <td>@zeile.Belegnummer</td>
                    <td title="@zeile.BelegartText">@zeile.Belegart</td>
                    <td class="text-right @( zeile.Betrag < 0 ? "negative" : "")">@zeile.Betrag.ToString("N")</td>
                    <td>@zeile.Buchungstext</td>
                    <td>@zeile.Gegenkontoart</td>
                    <td>@zeile.Gegenkonto</td>
                    <td>@zeile.Bezeichnung</td>
                </tr>
            }
        </tbody>


    </table>
</div>

Answer 1

您可以通过将data-footer-formatter属性添加到要添加页脚的列并将该属性设置为等于已定义的javascript函数来自定义页脚中的内容。这是一个例子：

HTML：

<table data-toggle="table" data-show-footer="true" data-footer-style="footerStyle" data-show-columns="true">
  <thead>
    <tr>
      <th data-sortable="true" data-footer-formatter="totalText">Name</th>
      <th data-sortable="true" data-footer-formatter="carsSum"># Cars</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Johnny</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Zack</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Timmy</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

使用Javascript：

function totalText(data) {
  return 'TOTAL';
}

function carsSum(data) {
  return '7';
}

function footerStyle(value, row, index) {
  return {
    css: { "font-weight": "bold" }
  };
}

注意我在这里根本没有使用<tfoot>。这是因为<tfoot>无法使用show columns下拉列表，但这会（如果我在data-show-columns="true"元素上使用<table>属性，就像我在示例中所做的那样以上）。您还可以使用data-footer-style属性设置页脚样式。在我的例子中，我将页脚中的所有文本都加粗。

您可以在此处查看代码：https://jsfiddle.net/3mou92px/9/

是否可以在可引导程序中修复<footer>？

1 个答案: